【原创】css代码详解,新手速成
精彩模板无需下载
让你以后也可以自己改模块。具体可以参照下面自己另行设置各种风格。
只要你根据自己喜欢的风格修改下面的代码和图片地址,就可以得到你想要风格的模块了。
注解:
1、background: url() repeat-x; 括号里放图片。在首页显示图片的代码
2、height: 高度
3、center: 居中
4、width: 宽度
5、color: #333333; 字体的颜色
6、right: 右边
7、left: 左边
8、px: 前面的数字是设置字体的大小或者边距
9、div#隐藏的数值{ display:none;}这个是隐藏代码
例子:如果要隐藏LOGO就是div#logo{ display:none;}
/* CSS Document */
/*定义页面总体样式*/
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;(表示英文字体和中文字体)
font-size: 12px;(表示网站字体的大小为12px)
background: url(http://xu1314.lingd.net/attachment.php?id=225114) #fff3df;
}(http://xu1314.lingd.net/attachment.php?id=225114:这个是背景图片地址;#fff3df:这个是背景颜色代码。如果不要要图片可以设置颜色代码把http://xu1314.lingd.net/attachment.php?id=225114这个去掉就可以了)
/*定义页面总体宽度*/
#top, #header, #nav, #main, #footer { (#top:顶部;#header:页眉;#nav:分栏;#footer:页脚)
width: 788px; (788:这个是网站总宽度的意思)
margin: 0 auto;
cursor:url(http://www.haofa.net/sc/shubiao/2008/20081.cur); /*http://www.haofa.net/sc/shubiao/2008/20081.cur:这个是鼠标特效图片地址,注:一定要是cur图片格式*/
}
/*左上角时间定义样式*/
#date {
line-height: 15px;
height: 15px;(显示时间的高度为15。注:如果不想显示全部设置为0)
float: left;(left:时间显示在左边。注:如果要显示在右边就把right)
margin: 6px 1px 0 1px;(一个外框上边距为6像素,右边距为1像素 底边距为0 左边距为1像素)
padding: 0;(0:设置内边框距)
}/*logo定义样式*/
#logo {
float: left;(left:LOGO显示在左边。注:如果要显示在右边就把right)
height: 60px;(LOGO的高为60px)
width: 170px;(LOGO的宽度为170px)
margin: 1px;(边框上边边距为1px)
line-height: 60px;(下面全部表示线框的高度)
text-align: center;(文字在框中的位置是居中)
}/*banner定义样式*/
#banner {
height: 60px;(banner的高为60px)
margin: 1px;(边框上边边距为1px)
width: 468px;(banner的宽度为468px)
float: right;(right:banner显示在右边。注:如果要显示在左边就把left)
line-height: 10px;
text-align: center;(文字在框中的位置是居中)
}/*上部定义样式*/
#header {
height: 70px;(从LOGO到时间的高度为70px)
background: url() repeat-x;(看上面的注解1)
overflow: hidden;
margin: 0 auto 8px auto;
}/*右上角链接定义样式*/
#fav {
line-height: 15px;
float: right;(right:LOGO显示在右边。注:如果要显示在左边就把left)
height: 15px;(看上面注解4)
margin: 6px;
padding: 0;
background: url()repeat-x;(看上面注解1)
}*顶部定义样式*/
#top {
line-height: 32px;
height: 32px;(LOGO上面到顶部的高度为32px)
background: url() repeat-x;(看上面注解1)
margin: 0 auto 8px auto;
}/*导航链接定义样式*/
#nav ul {
margin: 0px;
padding: 0px;
height: 10px; (导航栏高度为10px)
list-style: none;
background: url(http://xu1314.lingd.net/attachment.php?id=225115) repeat-x;(http://xu1314.lingd.net/attachment.php?id=225115:导航栏图片;如果不想用图片,可以把repeat-x改成你要的颜色代码,前面的图片地址去掉就可以了。)
}
#nav li {
line-height: 32px;
float: left;
}
#nav a {
padding: 10px 10px;
}
/*文字链接定义*/
#nav a:hover {
color: #FF1493;(这里是鼠标滑过显示的颜色)
background: url() repeat-x center 1px;(中间括号表示鼠标滑过显示的图片可以改,不想显示图片就不要填写)
}
a:link {
color: #333333;
text-decoration: none;
}
a:visited {
color: #333333;(点击过后显示的颜色)
text-decoration: none;
}
}/*边框定义样式*/
#sider #notice p {
background-color: #FBFEFF;(这样的代码都表示背景色)
background: url(http://xu1314.lingd.net/attachment.php?id=232584) repeat;(框里面图片)
margin: 0 0 4px 0;
padding: 5px 10px;
border: 1px solid #009900;(这样的代码都表示边框的颜色)
}
#sider {
width: 190px;(边框的宽度)
float: right;(边框的在右边)
}
/*小边框图片*/
#sider h2 {
background: url(http://a327491761.lingd.net/attachment.php?id=225117) no-repeat left top;(边框标题栏的图片)
font-size: 12px;(表示标题栏字体的大小为12px)
margin: 0px;
padding-left: 20px;;(文字靠左页边空白距离)
color: #101408;(表示标题栏字体的颜色)
line-height: 23px;(线框的高度)
height: 23px;(表示标题栏高度)
}
#sider ul {
background-color: #FBFEFF;(边框那排的背景色)
background: url(http://xu1314.lingd.net/attachment.php?id=232584) repeat;(边框那排背景图片)
border-style:dotted;
width: 178px;(边框那排字体的宽度)
margin: 0 0 5px 0;
padding: 5px;
list-style-type: none;
border: 1px solid #009900;(边框那排边框的颜色)
}
/*小边框旁边图片*/
#sider li {
line-height: 20px;
padding: 0 5px 0 18px;
border-width: 0 0 0px 0;
background: url(http://xu1314.lingd.net/attachment.php?id=240425) no-repeat 2px center;(http://xu1314.lingd.net/attachment.php?id=24042:边框那排字前面的小图片)
height: 20px;
}
/*内容定义样式*/
/*最新文章那排总宽度*/
#contents {
width: 590px;(最新文章那排的宽度)
float: left;(最新文章那排在左边)
background: url(http://xu1314.lingd.net/attachment.php?id=232584) repeat;(最新文章那排背景图片)
}
/*最新文章底图*/
#contents .news {
background: url(http://xu1314.lingd.net/attachment.php?id=182498); repeat;(幻灯片旁边最新文章底部图片)
float: right;(最新文章的位置在在幻灯片右边)
width: 330px;(最新文章的宽度)
}
.space {
height: 1px;
clear: both;
overflow: hidden;
}
#contents .lists {
width: 190px;(显示几栏)具体的教程请看:http://www.xu1314.lingd.net/article-381361-1.html
float: left;
margin: 0 0 0 3px;
}
/*最新文章下面图片*/
.ads {
background: url(http://xu1314.lingd.net/attachment.php?id=202496) no-repeat center;
height: 60px;clear: both;(http://xu1314.lingd.net/attachment.php?id=202496:最新文章下面图片地址)
}
#contents h2 {
font-size: 12px;(字体的大小为12px0
background: url(http://xu1314.lingd.net/attachment.php?id=225119) no-repeat;(标题栏图片)
line-height: 23px;
margin: 0px;
height: 23px;(标题栏高度)
padding-left: 30px;(文字离左边的距离)
color: #101408;(标题栏字体颜色)
}
.news {
float: right;
width: 310px;
height: 195px;
padding: 8px 0 0 8px;;(图片的信息大小和滚动速度信息)
margin: 0;
}
.news ul {
margin: 0px;
padding: 0px;
list-style-type: none;
height: 174px;
}
.news li {
line-height: 21px;
margin: 0px;
padding: 0px;
width: 100%;
float: left;
background: url(http://xu1314.lingd.net/attachment.php?id=240743) no-repeat left center;(最新文章字前面的小图片)
}
.news strong {
font-weight: normal;
font-family: Verdana;
float: right;
background: url(http://xu1314.lingd.net/attachment.php?id=232584) repeat;(首页版块背景图片)
margin: 0 18px 0 0;
color: #666666;(背景颜色)
line-height: 21px;
}
.news h6 {(h6:是最新文章字体格式)
float: left;
font-size: 12px;(最新文章字体)
font-weight: normal;
margin: 0;
padding: 0 0 0 15px;
clear: none;
line-height: 21px;
}
/* 右侧JS图片循环CSS信息 */
#contents .images {
float: left;
width: 241px;(幻灯片宽度)
height: 170px;(幻灯片高度)
padding: 5px 0 5px 5px;
}
.images img {
border: 1px solid #009900;(幻灯片边框颜色)
border-color: #009900;
}
/*分类版块*/
#contents .lists label {
float: left;(版块标题栏字显示的方向)
}
/*more更多*/
#contents .lists strong {
cursor: pointer;
float: right;(more显示的方向)
margin-right: 15px;
color: #0179F1;
}
#contents .lists ul {
background-color: #FBFEFF;
background: url(http://xu1314.lingd.net/attachment.php?id=232584) repeat;(文章标题栏背景图片)
height: 115px;
margin: 0 0 5px 0;
padding: 5px;
list-style-type: none;
border: 1px solid #009900;
border-color: #009900;
}
#contents .lists li {
background: url() no-repeat 3px center;(版块字前面的小图片)
height: 20px;(高度)
line-height: 20px;
padding: 0 5px 0 18px;
border: 1px dashed #009900;(边框颜色)
border-width: 0 0 1px 0;
}
#slideimg {
border: 1px solid #009900;(边框颜色)
border-color: #009900;
}/*所有页面底部*/
div#footer{ display:none;}(如果要隐藏底部就加上这个代码,如果不想隐藏就不要加)
/*底部样式定义*/
#footer {
background: url(../../templates/green/images/server_foot2.gif) #F5FCFF repeat-x left top; (版权背景图片)
border: 1px solid #D9F3FF;
border-color: #D9F3FF #88D8FF #88D8FF #D9F3FF;
height: 60px; (高度)
width: 760px;(宽度)
padding: 5px 0 0 0;
margin-top:-10; (顶部距首页文章主体内容页边距离)
margin-bottom:-80px(距底部文件信息距离)
}
#footer p {
line-height: 0px; (指版权信息高度)
margin: 0px;
padding: 0px;
text-align: center; (字的位置居中)
height: 0px; (高度)
}
.path a:link {
color: #101408;
}
.path a:visited {
color: #101408;
}
.path a:hover {
color: #101408;
}
#title {
background-color: #FBFEFF;
text-align: center;
background: url(http://xu1314.lingd.net/attachment.php?id=232584) repeat;
border-bottom: 1px dashed #009900;
border-left: 1px solid #009900;
border-right: 1px solid #009900;
padding: 10px 0 5px 0;
}/*文章页底部*/
.newsinfo {
background: url(http://xu1314.lingd.net/attachment.php?id=232584) repeat;(文章页背景图片)
background-color: #FFFFFF;
border-left: 1px solid #996600;
border-right: 1px solid #996600;
border-bottom: 1px solid #996600;
padding: 10px;
line-height: 18px;
}................................