DIV+CSS遇到的问题收集

CSS3

不可思议的纯CSS导航栏下划线跟随效果

li::before {

    content: "";

    position: absolute;

    top: 0;

    left: 100%;

    width: 0;

    height: 100%;

    border-bottom: 2px solid #000;

    transition: 0.2s all linear;

}

li:hover::before {

    width: 100%;

    left: 0;

}

li:hover ~ li::before {

    left: 0;

}



背景缩放

/*Mozilla*/

-moz-background-size:auto||<length>||<percentage>||cover||contain;

/*Webkit*/

-webkit-background-size:auto||<length>||<percentage>||cover||contain;

/*Presto*/

-o-background-size:auto||<length>||<percentage>||cover||contain;

/*W3c*/

background-size:auto||<length>||<percentage>||cover||contain;


css简单的数学运算-加减乘除

width:calc(100%/3 - 20px);

注意：CSS3 中calc()关键字+(加)、-(减)运算符必须加空格

透明度

opacity: 0.5;

背景透明度

background: rgba(76, 175, 80, 0.3)


a.div不可以包含在P里

c.有一些是地址的问题， 连号例如&要用&转义

d.所有的标签一律用小写

e.所有的标签属性必须包括在" "里

f.链接最好都加上title（更具亲和力）

g.图片要加上alt=""，属性留空都可以

h.页面布局用div+css，表格只出现在需要用表格的地方，比如表现数据

i.加粗用，而不用，因为只是改变字体样式，而代表了语气的强调，重要＝＝，所以，呃。。重要的是语义~~

////////////////////////////////////

/////                             ////

///// １、强制不换行              /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

加属性white-space:nowrap;

////////////////////////////////////

/////                             ////

///// ２、高度达不到很小          /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

定义div的高度为很小时有时达不到,在div后面加上overflow:hidden;

////////////////////////////////////

/////                             ////

///// ３、文字换行                /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

CSS样式word-break:break-all

强制长的单词换行：

word-wrap:break-word;


整词换行

white-space:nowrap;

////////////////////////////////////

/////                             ////

///// ４、双表法调用样式表        /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

查看某些符合标准站点的原代码，你可能看到，在调用样式表的地方有如下2句：

@import url( css/style01.css );

////////////////////////////////////

/////                             ////

///// ５、固定显示层里的字数      /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

先定层宽width再加overflow:hidden;样式.

下载可以控制被除数,超出时自动出现...

{width:125px;height:20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

////////////////////////////////////

/////                             ////

///// ６、最小高度能自适应高度    /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

拥有最小高度能自适应高度，IE、FF全兼容的div设置

height:auto!important;height:200px;min-height:200px;

////////////////////////////////////

/////                             ////

///// ７、防止乱码　　            /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

防止乱码，请将用于页面编码的meta charset放到title的前面

////////////////////////////////////

/////                             ////

///// ８、高度有时定不了          /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

高度有时定不了,使用min-height 或min-width

////////////////////////////////////

/////                             ////

///// ９、区分firefox,IE7,IE6     /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

比如 IE6能识别下划线_和星号*，IE7能识别星号*，当不能识别下划线_，而firefox两个都不能认识。

比如

div{ background:green; /* for firefox */

*background:red;  /* for IE6 */

}

<div>我在IE6中看到是红色的，在firefox中看到是绿色的。</div> 

于是大家还可以这样来区分firefox,IE7,IE6

margin-top:-15px; *margin-top:0px !important;  *margin-top:0px;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

////////////////////////////////////

/////                             ////

///// １０、透明度问题　          /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

透明度问题，在IE6 IE7中显示不正常，在firefox中显示正常

透明度问题，在IE6 IE7中和在firefox中均显示正常

////////////////////////////////////

/////                             ////

///// １１、背景问题　           /////

/////                            //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

BACKGROUND: none transparent scroll repeat 0% 0%

第一 你的这句是错的。

但是系统会帮你解释成下面这样。

BACKGROUND:transparent none repeat scroll 0% 0%

分别代表

背景属性：背景颜色 背景图片 背景是否重复 背景时候随浏览器滚动 背景平位置 背景垂直位置

background : background-color || background-image || background-repeat || background-attachment || background-position

transparent表示透明无颜色

none 表示没有设置背景图片

repeat 表示图片重复

scroll 表示背景图片随浏览器下拉而滚动

0%水平位置在x0

0%垂直位置在y0

这个试试是background 的默认这是 ，

也就是说 没有对background属性进行设置的时候 他就会使用这用设置

////////////////////////////////////

/////                             ////

///// １２、CSS设置不转行　       /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

overflow:hidden 隐藏

white-space：normal 默认

pre 换行和其他空白字符都将受到保护

nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象

////////////////////////////////////

/////                             ////

///// １３、设置强行换行          /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

word-break:

normal ; 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行

break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量

亚洲文本的非亚洲文本

////////////////////////////////////

/////                             ////

///// １４、标题在框中间的制作方法/////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

标题

内容区

////////////////////////////////////

/////                             ////

///// １５、交互式按钮和图片      /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

<a href="#"><img src="a.gif" width="192" height="51" border="0" onMouseOver="this.src='b.jpg'" onMouseOut="this.src='a.gif'" /></a>

////////////////////////////////////

/////                             ////

///// １６、隐藏多余被除数        /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

隐藏多余数还可以在后面显示三点的属性

132456789132456789

但是这个属性不符合w3c标准

////////////////////////////////////

/////                             ////

///// １７、div自动高度设置       /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

在DIV的里面放入下面层产生一个空格.


////////////////////////////////////

/////                             ////

///// １８、批量去链接的虚框      /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

可以批量去掉网页上全部超链接的虚框

a{blr:expression(this.onFocus=this.blur());}


////////////////////////////////////

/////                             ////

///// １９、指针为手形            /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

指针为手形 cursor: pointer;

////////////////////////////////////

/////                             ////

///// ２０、常见问题              /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

1、FF下给 div 设置 padding 后会导致 width 和 height 增加，但IE不会。（可用!important解决）

2、居中问题。

1) 垂直居中。将 line-height 设置为 当前 div 相同的高度，再通过 vertical-align: middle. （注意内容不要换行）

2) 水平居中。 margin: 0 auto; （当然不是万能）

3、若需给 a 标签内内容加上 样式，需要设置 display: block; （常见于导航标签）

4、FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float 的 div 在 ie 下 margin 加倍等问题。

5、ul 标签在 FF 下面默认有 list-style 和 padding 。最好事先声明，以避免不必要的麻烦。（常见于导航标签和内容列表）

6、作为外部 wrapper 的 div 不要定死高度，最好还加上 overflow: hidden ，以达到高度自适应。

7、关于手形光标。 cursor: pointer ，而 hand 只适用于 IE。

8、至于IE5以及其他浏览器就没有必要兼顾了，在这上面花时间不值得。

////////////////////////////////////

/////                             ////

///// ２１、 万能 float 闭合      /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

万能 float 闭合（非常重要）

.clear{clear:both;}

将以下代码加入Global CSS 中，给需要闭合的div加上 class="clear" 即可，屡试不爽。

程序代码

////////////////////////////////////

/////                             ////

///// ２２、鼠标经过时改变属性    /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

鼠标经过时改变属性:

onmouseover="this.style.backgroundColor='FF6600'"

onmouseout="this.style.backgroundColor='0066FF'"

////////////////////////////////////

/////                             ////

///// ２３、改变按钮样式          /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

onmousemove="this.className='buttom_hover'" onmouseout="this.className='buttom'"

////////////////////////////////////

/////                             ////

///// ２４、css整体的设计         /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

css整体的设计

@charset "utf-8";

body,input,table,select,textarea,h1,h2,h3,h4{

color:#555555;

font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;

}

body,input,table,select,textarea,h1{

font-size:12px;

font-weight:normal;

}

body,a,div,ul,ol,li,dl,dt,dd,p,span,form,pre,h1,h2,h3,h4,h5,h6{

margin:0;

padding:0;

}

body{

/*font:normal normal normal 12px/1.5em tahoma, "Microsoft Yahei", Simsun, Arial Unicode MS, Mingliu, Arial, Helvetica;*/

text-align: center;

height:100%;

word-break : break-all;

}

////////////////////////////////////

/////                             ////

///// ２５、单词间的距离          /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

单词间的距离：利用字间距属性word-spacing，可以调整单词间的距离。

.h2 {word-spacing:5pt}

////////////////////////////////////

/////                             ////

///// ２６、字母间距              /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

字母间距：利用字母间距属性letter-spacing，可以调整单词中每个字母间的距离。

. h2 {letter-spacing:10pt};

////////////////////////////////////

/////                             ////

///// ２７、手形指针              /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

24.cursor: pointer;和cursor: hand;在IE里边都是代表手形指针

但是在FireFox里边hand是无效的.

所以推荐使用cursor: pointer;来表示手形鼠标指针.

但是这样带来的问题就是点击链接时候会跳到页面最上边,而且地址栏最后会多出一个#来~

所以推荐用 href=”javascript:void(0)”来表示空连接~

////////////////////////////////////

/////                             ////

///// ２８、首行缩进两格          /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

.t_msgfont{ text-indent: 2em; }其中 2em 代表两个中文字符的宽度。

////////////////////////////////////

/////                             ////

///// ２９、简体转成utf-8         /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

26.如果页面由简体转成utf-8时CSS部分就不能有任何全角符号,否则好容易出错的.比如说样式无效等等.

解决方法:把CSS文件也转成UTF-8的格式就可以了,也就是在CSS的最前面加上 @charset "utf-8";

////////////////////////////////////

/////                             ////

///// ３０、层垂直居中于浏览器中  /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

怎样使一个层垂直居中于浏览器中?


div {

position:absolute;

top:50%;

left:50%;

margin:-100px 0 0 -100px;

width:200px;

height:200px;

border:1px solid red;

}

-->

////////////////////////////////////

/////                             ////

///// ３１、列表前面点的样式      /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

disc (缺省值，黑圆点)

circle (空心圆点)

square (小黑方块)

decimal (数字排序)

lower-roman (小写罗马字排序)

upper-roman (大写罗马字排序)

lower-alpha (小写字母排序)

upper-alpha (大写字母排序)

none (无列表项标记)

////////////////////////////////////

/////                             ////

///// ３２、页面变成黑白          /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

使整个页面变成黑白filter:Gray;放在body中

////////////////////////////////////

/////                             ////

///// ３３、浮动ie产生的双倍距离  /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

#box{ float:left; width:100px; margin:0 0 0 100px;   //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;

////////////////////////////////////

/////                             ////

///// ３４、用iframe自动适应高度  /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

<IFRAME id=headlogin marginWidth=0  marginHeight=0 src="xxx" frameBorder=0 width=100% scrolling=no height=25 onload="this.height=this.contentWindow.document.body.scrollHeight"></IFRAME>

////////////////////////////////////

/////                             ////

///// ３５、样式名字不可以以数字开头 /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

样式名字不可以以数字开头，比如#33safds{...}

////////////////////////////////////

/////                             ////

///// ３６、未知高度垂直居中样式写法 /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

#div1, #div2 {display:table-cell; *display: inline; zoom:1; vertical-align:middle;}

blah blah...看见我居中了吗？

sdfs 

sd

fsd

f

sd

fs

d 

////////////////////////////////////

/////                             ////

///// ３７、样式控制打开链接的方法/////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

.target2 a:active {test:expression(target="_blank");}

////////////////////////////////////

/////                             ////

///// ３８、ifream透明背景        /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

<iframe src="http://www.169.net/index/footer.html" width="960" marginwidth="0" height="100" marginheight="0" align="top" scrolling="no" frameborder="0" style="background:#000;" allowTransparency="true"></iframe>



////////////////////////////////////

/////                             ////

///// ３９、图片垂直居中          /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

.img_middle {overflow:hidden; position:relative; display:table-cell; text-align:center; vertical-align:middle; margin:0;padding:0}

.img_middle p { position:static; +position:absolute; top:50%; margin:0;padding:0}

.img_middle img { position:static; +position:relative; top:-50%;left:-50%;margin:0;padding:0}

////////////////////////////////////

/////                             ////

///// ４０、CSS控制input悬停样式  /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

input {star : expression(

onmouseover=function(){this.style.width="200px"},

onmouseout=function(){this.style.width="100px"})}


////////////////////////////////////

/////                             ////

///// ４１、只有IE7认识           /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

*+html div{}

这个只有IE7认识，很好用

////////////////////////////////////

/////                             ////

///// ４２、IE6支持PNG透明的方法  /////

/////                             //////

/////////////////////////////////////////

-------------------------------------------------------------------------------

在样式里使用滤镜#png {

position:absolute;background: url(../images/bg.png) repeat;_background:none;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="images/bg.png");

}

注：使用 AlphaImageLoader 后该区域的超链接和按钮会失效，所以需对链接或按钮直接设置相对位置，让它们浮动于滤镜区域的上面。

IE7支持AlphaImageLoader,避免冲突建议使用CSS hack区分开,只针对IE6使用。

-------------------------------------------------------------------------------

////////////////////////////////////

/////                             ////

///// ４３、透明度                /////

/////                             //////

/////////////////////////////////////////

----------------------------------------------

filter:alpha(opacity=100); -moz-opacity:1; opacity:1;

/////////////////////////////////////////////////////////////

针对google浏览器的hack

body:nth-of-type(1) .me{color:#ff0000; }

在样式前面加上body:nth-of-type(1)

////////////////////////////////////////

默认高度

height:auto!important;height:200px;min-height:200px;

////////////////////////////////////

/////                             ////

///// ４４、钮按变灰色            /////

/////                             //////

/////////////////////////////////////////

.button_gray{filter:Gray; -moz-opacity:0.3; cursor:default;}

////////////////////////////////////

/////                             ////

///// ４５、半透明背景            /////

/////                             //////

/////////////////////////////////////////

.bg{background-color: #666;width: 100%;height: 100%;left:0;top:0;filter:alpha(opacity=50);opacity:0.5;z-index:1;position:fixed!important;position:absolute;_top:expression_r_r(eval_r(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);}

////////////////////////////////////

/////                             ////

///// ４６、表单上传文件样式      /////

/////                             //////

/////////////////////////////////////////

.file1{height:24px;float:left; display:inline; overflow:hidden;}

.file1 input{height:17px;border:1px #d4d4d4 solid; font:12px 宋体; background:#fff; padding:4px 5px 0 5px;}

.file2{width:75px; height:23px; background:url(../images/ico.gif) 15px -2562px no-repeat;overflow:hidden; float:left;}

.filebtn{width:75px; height:32px; margin-left:-130px;*margin-left:0px!important; *margin-left:-3px;filter:alpha(opacity=0);-moz-opacity:0; position:relative; top:-5px; left:-5px;cursor:pointer;}


////////////////////////////////////

/////                             ////

///// ４７、IE8 CSS hack          /////

/////                             //////

/////////////////////////////////////////

"\9"　例:"margin:0px auto\9;".这里的"\9"可以区别所有IE和FireFox.

"*"　IE6、IE7可以识别.IE8、FireFox不能.

"_"　IE6可以识别"_",IE7、IE8、FireFox不能.

background-color: #CC00FF;        /*所有浏览器都会显示为紫色*/

background-color: #FF0000\9;    /*IE6、IE7、IE8会显示红色*/

*background-color: #0066FF;        /*IE6、IE7会变为蓝色*/

_background-color: #009933;        /*IE6会变为绿色*/

////////////////////////////////////

/////                             ////

///// ４８、解决IE8样式问题       /////

/////                             //////

/////////////////////////////////////////

在页面上插入

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,098评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,213评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,960评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,519评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,512评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,533评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,914评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,574评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,804评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,350评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,933评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2赞 342

推荐阅读更多精彩内容