【注意】:复制代码时注意带上该段的开头与结尾部分(如"body{" 和 "}"),删除【】部分、分割线以及换行,颜色代码(如red,#000000,#111)自行更换,说明仅供参考,因浏览器显示差异或属性覆盖等问题可能看不到效果,具体使用请自行摸索,欢迎各位提供纠正完善,谢谢。
〓网页主页定义〓
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;
}
〓文件列表区域定义〓
.file_list{
【文件列表区域背景颜色为白】
background-color:white;
【扩展名字体颜色 ★若前面已用了span部分修改将优先显示span部分】
color:#556688;
【文件列表区域的文字尺寸为小字体】
font-size:9px;
}
〓文件列表文件名区域〓
.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 2px #222;
【按钮半径,即按钮四角曲度】
border-radius : 3px;
}
Back to home |
File page
Subscribe |
Register |
Login
| N