我的磨wodemo的CSS代码教程
发布时间：
【注意】：复制代码时注意带上该段的开头与结尾部分（如"body{" 和 "}"），删除【】部分、分割线以及换行，颜色代码（如red，#000000，#111）自行更换，说明仅供参考，因浏览器显示差异或属性覆盖等问题可能看不到效果，具体使用请自行摸索，欢迎各位提供纠正完善，更多属性代码参考请到http://www.w3school.com.cn/css/，谢谢。
〓网页主页定义〓
body {
【网页背景色为绿】
background-color:green;
【默认字颜色为红】
color: red;
【网页框与网页边缘距离】
padding:2px 3px ;
【文字居中,居左用left,居右用right】
text-align: center;
【字体尺寸为默认的120%,小字体用9px或其他，由实际情况而定】
font-size:120%;
【字体浓淡为粗体。normal:默认值，bold:定义粗体字符，bolder:定义更粗的字符，lighter:定义更细的字符，100~900:
定义由粗到细的字符，400 等同于 normal，而 700 等同于 bold】
font-weight: bold;
【文字风格为斜体。normal:默认值，oblique:倾斜文字】
font-style:Italic;
【字体为小型大写字母】
font-variant:small-caps;
【字体系列为通常字体系列。通常字体系列名称有"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。提示：建议使用多个，浏览器将使用其可识别的第一个值。使用逗号分割每个值，并始终提供一个通常字体系列作为最后的选择】
font-family:"Times New Roman",Georgia,Serif;
【文字行距大小】
line-height: 18px;
【背景图片，括号内填图片地址，如果图片在你的磨里可删除/down部分 ★若与网页边框一起用，图片将只能显示在边框外】
background: url(/down/20121124/44582/a.jpg)
【背景图片重复属性】
这个属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下,图片既横向重复，又竖向重复。repeat-x:背景图片横向重复 repeat-y:背景图片竖向重复no-repeat:背景图片不重复】
repeat-y;
【元素定位。absolute:绝对定位 fixed:相对于浏览器窗口进行定位 relative:相对于其正常位置进行定位 static:默认值，没有定位】
position:relative;
}
〓扩展名及首页上页下页末页区域定义〓
span {
【扩展名和"首页上页下页末页"区域背景色】
background-color:white;
【位置同上，文字颜色】
color:orange;
【边框样式为槽线式】
border-style: groove;
【位置同上，文字边框颜色】
border-color:red;
【位置同上，文字边框粗细，左为横框架，右为竖框架】
border-width: 1px 1px;
}
〓链接文字定义〓
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 span{
【扩展名字体颜色为红】
color:red;
【扩展名背景色】
background-color:black;
}
〓网页边框内定义〓
div {
【默认字颜色为红】
color:red;
【边框样式为双线式。如果浏览器不支持将默认显示为实线】
border-style: double;
【网页边框颜色，分别为上右下左框】
border-color: #ff5566 #446600 #0033ff #1122ff;
【网页边框粗细，左为横框，右为竖框】
border-width: 4px 1px;
【文字与网页边框的距离】
padding:3px;
【网页边框内的颜色。如果与body{background-color:red;}同时存在，则网页边框外为红色，边框内为绿色】
background-color:green;
【分类中用到div的部分与周边距离】
margin:3px 1px;
}
〓首页上页下页末页区域定义〓
p {
【与外边缘的距离，分别为上右下左外边距】
margin:2px 1px 2px 1px
【"首页上页下页末页"区域背景色】
background-color:white;
【"首页上页下页末页"区域字体颜色】
color:red;
}
〓 网页主体定义〓
#whole_body {
【背景图片，可用于添加网站logo 】
background:url(图片地址)
【背景图不重复】
no-repeat
【背景图随网页下拉而滚动】
scroll
【背景图位置居右，居左用left居中用center。另外，也可以用1%-100%表示与左端距离大小】
right
【背景图位置居网页底端，居顶用top居中用center。同样也可用1%-100%表示与顶端距离大小】
bottom;
【图片弯曲半径，即调整图片四角的曲度】
border-radius: 12px;
【背景图尺寸。cover:保持原图宽高比例，缩放到正好完全覆盖定义区域 contain:保持原图宽高比例，缩放到宽度或高度正好适应指定区域】
background-size:320px;
〓网页圆角定义〓
【圆角半径。-moz-适用于Firefox浏览器，而-webkit-则是用于Safari/Chrom浏览器】
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
〓网页阴影定义〓
【从左到右分别为阴影类型(若无默认为投影效果。inset:内阴影效果)、阴影水平偏移值(即控制左右阴影。正数值控制左边，负数值控制右边)、垂直偏移值(即控制上下阴影。正数值控制上边，负数值控制下边)、模糊值和颜色】
box-shadow : inset -3px 3px 15px #111;
-webkit-box-shadow :inset -3px 3px 15px #111;
-moz-box-shadow :inset -3px 3px 15px #111;
【网页主体宽度最大值】
max-width : 640px;
【文字居中】
text-align : center;
【网页主体的外边距】
margin:auto;
【主体网页内文字与边缘距离】
padding : 10px 5px;
*padding : 10px 5px; _padding : 10px 5px;
【网页边框与网页边缘距离】
margin:5px 2px;
}
〓输入框定义〓
textarea,input[type="input"] ,input[type="text"] {
【输入框填充颜色为黑】
background:black;
【输入框内字体颜色为白】
color:white;
【输入框内框与外框距离，略大可以形成双重框架】
border:3px
【边框线样式为实线】
solid
【透明属性，其实系统默认也是这个】
transparent;
【边框半径，适当调大可发现输入框由矩形变成椭圆形】
border-radius : 7px;
【阴影，从左到右分别为阴影类型、阴影水平偏移值、垂直偏移值、模糊值和颜色，具体见上】
box-shadow : inset 3px 3px 3px #222;
【输入文字与输入框条距离】
padding : 2px;
}
〓提交按钮定义〓
【submit用于提交表单，button用于JavaScript执行。若要区别开来用，把其中一个移开再新建即可】
button,input[type="button "],input[type="submit"]
{
【按钮背景色为黑】
background : #333;
【字体颜色为白】
color : #EEE;
【按钮大小】
border : 1px
solid transparent;
【按钮阴影，详情见上】
box-shadow : 0 0
}
〓网页主页定义〓
body {
【网页背景色为绿】
background-color:green;
【默认字颜色为红】
color: red;
【网页框与网页边缘距离】
padding:2px 3px ;
【文字居中,居左用left,居右用right】
text-align: center;
【字体尺寸为默认的120%,小字体用9px或其他，由实际情况而定】
font-size:120%;
【字体浓淡为粗体。normal:默认值，bold:定义粗体字符，bolder:定义更粗的字符，lighter:定义更细的字符，100~900:
定义由粗到细的字符，400 等同于 normal，而 700 等同于 bold】
font-weight: bold;
【文字风格为斜体。normal:默认值，oblique:倾斜文字】
font-style:Italic;
【字体为小型大写字母】
font-variant:small-caps;
【字体系列为通常字体系列。通常字体系列名称有"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。提示：建议使用多个，浏览器将使用其可识别的第一个值。使用逗号分割每个值，并始终提供一个通常字体系列作为最后的选择】
font-family:"Times New Roman",Georgia,Serif;
【文字行距大小】
line-height: 18px;
【背景图片，括号内填图片地址，如果图片在你的磨里可删除/down部分 ★若与网页边框一起用，图片将只能显示在边框外】
background: url(/down/20121124/44582/a.jpg)
【背景图片重复属性】
这个属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下,图片既横向重复，又竖向重复。repeat-x:背景图片横向重复 repeat-y:背景图片竖向重复no-repeat:背景图片不重复】
repeat-y;
【元素定位。absolute:绝对定位 fixed:相对于浏览器窗口进行定位 relative:相对于其正常位置进行定位 static:默认值，没有定位】
position:relative;
}
〓扩展名及首页上页下页末页区域定义〓
span {
【扩展名和"首页上页下页末页"区域背景色】
background-color:white;
【位置同上，文字颜色】
color:orange;
【边框样式为槽线式】
border-style: groove;
【位置同上，文字边框颜色】
border-color:red;
【位置同上，文字边框粗细，左为横框架，右为竖框架】
border-width: 1px 1px;
}
〓链接文字定义〓
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 span{
【扩展名字体颜色为红】
color:red;
【扩展名背景色】
background-color:black;
}
〓网页边框内定义〓
div {
【默认字颜色为红】
color:red;
【边框样式为双线式。如果浏览器不支持将默认显示为实线】
border-style: double;
【网页边框颜色，分别为上右下左框】
border-color: #ff5566 #446600 #0033ff #1122ff;
【网页边框粗细，左为横框，右为竖框】
border-width: 4px 1px;
【文字与网页边框的距离】
padding:3px;
【网页边框内的颜色。如果与body{background-color:red;}同时存在，则网页边框外为红色，边框内为绿色】
background-color:green;
【分类中用到div的部分与周边距离】
margin:3px 1px;
}
〓首页上页下页末页区域定义〓
p {
【与外边缘的距离，分别为上右下左外边距】
margin:2px 1px 2px 1px
【"首页上页下页末页"区域背景色】
background-color:white;
【"首页上页下页末页"区域字体颜色】
color:red;
}
〓 网页主体定义〓
#whole_body {
【背景图片，可用于添加网站logo 】
background:url(图片地址)
【背景图不重复】
no-repeat
【背景图随网页下拉而滚动】
scroll
【背景图位置居右，居左用left居中用center。另外，也可以用1%-100%表示与左端距离大小】
right
【背景图位置居网页底端，居顶用top居中用center。同样也可用1%-100%表示与顶端距离大小】
bottom;
【图片弯曲半径，即调整图片四角的曲度】
border-radius: 12px;
【背景图尺寸。cover:保持原图宽高比例，缩放到正好完全覆盖定义区域 contain:保持原图宽高比例，缩放到宽度或高度正好适应指定区域】
background-size:320px;
〓网页圆角定义〓
【圆角半径。-moz-适用于Firefox浏览器，而-webkit-则是用于Safari/Chrom浏览器】
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
〓网页阴影定义〓
【从左到右分别为阴影类型(若无默认为投影效果。inset:内阴影效果)、阴影水平偏移值(即控制左右阴影。正数值控制左边，负数值控制右边)、垂直偏移值(即控制上下阴影。正数值控制上边，负数值控制下边)、模糊值和颜色】
box-shadow : inset -3px 3px 15px #111;
-webkit-box-shadow :inset -3px 3px 15px #111;
-moz-box-shadow :inset -3px 3px 15px #111;
【网页主体宽度最大值】
max-width : 640px;
【文字居中】
text-align : center;
【网页主体的外边距】
margin:auto;
【主体网页内文字与边缘距离】
padding : 10px 5px;
*padding : 10px 5px; _padding : 10px 5px;
【网页边框与网页边缘距离】
margin:5px 2px;
}
〓输入框定义〓
textarea,input[type="input"] ,input[type="text"] {
【输入框填充颜色为黑】
background:black;
【输入框内字体颜色为白】
color:white;
【输入框内框与外框距离，略大可以形成双重框架】
border:3px
【边框线样式为实线】
solid
【透明属性，其实系统默认也是这个】
transparent;
【边框半径，适当调大可发现输入框由矩形变成椭圆形】
border-radius : 7px;
【阴影，从左到右分别为阴影类型、阴影水平偏移值、垂直偏移值、模糊值和颜色，具体见上】
box-shadow : inset 3px 3px 3px #222;
【输入文字与输入框条距离】
padding : 2px;
}
〓提交按钮定义〓
【submit用于提交表单，button用于JavaScript执行。若要区别开来用，把其中一个移开再新建即可】
button,input[type="button "],input[type="submit"]
{
【按钮背景色为黑】
background : #333;
【字体颜色为白】
color : #EEE;
【按钮大小】
border : 1px
solid transparent;
【按钮阴影，详情见上】
box-shadow : 0 0
}
CSS代码使用方法
CSS代码结构：由两部分组成，即
指定区域(选择器){ 通用代码(声明) }
注：指定区域(选择器)为本教程的蓝色部分，确定样式渲染的对象；通用代码(声明)为本教程的红色部分，针对特定对象进行控制和定义。
不明白的可以看示例：
body{
font-weight:bold;
background:red;
}
注：body为网页全局区域，即<body>标签内的内容，将被font-weight:bold;定义文字为粗体，被background:red;定义背景颜色为红色。
注意：复制红色通用代码时请删除类似①②③的标识符
〓字体属性〓
①font-style:italic; ②font-weight:bold; ③font-size:105%; ④font-variant:small-caps; ⑤font-family:"Times New Roman",Georgia,Serif;
说明: ①font-style /*字体风格。normal:默认值，oblique:倾斜文字，italic:斜体*/
②font-weight /*字体浓淡。normal:默认值，bold:粗体，bolder:更粗，lighter:更细，100~900: 定义由粗到细的字符，400等同于 normal，而700等同于 bold*/
③font-size /*字体尺寸。通过百分比或12px或1.2em等控制，由实际情况而定，如120%为默认字体大小的120%，和1.2em同样大小*/
④font-variant /*字体为小型大写字母。若要正常值删除该部分即可*/
⑤font-family /*字体系列。通常字体系列名称有"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。提示：建议使用多个，浏览器将使用其可识别的第一个值。使用逗号分割每个值，并始终提供一个通常字体系列作为最后的选择*/
①color:white;
说明: ①color /*字体颜色。可用颜色代码如#000或#668547或red等*/
〓背景属性〓
①background-image:url(背景图地址); ②background-repeat:no-repeat; ③background-attachment:scroll; ④background-position:right bottom; ⑤background-color:#002255; ⑥background-size:cover;
说明: ①background-image /*添加背景图*/
②background-repeat /*背景图片重复属性。默认为图片既横向重复，又竖向重复，repeat-x:背景图片横向重复，repeat-y:背景图片竖向重复，no-repeat:背景图片不重复*/
③background-attachment /*背景图随网页下拉而滚动*/
④background-position /*背景图水平位置和垂直位置。水平位置：left:居左，居中:center，也可以用1%-1008%表示与左端距离大小。垂直位置：top:居顶部，center:居中，也可用1%-100%表示与顶端距离大小 */
⑤background-color /*背景颜色*/
⑥background-size /*背景图尺寸。cover:保持原图宽高比例，缩放到正好完全覆盖定义区域 contain:保持原图宽高比例，缩放到宽度或高度正好适应指定区域，或用像素如320px 480px或百分比如80% 90%表示*/
〓边框属性〓
border:①5px ②solid ③red;
说明: ①5px /*边框宽度*/
②solid /*边框样式*/
③red /*边框颜色*/
添加文字下划线(即下边框)
border-bottom:2px solid red;
说明: 同上(border部分)
边框宽度(可单独设置各框宽度)
border-width:2px 3px 0px 5px;
说明: /*分别为上右下左框*/
边框颜色(可单独设置各框颜色)
border-color:red white green #660022;
说明: /*分别为上右下左框*/
〓内边距属性〓
padding:10px 5px 15px 20px;
说明: /*分别为上右下左内边距*/
〓外边距属性〓
margin:10px 5px 15px 20px;
说明: /*分别为上右下左外边距*/
〓文本属性〓
文本对齐
text-align: ①center;
说明: ①center /*文字居中。left:把文本排列到左边，默认值：由浏览器决定，right 把文本排列到右边，justify 实现两端对齐文本效果。*/
规定当文本溢出包含元素时发生的事情
text-overflow: ①ellipsis;
说明:①ellipsis /*clip:修剪文本，ellipsis:显示省略符号来代表被修剪的文本，string:使用给定的字符串来代表被修剪的文本*/
文本文字阴影
text-shadow: ①5px ②5px ③6px ④#FF0000;
说明:①5px /*水平阴影的位置，允许负值*/
②5px /*垂直阴影的位置，允许负值*/
③6px /*模糊的距离*/
④#FF0000 /*阴影的颜色*/
允许长单词换行到下一行
word-wrap: ①break-word;
说明:①break-word /*允许长单词换行到下一行*/
〓垂直对齐属性〓
vertical-align:①text-top;
说明: ①text-top /*把元素的顶端与父元素字体的顶端对齐。baseline:默认，元素放置在父元素的基线上，sub:垂直对齐文本的下标，super:垂直对齐文本的上标，top:把元素的顶端与行中最高元素的顶端对齐，middle:把此元素放置在父元素的中部，bottom:把元素的顶端与行中最低的元素的顶端对齐，text-bottom:把元素的底端与父元素字体的底端对齐，%:使用 "line-height" 属性的百分比值来排列此元素，允许使用负值。*/
〓圆角属性〓
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 /*阴影类型。outset:默认，投影效果，inset:内阴影效果。*/
②-2px /*阴影水平偏移值(即控制左右阴影。正数值控制右侧，负数值控制左侧)*/
③2px/*垂直偏移值(即控制上下阴影。正数值控制下边，负数值控制上边)*/
④10px /*模糊值*/
⑤#06C /*阴影颜色*/;
建议也加上下面两段，即复制上面那段在前面分别加上-moz-和-webkit-(如-moz-box-shadow:inset -2px 2px 10px #06C; -webkit-box-shadow:inset -2px 2px 10px #06C;)
〓轮廓属性〓
outline:①2px ②black ③solid;
说明: ①2px /*轮廓宽度*/
②black /*轮廓颜色*/
③solid /*轮廓样式。边框线的类型有九个确定值: none:无边框线，dotted:由点组成虚线，dashed:由短线组成的虚线，solid:实线，double:双线，groove:3D沟槽状的边框，ridge:3D脊状的边框，inset:3D内嵌边框,颜色较深，outset:3D外嵌边框,颜色较浅。*/
〓尺寸属性〓
height:102%; /*元素的高度*/
line-height:2px; /*行高*/
max-height:240px; /*元素的最大高度*/
max-width:320px; /*元素的最大宽度*/
min-height:100px; /*元素的最小高度*/
min-width:100px; /*元素的最小宽度*/
width:240px; /*元素的宽度*/
生成框属性
display: ①none;
说明:①none /*此元素不会被显示*/
②block /*此元素将显示为块级元素，前后会带有换行符*/
③inline /*默认。此元素会被显示为内联元素，元素前后没有换行符*/
④inline-block /*行内块元素*/
⑤list-item /*此元素会作为列表显示。*/
⑥run-in /*此元素会根据上下文作为块级元素或内联元素显示*/
⑦table /*此元素会作为块级表格来显示(类似<table>)，表格前后带有换行符*/
⑧inline-table /*此元素会作为内联表格来显示(类似<table>)，表格前后没有换行符*/
⑨table-row-group /*此元素会作为一个或多个行的分组来显示(类似<tbody>)*/
⑩table-header-group /*此元素会作为一个或多个行的分组来显示(类似<thead>)*/
①①table-footer-group /*此元素会作为一个或多个行的分组来显示(类似<tfoot>)*/
①②table-row /*此元素会作为一个表格行显示(类似<tr>)*/
①③table-column-group /*此元素会作为一个或多个列的分组来显示(类似<colgroup>)*/
①④table-column /*此元素会作为一个单元格列显示(类似<col>)*/
①⑤table-cell /*此元素会作为一个表格单元格显示(类似<td>和<th>)*/
①⑥table-caption /*此元素会作为一个表格标题显示(类似<caption>)*/
⊙伪元素
在某区域前面添加内容
①#whole_body:before{content:②"要显示的文字";}
说明: ①#whole_body /*填要定义的区域*/
②填显示文字
在某区域后面添加内容
.file_list li:after{content:"显示文字";}
说明:同上
用于给文本的首行设置特殊样式
.file_list:first-line{填通用代码}
伪类在元素获得焦点时向元素添加特殊的样式
a:focus{通用代码}
★属性选择器★
说明:利用这个选择器可以对带有指定属性的 HTML 元素设置样式。
如想定义某个文字链接的颜色大小的等属性可以用a[href="链接"]{通用代码}，定义"分类名"属性可用a[href^="/cat/"]{通用代码}或input[type="text"]等等。
[属性] {通用代码}
/*用于选取带有指定属性的元素。*/
[属性=值] {通用代码}
/*用于选取带有指定属性和值的元素。*/
[属性~=值] {通用代码}
/*用于选取属性值中包含指定词汇的元素。*/
[属性|=值] { 通用代码}
/*用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。*/
[属性^=值] {通用代码}
/*匹配属性值以指定值开头的每个元素。*/
[属性$=值] {通用代码}
/*匹配属性值以指定值结尾的每个元素。*/
[属性*=值] {通用代码}
/*匹配属性值中包含指定值的每个元素。*/
完整代码
复制时，注意带上该段开头部分与结尾部分(如 body{ 和 })，如发现不能使用可删除/*文字注释*/看看，建议结合上面的通用代码使用
网页主页定义
body {
background-color: green;
/*网页背景色*/
color: red;
/*默认字颜色*/
padding: 2px 3px 2px 4px
/*网页主体与边缘的距离，分别为上右下左方*/
text-align: center;
/*内容居中显示*/
font-size: 120%;
/*字体尺寸大小*/
font-weight: bold;
/*字体浓淡*/
font-style: Italic;
/*文字风格*/
font-variant: small-caps;
/*字体为小型大写字母*/
font-family: "Times New Roman",Georgia,Serif;
/*字体系列*/
line-height: 18px;
/*文字行距大小*/
background: url(图片链接) no-repeat;
/*背景图链接及重复属性*/
background-size: cover;
/*背景图尺寸*/
position: relative;
/*元素定位。absolute:绝对定位 fixed:相对于浏览器窗口进行定位 relative:相对于其正常位置进行定位 static:默认值，没有定位*/
}
扩展名及首页上页下页末页区域定义
span {
background-color: white;
/*扩展名和"首页上页下页末页"区域背景色*/
color: orange;
/*位置同上，文字颜色*/
border-style: groove;
/*位置同上，边框样式*/
border-color: red;
/*位置同上，文字边框颜色*/
border-width: 1px 1px;
/*位置同上，文字边框粗细，左为横框架，右为竖框架*/
outline: 2px black solid;
/*位置同上，轮廓宽度、颜色、样式*/
box-shadow: inset -2px 2px 10px #06c;
/*位置同上，阴影类型、水平偏移值、垂直偏移值、模糊值、颜色*/
border-radius: 2px 2px 5px 5px;
/*位置同上，圆角属性，分别为左上角，右上角，右下角，左下角*/
background: url(背景图地址) no-repeat scroll;
background-size: cover;
/*背景图属性*/
padding: 2px 3px 2px 3px;
/*位置同上，内边距，分别为上右下左*/
margin: 2px 3px 2px 3px;
/*位置同上，外边距，分别为上右下左*/
}
链接文字定义
a {
border-style: solid;
/*链接文字边框样式*/
border-width: 1px 1px;
/*链接文字的边框粗细，左为横框，右为竖框*/
border-color: blue;
/*链接文字的边框颜色*/
color: red;
/*同上位置，文字颜色*/
background-color: black;
/*链接文字的背景颜色*/
text-decoration:overline;
/*链接文字添加上划线*/
outline: 2px black solid;
/*链接文字的轮廓宽度、颜色、样式*/
box-shadow: inset -2px 2px 10px #06c;
/*链接文字阴影，阴影类型、水平偏移值、垂直偏移值、模糊值、颜色*/
border-radius: 2px 2px 5px 5px;
/*链接文字外部，圆角属性，分别为左上角，右上角，右下角，左下角*/
background: url(背景图地址) no-repeat scroll;
background-size: cover;
/*链接文字背景图属性*/
padding: 1px 1px 1px 1px;
/*链接文字内边距，分别为上右下左*/
margin: 1px 2px 1px 2px;
/*链接文字外边距，分别为上右下左*/
}
a:link {
color: #FF0000;
/*未访问链接文字颜色*/
}
a:visited {
color: #00FF00;
/*已访问链接文字颜色*/
}
a:hover {
color: #FF00FF;
/*鼠标悬停处的链接文字颜色*/
}
a:active {
color: #0000FF;
/*被选择的链接文字颜色*/
}
评论区域定义
form{
background-color: #000011;
/*评论区背景色*/
background: url(图片链接) no-repeat scroll;
/*评论区背景图*/
color: red;
/*评论区字体颜色*/
outline:1px green dashed;
/*评论区的轮廓宽度、颜色、样式*/
box-shadow: outset -2px 2px 5px green;
/*评论区的阴影类型、水平偏移值、垂直偏移值、模糊值、颜色*/
border-radius: 2px 2px 5px 5px;
/*评论区的圆角属性，分别为左上角，右上角，右下角，左下角*/
padding: 2px 3px 2px 3px;
/*评论区内边距，分别为上右下左*/
margin: 2px 3px 2px 3px;
/*评论区外边距，分别为上右下左*/
}
文件列表区域定义
.file_list{
font-size: 18px;
/*文件列表区文字尺寸大小*/
background-color: white;
/*文件列表区域背景颜色*/ color: #556688;
/*扩展名字体颜色 ★若前面已用了span部分修改将优先显示span部分*/
border: 2px solid red;
/*文件列表区域边框属性，分别为宽度，样式，颜色*/
outline: 1px black solid;
/*文件列表区的轮廓宽度、颜色、样式*/
box-shadow: inset -2px 2px 3px black;
/*文件列表区阴影，阴影类型、水平偏移值、垂直偏移值、模糊值、颜色*/
border-radius: 2px 2px 2px 2px;
/*文件列表区的圆角属性，分别为左上角，右上角，右下角，左下角*/
background: url(背景图地址) no-repeat scroll;
background-size: cover;
/*文件列表区的背景图属性*/
padding: 1px 1px 1px 1px;
/*文件列表区内边距，分别为上右下左*/
margin: 1px 2px 1px 2px;
/*文件列表区外边距，分别为上右下左*/
max-width: 98%;
/*文件列表区的最大宽度*/
}
.file_list li{
background-color: lightskyblue;
/*文件名背景色*/
border-bottom: 1px solid lime;
/*文件名下边框线(即下划线)粗细 样式 颜色*/
background: url(图片链接) no-repeat scroll;
background-size: cover;
/*文件名背景图*/
}
.file_list span{
color: white;
/*扩展名颜色*/
background-color: black;
/*扩展名背景色*/
border: 1px solid red;
/*扩展名边框*/
outline: 0px black solid;
/*扩展名轮廓宽度、颜色、样式*/
box-shadow: inset 1px 1px 3px #062;
/*扩展名阴影，阴影类型、水平偏移值、垂直偏移值、模糊值、颜色*/
border-radius: 2px 2px 1px 1px;
/*扩展名外部，圆角属性，分别为左上角，右上角，右下角，左下角*/
background: url(背景图地址) no-repeat scroll;
background-size: cover;
/*扩展名背景图属性*/
padding: 1px 1px 1px 1px;
/*扩展名内边距，分别为上右下左*/
margin: 1px 2px 1px 2px;
/*扩展名外边距，分别为上右下左*/
text-shadow: 0px 0px 3px gray;
/*扩展名文字阴影，分别为水平阴影、垂直阴影、阴影距离、阴影颜色*/
}
.file_list span:before{
content: "插入内容";
/*文件扩展名前面插入内容*/
color: red;
/*文件扩展名前面插入内容的颜色*/
background: black;
/*文件扩展名前面插入内容的背景色*/
text-shadow: 0px 0px 3px gray;
/*扩展名前面插入内容的文字阴影，分别为水平阴影、垂直阴影、阴影距离、阴影颜色*/
}
首页上页下页末页区域定义
.pagination {
margin: 2px 1px 2px 1px;
/*与外边缘的距离，分别为上右下左外边距*/
background-color: white;
/*"首页上页下页末页"区域背景色*/
color:red;
/*"首页上页下页末页"区域字体颜色*/
text-shadow: 0px 0px 3px gray;
/*"首页上页下页末页"的文字阴影，分别为水平阴影、垂直阴影、阴影距离、阴影颜色*/
}
"首页""上页""下页""末页"文字定义
.pagination span,.pagination a{
color:red;
/*"首页""上页""下页""末页"文字颜色*/
border:1px solid green;
/*"首页""上页""下页""末页"文字的边框*/
}
网页主体定义
#whole_body {
background: url(背景图链接) no-repeat scroll,url(logo地址) no-repeat scroll right bottom;
/*背景图属性，右下角logo属性*/
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
/*圆角边框。-moz-适用于Firefox浏览器，而-webkit-则是用于Safari/Chrom浏览器 */
background-size:320px;
/*背景图尺寸*/
box-shadow : inset -3px 3px 15px #111;
-webkit-box-shadow :inset -3px 3px 15px #111;
-moz-box-shadow :inset -3px 3px 15px #111;
/*阴影效果*/
max-width : 640px;
/*网页主体宽度最大值*/
text-align : center;
/*文字居中*/
margin: auto;
/*网页主体的外边距*/
padding : 10px 5px;
/*主体网页内文字与边缘距离*/
margin: 5px 2px;
/*网页边框与网页边缘距离*/
width: 640px;
/*网页主体宽度*/
}
输入框定义
textarea,input[type="input"],input[type="text"] {
background: black;
/*输入框填充颜色*/
color: white;
/*输入框内字体颜色*/
padding: 2px;
/*输入文字与输入框条距离*/
}
提交按钮定义
button,input[type="button"],input[type="submit"]{
/*submit用于提交表单，button用于JavaScript执行。若要区别开来用，把其中一个移开再新建即可*/
background: #333;
/*按钮背景色*/
color: #EEE;
/*字体颜色为白*/
border: 1px solid transparent;
/*按钮大小*/
box-shadow: 0 0;
/*按钮阴影*/
}
图片属性
img {
max-width:98%;
/*图片显示最大宽度*/
}
"分类名"区域定义
各个分类名定义
a[href="/cat/"]{
background: blue;
/*各个分类名的背景颜色*/
color: white;
/*各个分类名的字体颜色*/
border: 1px groove green;
/*各个分类名的边框宽度、样式、颜色*/
background: url(背景图链接) no-repeat scroll;background-size: cover;
/*各个分类名的背景图*/
}
"最新""管理""退出""English""中文""磨""登录""注册"区域定义
a[href^="http://wodemo.com/"]
,a[href="http://s.wodemo.com/admin"],
a[href^="http://s.wodemo.com/logout"]{
color:green;
/*"最新""管理""退出""English""中文""磨""登录""注册"颜色*/
border:2px solid red;
/*"最新""管理""退出""English""中文""磨""登录""注册"边框*/
}
//图片在右下角
#whole_body{background:url(图片地址)no-repeat 100% 100% scroll;}
其他:https://mlw.wodemo.com/entry/314277
http://m.xiaows.com/entry/187591?cid=32347
http://www.720yy.top/
CSS代码结构：由两部分组成，即
指定区域(选择器){ 通用代码(声明) }
注：指定区域(选择器)为本教程的蓝色部分，确定样式渲染的对象；通用代码(声明)为本教程的红色部分，针对特定对象进行控制和定义。
不明白的可以看示例：
body{
font-weight:bold;
background:red;
}
注：body为网页全局区域，即<body>标签内的内容，将被font-weight:bold;定义文字为粗体，被background:red;定义背景颜色为红色。
注意：复制红色通用代码时请删除类似①②③的标识符
〓字体属性〓
①font-style:italic; ②font-weight:bold; ③font-size:105%; ④font-variant:small-caps; ⑤font-family:"Times New Roman",Georgia,Serif;
说明: ①font-style /*字体风格。normal:默认值，oblique:倾斜文字，italic:斜体*/
②font-weight /*字体浓淡。normal:默认值，bold:粗体，bolder:更粗，lighter:更细，100~900: 定义由粗到细的字符，400等同于 normal，而700等同于 bold*/
③font-size /*字体尺寸。通过百分比或12px或1.2em等控制，由实际情况而定，如120%为默认字体大小的120%，和1.2em同样大小*/
④font-variant /*字体为小型大写字母。若要正常值删除该部分即可*/
⑤font-family /*字体系列。通常字体系列名称有"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。提示：建议使用多个，浏览器将使用其可识别的第一个值。使用逗号分割每个值，并始终提供一个通常字体系列作为最后的选择*/
①color:white;
说明: ①color /*字体颜色。可用颜色代码如#000或#668547或red等*/
〓背景属性〓
①background-image:url(背景图地址); ②background-repeat:no-repeat; ③background-attachment:scroll; ④background-position:right bottom; ⑤background-color:#002255; ⑥background-size:cover;
说明: ①background-image /*添加背景图*/
②background-repeat /*背景图片重复属性。默认为图片既横向重复，又竖向重复，repeat-x:背景图片横向重复，repeat-y:背景图片竖向重复，no-repeat:背景图片不重复*/
③background-attachment /*背景图随网页下拉而滚动*/
④background-position /*背景图水平位置和垂直位置。水平位置：left:居左，居中:center，也可以用1%-1008%表示与左端距离大小。垂直位置：top:居顶部，center:居中，也可用1%-100%表示与顶端距离大小 */
⑤background-color /*背景颜色*/
⑥background-size /*背景图尺寸。cover:保持原图宽高比例，缩放到正好完全覆盖定义区域 contain:保持原图宽高比例，缩放到宽度或高度正好适应指定区域，或用像素如320px 480px或百分比如80% 90%表示*/
〓边框属性〓
border:①5px ②solid ③red;
说明: ①5px /*边框宽度*/
②solid /*边框样式*/
③red /*边框颜色*/
添加文字下划线(即下边框)
border-bottom:2px solid red;
说明: 同上(border部分)
边框宽度(可单独设置各框宽度)
border-width:2px 3px 0px 5px;
说明: /*分别为上右下左框*/
边框颜色(可单独设置各框颜色)
border-color:red white green #660022;
说明: /*分别为上右下左框*/
〓内边距属性〓
padding:10px 5px 15px 20px;
说明: /*分别为上右下左内边距*/
〓外边距属性〓
margin:10px 5px 15px 20px;
说明: /*分别为上右下左外边距*/
〓文本属性〓
文本对齐
text-align: ①center;
说明: ①center /*文字居中。left:把文本排列到左边，默认值：由浏览器决定，right 把文本排列到右边，justify 实现两端对齐文本效果。*/
规定当文本溢出包含元素时发生的事情
text-overflow: ①ellipsis;
说明:①ellipsis /*clip:修剪文本，ellipsis:显示省略符号来代表被修剪的文本，string:使用给定的字符串来代表被修剪的文本*/
文本文字阴影
text-shadow: ①5px ②5px ③6px ④#FF0000;
说明:①5px /*水平阴影的位置，允许负值*/
②5px /*垂直阴影的位置，允许负值*/
③6px /*模糊的距离*/
④#FF0000 /*阴影的颜色*/
允许长单词换行到下一行
word-wrap: ①break-word;
说明:①break-word /*允许长单词换行到下一行*/
〓垂直对齐属性〓
vertical-align:①text-top;
说明: ①text-top /*把元素的顶端与父元素字体的顶端对齐。baseline:默认，元素放置在父元素的基线上，sub:垂直对齐文本的下标，super:垂直对齐文本的上标，top:把元素的顶端与行中最高元素的顶端对齐，middle:把此元素放置在父元素的中部，bottom:把元素的顶端与行中最低的元素的顶端对齐，text-bottom:把元素的底端与父元素字体的底端对齐，%:使用 "line-height" 属性的百分比值来排列此元素，允许使用负值。*/
〓圆角属性〓
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 /*阴影类型。outset:默认，投影效果，inset:内阴影效果。*/
②-2px /*阴影水平偏移值(即控制左右阴影。正数值控制右侧，负数值控制左侧)*/
③2px/*垂直偏移值(即控制上下阴影。正数值控制下边，负数值控制上边)*/
④10px /*模糊值*/
⑤#06C /*阴影颜色*/;
建议也加上下面两段，即复制上面那段在前面分别加上-moz-和-webkit-(如-moz-box-shadow:inset -2px 2px 10px #06C; -webkit-box-shadow:inset -2px 2px 10px #06C;)
〓轮廓属性〓
outline:①2px ②black ③solid;
说明: ①2px /*轮廓宽度*/
②black /*轮廓颜色*/
③solid /*轮廓样式。边框线的类型有九个确定值: none:无边框线，dotted:由点组成虚线，dashed:由短线组成的虚线，solid:实线，double:双线，groove:3D沟槽状的边框，ridge:3D脊状的边框，inset:3D内嵌边框,颜色较深，outset:3D外嵌边框,颜色较浅。*/
〓尺寸属性〓
height:102%; /*元素的高度*/
line-height:2px; /*行高*/
max-height:240px; /*元素的最大高度*/
max-width:320px; /*元素的最大宽度*/
min-height:100px; /*元素的最小高度*/
min-width:100px; /*元素的最小宽度*/
width:240px; /*元素的宽度*/
生成框属性
display: ①none;
说明:①none /*此元素不会被显示*/
②block /*此元素将显示为块级元素，前后会带有换行符*/
③inline /*默认。此元素会被显示为内联元素，元素前后没有换行符*/
④inline-block /*行内块元素*/
⑤list-item /*此元素会作为列表显示。*/
⑥run-in /*此元素会根据上下文作为块级元素或内联元素显示*/
⑦table /*此元素会作为块级表格来显示(类似<table>)，表格前后带有换行符*/
⑧inline-table /*此元素会作为内联表格来显示(类似<table>)，表格前后没有换行符*/
⑨table-row-group /*此元素会作为一个或多个行的分组来显示(类似<tbody>)*/
⑩table-header-group /*此元素会作为一个或多个行的分组来显示(类似<thead>)*/
①①table-footer-group /*此元素会作为一个或多个行的分组来显示(类似<tfoot>)*/
①②table-row /*此元素会作为一个表格行显示(类似<tr>)*/
①③table-column-group /*此元素会作为一个或多个列的分组来显示(类似<colgroup>)*/
①④table-column /*此元素会作为一个单元格列显示(类似<col>)*/
①⑤table-cell /*此元素会作为一个表格单元格显示(类似<td>和<th>)*/
①⑥table-caption /*此元素会作为一个表格标题显示(类似<caption>)*/
⊙伪元素
在某区域前面添加内容
①#whole_body:before{content:②"要显示的文字";}
说明: ①#whole_body /*填要定义的区域*/
②填显示文字
在某区域后面添加内容
.file_list li:after{content:"显示文字";}
说明:同上
用于给文本的首行设置特殊样式
.file_list:first-line{填通用代码}
伪类在元素获得焦点时向元素添加特殊的样式
a:focus{通用代码}
★属性选择器★
说明:利用这个选择器可以对带有指定属性的 HTML 元素设置样式。
如想定义某个文字链接的颜色大小的等属性可以用a[href="链接"]{通用代码}，定义"分类名"属性可用a[href^="/cat/"]{通用代码}或input[type="text"]等等。
[属性] {通用代码}
/*用于选取带有指定属性的元素。*/
[属性=值] {通用代码}
/*用于选取带有指定属性和值的元素。*/
[属性~=值] {通用代码}
/*用于选取属性值中包含指定词汇的元素。*/
[属性|=值] { 通用代码}
/*用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。*/
[属性^=值] {通用代码}
/*匹配属性值以指定值开头的每个元素。*/
[属性$=值] {通用代码}
/*匹配属性值以指定值结尾的每个元素。*/
[属性*=值] {通用代码}
/*匹配属性值中包含指定值的每个元素。*/
完整代码
复制时，注意带上该段开头部分与结尾部分(如 body{ 和 })，如发现不能使用可删除/*文字注释*/看看，建议结合上面的通用代码使用
网页主页定义
body {
background-color: green;
/*网页背景色*/
color: red;
/*默认字颜色*/
padding: 2px 3px 2px 4px
/*网页主体与边缘的距离，分别为上右下左方*/
text-align: center;
/*内容居中显示*/
font-size: 120%;
/*字体尺寸大小*/
font-weight: bold;
/*字体浓淡*/
font-style: Italic;
/*文字风格*/
font-variant: small-caps;
/*字体为小型大写字母*/
font-family: "Times New Roman",Georgia,Serif;
/*字体系列*/
line-height: 18px;
/*文字行距大小*/
background: url(图片链接) no-repeat;
/*背景图链接及重复属性*/
background-size: cover;
/*背景图尺寸*/
position: relative;
/*元素定位。absolute:绝对定位 fixed:相对于浏览器窗口进行定位 relative:相对于其正常位置进行定位 static:默认值，没有定位*/
}
扩展名及首页上页下页末页区域定义
span {
background-color: white;
/*扩展名和"首页上页下页末页"区域背景色*/
color: orange;
/*位置同上，文字颜色*/
border-style: groove;
/*位置同上，边框样式*/
border-color: red;
/*位置同上，文字边框颜色*/
border-width: 1px 1px;
/*位置同上，文字边框粗细，左为横框架，右为竖框架*/
outline: 2px black solid;
/*位置同上，轮廓宽度、颜色、样式*/
box-shadow: inset -2px 2px 10px #06c;
/*位置同上，阴影类型、水平偏移值、垂直偏移值、模糊值、颜色*/
border-radius: 2px 2px 5px 5px;
/*位置同上，圆角属性，分别为左上角，右上角，右下角，左下角*/
background: url(背景图地址) no-repeat scroll;
background-size: cover;
/*背景图属性*/
padding: 2px 3px 2px 3px;
/*位置同上，内边距，分别为上右下左*/
margin: 2px 3px 2px 3px;
/*位置同上，外边距，分别为上右下左*/
}
链接文字定义
a {
border-style: solid;
/*链接文字边框样式*/
border-width: 1px 1px;
/*链接文字的边框粗细，左为横框，右为竖框*/
border-color: blue;
/*链接文字的边框颜色*/
color: red;
/*同上位置，文字颜色*/
background-color: black;
/*链接文字的背景颜色*/
text-decoration:overline;
/*链接文字添加上划线*/
outline: 2px black solid;
/*链接文字的轮廓宽度、颜色、样式*/
box-shadow: inset -2px 2px 10px #06c;
/*链接文字阴影，阴影类型、水平偏移值、垂直偏移值、模糊值、颜色*/
border-radius: 2px 2px 5px 5px;
/*链接文字外部，圆角属性，分别为左上角，右上角，右下角，左下角*/
background: url(背景图地址) no-repeat scroll;
background-size: cover;
/*链接文字背景图属性*/
padding: 1px 1px 1px 1px;
/*链接文字内边距，分别为上右下左*/
margin: 1px 2px 1px 2px;
/*链接文字外边距，分别为上右下左*/
}
a:link {
color: #FF0000;
/*未访问链接文字颜色*/
}
a:visited {
color: #00FF00;
/*已访问链接文字颜色*/
}
a:hover {
color: #FF00FF;
/*鼠标悬停处的链接文字颜色*/
}
a:active {
color: #0000FF;
/*被选择的链接文字颜色*/
}
评论区域定义
form{
background-color: #000011;
/*评论区背景色*/
background: url(图片链接) no-repeat scroll;
/*评论区背景图*/
color: red;
/*评论区字体颜色*/
outline:1px green dashed;
/*评论区的轮廓宽度、颜色、样式*/
box-shadow: outset -2px 2px 5px green;
/*评论区的阴影类型、水平偏移值、垂直偏移值、模糊值、颜色*/
border-radius: 2px 2px 5px 5px;
/*评论区的圆角属性，分别为左上角，右上角，右下角，左下角*/
padding: 2px 3px 2px 3px;
/*评论区内边距，分别为上右下左*/
margin: 2px 3px 2px 3px;
/*评论区外边距，分别为上右下左*/
}
文件列表区域定义
.file_list{
font-size: 18px;
/*文件列表区文字尺寸大小*/
background-color: white;
/*文件列表区域背景颜色*/ color: #556688;
/*扩展名字体颜色 ★若前面已用了span部分修改将优先显示span部分*/
border: 2px solid red;
/*文件列表区域边框属性，分别为宽度，样式，颜色*/
outline: 1px black solid;
/*文件列表区的轮廓宽度、颜色、样式*/
box-shadow: inset -2px 2px 3px black;
/*文件列表区阴影，阴影类型、水平偏移值、垂直偏移值、模糊值、颜色*/
border-radius: 2px 2px 2px 2px;
/*文件列表区的圆角属性，分别为左上角，右上角，右下角，左下角*/
background: url(背景图地址) no-repeat scroll;
background-size: cover;
/*文件列表区的背景图属性*/
padding: 1px 1px 1px 1px;
/*文件列表区内边距，分别为上右下左*/
margin: 1px 2px 1px 2px;
/*文件列表区外边距，分别为上右下左*/
max-width: 98%;
/*文件列表区的最大宽度*/
}
.file_list li{
background-color: lightskyblue;
/*文件名背景色*/
border-bottom: 1px solid lime;
/*文件名下边框线(即下划线)粗细 样式 颜色*/
background: url(图片链接) no-repeat scroll;
background-size: cover;
/*文件名背景图*/
}
.file_list span{
color: white;
/*扩展名颜色*/
background-color: black;
/*扩展名背景色*/
border: 1px solid red;
/*扩展名边框*/
outline: 0px black solid;
/*扩展名轮廓宽度、颜色、样式*/
box-shadow: inset 1px 1px 3px #062;
/*扩展名阴影，阴影类型、水平偏移值、垂直偏移值、模糊值、颜色*/
border-radius: 2px 2px 1px 1px;
/*扩展名外部，圆角属性，分别为左上角，右上角，右下角，左下角*/
background: url(背景图地址) no-repeat scroll;
background-size: cover;
/*扩展名背景图属性*/
padding: 1px 1px 1px 1px;
/*扩展名内边距，分别为上右下左*/
margin: 1px 2px 1px 2px;
/*扩展名外边距，分别为上右下左*/
text-shadow: 0px 0px 3px gray;
/*扩展名文字阴影，分别为水平阴影、垂直阴影、阴影距离、阴影颜色*/
}
.file_list span:before{
content: "插入内容";
/*文件扩展名前面插入内容*/
color: red;
/*文件扩展名前面插入内容的颜色*/
background: black;
/*文件扩展名前面插入内容的背景色*/
text-shadow: 0px 0px 3px gray;
/*扩展名前面插入内容的文字阴影，分别为水平阴影、垂直阴影、阴影距离、阴影颜色*/
}
首页上页下页末页区域定义
.pagination {
margin: 2px 1px 2px 1px;
/*与外边缘的距离，分别为上右下左外边距*/
background-color: white;
/*"首页上页下页末页"区域背景色*/
color:red;
/*"首页上页下页末页"区域字体颜色*/
text-shadow: 0px 0px 3px gray;
/*"首页上页下页末页"的文字阴影，分别为水平阴影、垂直阴影、阴影距离、阴影颜色*/
}
"首页""上页""下页""末页"文字定义
.pagination span,.pagination a{
color:red;
/*"首页""上页""下页""末页"文字颜色*/
border:1px solid green;
/*"首页""上页""下页""末页"文字的边框*/
}
网页主体定义
#whole_body {
background: url(背景图链接) no-repeat scroll,url(logo地址) no-repeat scroll right bottom;
/*背景图属性，右下角logo属性*/
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
/*圆角边框。-moz-适用于Firefox浏览器，而-webkit-则是用于Safari/Chrom浏览器 */
background-size:320px;
/*背景图尺寸*/
box-shadow : inset -3px 3px 15px #111;
-webkit-box-shadow :inset -3px 3px 15px #111;
-moz-box-shadow :inset -3px 3px 15px #111;
/*阴影效果*/
max-width : 640px;
/*网页主体宽度最大值*/
text-align : center;
/*文字居中*/
margin: auto;
/*网页主体的外边距*/
padding : 10px 5px;
/*主体网页内文字与边缘距离*/
margin: 5px 2px;
/*网页边框与网页边缘距离*/
width: 640px;
/*网页主体宽度*/
}
输入框定义
textarea,input[type="input"],input[type="text"] {
background: black;
/*输入框填充颜色*/
color: white;
/*输入框内字体颜色*/
padding: 2px;
/*输入文字与输入框条距离*/
}
提交按钮定义
button,input[type="button"],input[type="submit"]{
/*submit用于提交表单，button用于JavaScript执行。若要区别开来用，把其中一个移开再新建即可*/
background: #333;
/*按钮背景色*/
color: #EEE;
/*字体颜色为白*/
border: 1px solid transparent;
/*按钮大小*/
box-shadow: 0 0;
/*按钮阴影*/
}
图片属性
img {
max-width:98%;
/*图片显示最大宽度*/
}
"分类名"区域定义
各个分类名定义
a[href="/cat/"]{
background: blue;
/*各个分类名的背景颜色*/
color: white;
/*各个分类名的字体颜色*/
border: 1px groove green;
/*各个分类名的边框宽度、样式、颜色*/
background: url(背景图链接) no-repeat scroll;background-size: cover;
/*各个分类名的背景图*/
}
"最新""管理""退出""English""中文""磨""登录""注册"区域定义
a[href^="http://wodemo.com/"]
,a[href="http://s.wodemo.com/admin"],
a[href^="http://s.wodemo.com/logout"]{
color:green;
/*"最新""管理""退出""English""中文""磨""登录""注册"颜色*/
border:2px solid red;
/*"最新""管理""退出""English""中文""磨""登录""注册"边框*/
}
//图片在右下角
#whole_body{background:url(图片地址)no-repeat 100% 100% scroll;}
其他:https://mlw.wodemo.com/entry/314277
http://m.xiaows.com/entry/187591?cid=32347
http://www.720yy.top/
Subscribe | Register | Login | N