这个详细解释，跟现在的默认css有一点出入，但是大体上都是一样的，大家仔细看一下，尤其是新手们，试着自己动手做一下模板，否则你永远也学不会的！

下面就是详细解释：  需要说明一点，这个详解没有把首页的最新图片css代码加到里面，大家可以把默认css里面的最后那一大段的css添加进来，再稍微修改一下数值即可！没有什么难度的！

/* CSS Document */
/*定义页面总体样式*/
body {(主体)
background-color: #000000;/***主页背景背景颜色***/
background: url(...这里是背景图片地址..) repeat scroll!important;
margin: 0; /*自动排列居中*/
font-family: Arial, Helvetica, sans-serif; / *定义字体样式*/
font-size: 12px; /*字体大小*/
}
/*定义页面总体宽度*/
#top, #header, #nav, #main, #footer { /*分别为：顶部，页楣，分栏，主体，页脚*/
width: 788px; /*整体页面的宽度，全屏为980也就是说一般大小只能定义在788~~980*/
margin: 0 auto; /*页面居中*/
}

/*左上角时间定义样式*/
#date {
line-height: 20px; height: 20px; /*时间定义样式要隐藏请将数值改为0*/
loat: left; /*左，表示时间显示在左边，要显示在右边请将left该为right*/

padding: 0;
}
/*logo定义样式*/
#logo {网站顶部做边的图片大的LOGO
border: 1px solid #00A8FF;(logo边框标题条边线样式及颜色)
float: left; (图片在靠左的位置一般不要改)
hight: 70px; (图片高度)
h: 200px; (图片 宽度)
ine-height: 70px;(定义线框的高度一般和上面一样)
text-align: center;(指内图片在框内居中的意思)
}
/*banner定义样式*/(这个就是表示网页右边的图片定义)
#banner {
border: 1px solid #00A8FF;
height: 70px;(图片高度)
width: 560px;(图片宽度)
float: right;右边(指图片放置位置)当然上面左边这个就要右边
line-height: 70px;定义线框的高度一般和上面一样)
text-align: center;(指内图片在框内居中的意思)
}
/*上部定义样式*/
#header {
height: 80px;(上部连LUGO的高度一般不要改)
overflow: hidden;
}
/*右上角链接定义样式*/（指的是文字）
#fav {
line-height: 20px;线的高度
float: right;右边(指链接文字放置的位置)文字链接在基本设置里设置
height: 20px;
margin: 0;(页边距)
padding: 0 10px 0 0;(填充大小)
}
/*顶部定义样式*/
#top {
line-height: 20px;指顶部线框的高度(建议不要改)
height: 20px;高度(建议不要改)
}
/*导航链接定义样式*/(这里就是对导航条的定义)
#nav ul {
margin: 0px;指页边距
padding: 0px;填充的意思(不要管他)
height: 57px;指导航图片的高度
list-style: none;
background: url(../../templates/green/images/ind-cityviewbg.gif) repeat-x;(中间括号里面表示导航图片的地址)可以修改成你喜欢的图片地址建议图片高度为50到60以内
}
#nav li {
font-size: 14px;导航栏字体大小设置，这一条是我自己加上去的
line-height: 40px;
float: left;
}
#nav a {
padding: 15px 18px;
}
#nav a:hover {
color: #FF1493;鼠标滑过导航栏文字所变的颜色
background: url(../../templates/green/images/ind-selviewbg.gif) repeat-x center 1px;(中间括号表示鼠标滑过显示的图片可以改)不想显示图片就删掉括号内的
}
a:link {链接样式
color: #333333;
text-decoration: none;
}
a:visited {(对己经看过的页面用一种颜色定义)
color: #333333;颜色值突出显示
text-decoration: none;(指文本装饰:这里不装饰)
}
a:hover {
color: #000000;/*鼠标指向变色*/没有的可以加上这一句颜色值可以改
text-decoration: none;
background: url() repeat;括号中间也可以填上图片地址(这是我加上去的)
}
/*边框定义样式*/
#sider #notice p {(边栏广告框定义)
background-color: #FBFEFF;(背景颜色值)
margin: 0 0 12px 0;页边距调整(12指上0代表下边距)
padding: 5px 10px;设置广告框大小前面5PX表示高度
border: 1px solid #00A8FF;指边界线宽及颜色值(不想要就改为0)
}
#sider {
width: 190px;(广告框的宽度)
float: left;(靠左)表示广告框的位置如放右边改成right
}
#sider h2 {
background: url(../../templates/green/images/link3.gif) no-repeat left top;(括号内是定义边框标题栏的图片地址)
font-size: 12px;(标题栏上文字大小)
margin: 0px;(指标题图片的页边距)
padding-left: 40px;(文字靠左页边空白距离)
color: #FFFFFF;(文字颜色值)
line-height: 23px;(线框的高度)
height: 23px;(标题栏的高度建议和上面线框高度保持一致)
}
#sider ul {
background-color: #FBFEFF;(指边栏框的背景颜色)
width: 178px;(边栏的宽度)
margin: 0 0 12px 0;(距离页边的空白距离)
padding: 5px;
list-style-type: none;
border: 1px solid #00A8FF;边界线宽及颜色solid表示实线
}
#sider li {(定义热门文章标题之间的距离和线宽)
line-height: 20px;线的高度
padding: 0 5px 0 15px;
border: 1px dashed #97D2FF;边界线宽及颜色dashed表示用虚线
border-width: 0 0 1px 0;边界的宽度
background: url(../../templates/green/images/jt-2.gif) no-repeat 2px center;(背景:括号内是边栏文章栏和友情链接以及公告栏文章前面的小图标地址)
height: 20px;高度
}
/*内容定义样式*/(就是主页最新文章内容)
#contents {
width: 590px;(主体内容的宽度)
float: right;(靠右)因为上面边框定义靠左所以这里要靠右
background-color: #FFFFFF;/*文章栏主体背景色*/(可以改)默认是没有这一条是我加上去的你可根据你的需要修改
}
#contents .news {(对最新文章定义)
background: url() no-repeat center;括号内为最新文章模块的背景图片地址添加，这行自己加上的
float: right;(靠右)
width: 320px;(最新文章的宽度)
border:1px dashed #750090;加入这行表示在最新文章的整体文章外加上虚线框，自己添加的
}
.space {
height: 1px;
clear: both;
overflow: hidden;
}
.ads {
clear: both;
}
#contents .lists {(内容列表)
width: 290px;(宽度这是指中间内容小模块的宽度(跟据你的需要调整)如调成190将分为三栏显示当然这是算出来的,具体的后面介绍)
float: left;靠左对齐
margin: 0 0 0 3px;页边空白
}
#contents h2 {
font-size: 12px;最新文章和小模块的标题栏字体的大小
background: url(../../templates/green/images/new.gif) no-repeat;(括号内为最新文章的栏目条图片地址)
line-height: 23px;指线框的高度
margin: 0px;页边距离
height: 23px;栏目条的高度
padding-left: 30px;标题栏中的文字离标题栏左边的距离`
color: #0179F1;标题栏文字颜色
}
.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(../../templates/green/images/jt-2.gif) no-repeat left center;(括号内是最新文章栏目小图标)
}
.news strong {
font-weight: normal;
font-family: Verdana;
float: right;
margin: 0 18px 0 0;
color: #666666;
line-height: 21px;
}
.news h6 {
float: left;
font-size: 12px;
font-weight: normal;
margin: 0;
padding: 0 0 0 12px;
clear: none;
line-height: 21px;
}
/* 右侧JS图片循环CSS信息 */(也就是最新文章左侧的那个幻灯片)这一行是我加上去的目的在于了解含义
#contents .images {
float: left;(靠左)
width: 241px;(宽度)
height: 170px;(高度)
padding: 10px 0 10px 10px;中间填充
}
.images img {
border: 1px solid #D9F3FF;(图像的边框线宽及颜色值)
border-color: #D9F3FF #88D8FF #88D8FF #D9F3FF;
}
#contents .lists label {
float: left;
}
#contents .lists strong {
cursor: pointer;
float: right;
margin-right: 15px;
color: #0179F1;
}
#contents .lists ul {
background-color: #FBFEFF;(这是小模块的背景颜色设置)
height: 115px;
margin: 0 0 5px 0;
padding: 5px;
list-style-type: none;
border: 1px solid #D3F1FF;
border-color: #D3F1FF #8BDAFF #8BDAFF #D3F1FF;(这是小模块的边框线的颜色)
}
#contents .lists li {(首页内容列表定义)
background: url(../../templates/green/images/dot1.gif) no-repeat 3px center;(括号内是首页文章小栏目的小图标地址)
height: 20px;高度
line-height: 20px;线框的高度
padding: 0 5px 0 15px;
border: 1px dashed #D7F2FF;(这表示小模块内的文章标题之间的边界用虚线及颜色的设置)
border-width: 0 0 1px 0;
}
#slideimg {
border: 1px solid #D9F3FF;
border-color: #D9F3FF #88D8FF #88D8FF #D9F3FF;
}
/*底部样式定义*/
#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;底部图片高度
padding: 12px 0 0 0;
margin-top: 10px;(顶部距首页文章主体内容页边距离
margin-bottom:10px; (距底部文件信息距离
}
#footer p {
line-height: 20px;指版权信息
margin: 0px;
padding: 0px;
text-align: center;指文本排列的位置这里是居中
height: 20px;距离页脚高度
}
.path {(打开文章显示的路径定义)
font-size: 12px;路径文字大小
background: url(../../templates/green/images/new.gif) no-repeat;阅读文章时显示的栏目条
line-height: 23px;线框高度
margin: 0;
height: 23px;栏目条高度(根据你栏目条的高度设置)
padding-left: 30px;文字距离栏目条左边的距离
color: #0179F1;文字颜色
}
.path a:link {
color: #0179F1;
}
.path a:visited {
color: #0179F1;
}
.path a:hover {
color: #0179F1;
}
#title {
background-color: #FBFEFF;
text-align: center;
border-bottom: 1px dashed #ABE4FF;
border-left: 1px solid #88D8FF;
border-right: 1px solid #D9F3FF;
padding: 10px 0 5px 0;
}
/*文章页底部*/这一行是我加上去的
.newsinfo {
background-color: #FBFEFF;指背景颜色
border-left: 1px solid #88D8FF;
border-right: 1px solid #D9F3FF;
border-bottom: 1px solid #D9F3FF;
padding: 10px;
line-height: 18px;
}
.newslists ul {
padding: 10px;
margin: 0;
list-style: none;
}
.newslists li {
background: url(../../templates/green/images/dot1.gif) no-repeat 3px center;（阅读更多文章标题小图标）
line-height: 20px;
height: 20px;
}
.newslists label {
float: left;
margin: 0;
padding: 0 0 0 20px;
}
.newslists strong {
float: right;
font-weight: normal;
margin: 0;
padding: 0 15px 0 0;
}
.attach {
color: #00A8FF;
margin: 12px 0 0 0;
}
.attach img {
border: 1px solid #D9F3FF;
border-color: #D9F3FF #88D8FF #88D8FF #D9F3FF;
padding: 7px;
margin-top: 10px;
}
.commenttitle {
font-size: 14px;
clear:both;
position:relative;
height:18px;
font-weight: bold;
text-indent: 5px;
border-left: 6px solid #6FB4FF;
border-bottom: 1px solid #6FB4FF;
background-color: #FFF;
padding: 2px;
}
.quote {
margin: 5px 0px;
padding: 5px;
border: 1px solid #000;
background-color: #EEF9F9;
}
.commentcontent {
margin: 5px 0px 15px 0px;
}
.commentdate {
color: #777777;
font-size: 11px;
padding-top: 2px;
text-align: right;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #B3CBE1;
}
/*定义分页导航样式*/page {
text-decoration: none;
font-family: sans-serif;
font-size: 12px;
padding: 5px;
background: #E7E7E7;
margin: 0px;
color:#000000
}
a.page, a.page:link, a.page:visited {
font-family: sans-serif;
text-decoration: none;
color:#0044dd;
}
a.page:hover {
font-family: sans-serif;
text-decoration: none;
color:#FFF;
background: #0000CC;
}
/* 搜索框CSS */ 这里再说一下（如果不需要搜索框将下面代码删掉就可以了）也可以去基本设置修改
.search {
width:786px;
margin-top:-20px;这里是调领地搜索框与上边通栏广告之间的上边距
margin-bottom:-15px;这里是调领地搜索框与下边最新文章主体内之间的下边距
border: 1px solid #00A8FF;
margin-left: auto;
margin-right: auto;
background-color: #FBFEFF;
clear:both;
height:35px;
}
.backgroundbord BUTTON {
BORDER-RIGHT: #47BCFF 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #47BCFF 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B4E3FE); BORDER-LEFT: #47BCFF 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #47BCFF 1px solid ;clear:both;
}
.backgroundbord {
WIDTH: 60px;
POSITION: relative;
}
.keyinput {
WIDTH:150px;
height:15px;
margin-left:2px;
BORDER: #00A8FF 1px solid;
BACKGROUND-COLOR: #fff;clear:both;
}
/* HotKeyCSS */
a.hotkey{
color:#000000;
BACKGROUND: #ffffff
text-decoration:underline;
}
a.hotkey:link{
color:#000000;
text-decoration:underline;
BACKGROUND: #ffffff
}
a.hotkey:visited{
color:#000000;
text-decoration:underline;
BACKGROUND: #ffffff
}
a.hotkey:active{
color:#000000;
text-decoration:underline;
BACKGROUND: #ffffff
}
a.hotkey:hover{
color:#0099CC;

text-decoration:underline;
BACKGROUND: #ffffff
}
/* ? CSS */
#resultstyle {
width:786px;
margin-top:-20px;
border: 1px solid #A8D1FF;
margin-left: auto;
margin-right: auto;
background-color: #FBFEFF;
clear:both;
}
#result ul{
margin:0;
font-family: " ,verdana, arial, "sans-serif;
list-style:none;
}
#result li {
width: 770px;
padding-top:3px;
padding-right:5px;
padding-bottom:3px;
display:block;
float:left;
border-bottom: 1px dashed #6FB4FF;
background:url(arrow.gif) no-repeat 5px 6px;
text-indent:18px;
}
h2 {

font-size: 12px;

padding-left: 12px;

height: 20px;

line-height: 20px;

margin: 0;

background-color: #6FB4FF;

border: 3px double #A8D1FF;

color: #FFFFFF;

}
div#footer{ display:none;} 如果不要显示底部信息可以使用这句代码，表示底部不显示

/* 推荐*/
.tui {clear:both;height:110px;margin:0 0 5px 0;border:1px solid #000000;font-family:verdana,Arial;text-align:left;font-size:12px;}/*这个就是“热门推荐”的设置地方*/
.tui a:link{ text-decoration:none; color:#ffffff;} /*热门推荐里面的链接的字颜色*/
.tui a:hover{ text-decoration:none;}/*这个就是“热门推荐”的没有链接的字颜色*/
.tui_font{float:left;width:14px;height:90px;background-color:#b5e7ff;color:#0179f1;padding:20px 3px 0 3px;}.tui_l {float:left; width:300px; margin:auto;}
.tui_l ul{ float:left;width:300px; margin:auto;}
.tui_l li{line-height:20px; list-style-type:none;}.tui_2 {float:right; width:380px; margin:auto; margin-top:-99px;}
.tui_2 ul{width:265px; margin:auto;}
.tui_2 li{font-size:12px;line-height:20px; list-style-type:none; text-align:left;}
.tui_img{float:left; width:110px;padding:3px 0 0 1px;display:block;} 
 

0

顶一下

返回首页

请填写详细信息发表评论

评论名字：
电子邮件：
评论内容：
验证字码：