本文由笑忘书 13.02.24收集整理
35230.wodemo.com(转载请保留此信息)
【注意】：复制代码时注意带上该段的开头与结尾部分（如"body{" 和 "}"），删除【】部分、/* */部分、分割线以及换行，颜色代码（如red，#000000，#111）自行更换，说明仅供参考，因浏览器显示差异或属性覆盖等问题可能看不到效果，具体使用请自行摸索，欢迎各位提供纠正完善，更多属性代码参考请到
http://www.w3school.com.cn/css/，谢谢。
以下是通用代码，你可以利用它修改你想修改的区域的属性(如body{某通用代码} ，记得删除⑤★等标识)
〓字体属性〓
★font:①italic ②bold ③105% ④small-caps ⑤"Times New Roman",Georgia,Serif;
说明:
①italic /*字体风格为斜体。normal:默认值，oblique:倾斜文字*/
②bold /*字体浓淡为粗体。normal:默认值，bold:粗体，bolder:更粗，lighter:更细，100~900:
定义由粗到细的字符，400等同于 normal，而700等同于 bold*/
③105% /*字体尺寸为默认的105%。通过百分比或12px等控制，由实际情况而定*/
④small-caps /*字体为小型大写字母。若要正常值删除该部分即可*/
⑤"Times New Roman",Georgia,Serif /*字体系列。通常字体系列名称有"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。提示：建议使用多个，浏览器将使用其可识别的第一个值。使用逗号分割每个值，并始终提供一个通常字体系列作为最后的选择*/
★color:①white;
说明:
①white /*字体颜色。可用颜色代码如#000或#668547或red等*/
〓背景属性〓
★background:①url(背景图地址) ②no-repeat ③scroll ④right ⑤bottom ⑥#002255 ⑦cover;
说明:
①url(背景图地址) /*加背景图*/
②no-repeat /*背景图片重复属性。默认为图片既横向重复，又竖向重复，repeat-x:背景图片横向重复，repeat-y:背景图片竖向重复，no-repeat:背景图片不重复*/
③scroll /*背景图随网页下拉而滚动*/
④right /*背景图水平位置居右。left:居左，居中:center，也可以用1%-1008%表示与左端距离大小*/
⑤bottom /*背景图垂直位置位于底部。top:居顶部，center:居中，也可用1%-100%表示与顶端距离大小*/
⑥#002255/*背景颜色*/
⑦cover /*背景图尺寸。cover:保持原图宽高比例，缩放到正好完全覆盖定义区域 contain:保持原图宽高比例，缩放到宽度或高度正好适应指定区域，或用像素如320px 480px或百分比如80% 90%表示*/
〓边框属性〓
★border:①5px ②solid ③red;
说明:
①5px /*边框宽度*/
②solid /*边框样式*/
③red /*边框颜色*/
添加文字下划线(即下边框)
★border-bottom:2px solid red;
说明:
同上(border部分)
边框宽度(可单独设置各框宽度)
★border-width:2px 3px 0 5px;
说明:
/*分别为上右下左框*/
边框颜色(可单独设置各框颜色)
★border-color:red white green #660022;
说明:
/*分别为上右下左框*/
〓内边距属性〓
★padding:10px 5px 15px 20px;
说明:
/*分别为上右下左内边距*/
〓外边距属性〓
★margin:10px 5px 15px 20px;
说明:
/*分别为上右下左外边距*/
〓文本水平对齐属性〓
★text-align:①center;
说明:
①center /*文字居中。left:把文本排列到左边，默认值：由浏览器决定，right 把文本排列到右边，justify 实现两端对齐文本效果。*/
〓圆角属性〓
★border-radius:①1px 1px 5px 5px;
说明:
①1px 1px 5px 5px /*分别为左上角，右上角，右下角，左下角*/
建议也加上下面两段，即复制上面那段在前面分别加上-moz-和-webkit-
★-moz-border-radius:1px 1px 5px 5px;
★-webkit-border-radius:1px 1px 5px 5px;
⑦阴影属性
★box-shadow:①inset ②-2px ③2px ④10px ⑤#06c;
说明:
①inset /*阴影类型。默认为投影效果，inset:内阴影效果。*/
②-2px /*阴影水平偏移值(即控制左右阴影。正数值控制左边，负数值控制右边)*/
③2px/*垂直偏移值(即控制上下阴影。正数值控制上边，负数值控制下边)*/
④10px /*模糊值*/
⑤#06C /*阴影颜色*/;
建议也加上下面两段，即复制上面那段在前面分别加上-moz-和-webkit-
★-moz-box-shadow:inset -2px 2px 10px #06C;
★-webkit-box-shadow:inset -2px 2px 10px #06C;
〓尺寸属性〓
height:102%;/*元素的高度*/
line-height:2px;/*行高*/
max-height:240px;/*元素的最大高度*/
max-width:320px;/*元素的最大宽度*/
min-height:100px;/*元素的最小高度*/
min-width:100px;/*元素的最小宽度*/
width:240px;/*元素的宽度*/
⊙伪元素
在某区域前面添加内容
★①body:before{content:②"要显示的文字";}
说明:
①body /*填要定义的区域*/
②填显示文字
在某区域后面添加内容
★body:after{content:"显示文字";}
说明:同上
用于给文本的首行设置特殊样式
★.file_list:first-line{
☆color等属性
}
以下是部分参考代码，恕不详细，其余请利用以上部分进行增添
〓网页整体定义〓
body {
【网页背景色为绿】
background-color:green;
【默认字颜色为红】
color:red;
【网页框与网页边缘距离】
padding:2px 3px ;
【文字居中】
text-align: center;
【文字行距大小】
line-height: 18px;
【背景图片】
background: url(/down/20121124/44582/a.jpg)
【背景图不重复】
no-repeat;
【元素定位。absolute:绝对定位 fixed:相对于浏览器窗口进行定位 relative:相对于其正常位置进行定位 static:默认值，没有定位】
position:relative;
}
〓扩展名及首页上页下页末页区域定义〓
span {
【扩展名和"首页上页下页末页"区域背景色】
background-color:white;
【位置同上，文字颜色】
color:orange;
【边框样式为槽线式】
border-style: groove;
【位置同上，文字边框颜色】
border-color:red;
}
〓链接文字定义〓
a {
【边框样式为直线式】
border-style: solid;
【链接文字的边框粗细，左为横框，右为竖框】
border-width:1px 1px;
【同上位置，边框颜色】
border-color: blue;
【同上位置，文字颜色】
color:gold;
【链接文字的背景颜色】
background-color:gold;
【链接文字添加上划线】
text-decoration:overline;
}
〓评论区域定义〓
form{
【评论区域背景颜色】
background-color:#000011;
【评论区域字体颜色】
color:red;
}
〓未访问的链接〓
a:link {
【未访问的链接颜色】
color: #FF0000
}
〓已访问的链接〓
a:visited {
【已访问的链接颜色】
color: #00FF00
}
〓当有鼠标悬停在链接上〓
a:hover {
【鼠标停留链接的颜色】
color: #FF00FF
}
〓被选择的链接〓
a:active {
【被选择链接的颜色】
color: #0000FF
}
〓文件列表区域定义〓
.file_list{
【文件列表区域背景颜色为白】
background-color:white;
【扩展名字体颜色 ★若前面已用了span部分修改将优先显示span部分】
color:#556688;
【文件列表区域的文字尺寸为小字体】
font-size:9px;
【文件列表区域边框属性】
border:2px solid red;
}
〓文件列表文件名区域〓
.file_list li{
〓文件列表区域分割线〓
【文件名下边框线(即下划线)粗细】
border-bottom:1px
【同上，样式】
solid
【同上，颜色】
lime;
}
〓文件扩展名区域〓
.file_list