论坛首页 会员注册 会员登陆 网站客服 论坛公告 论坛搜索 每日红包

导航

论坛帮助 | 积分排行 | 在线会员 | 主题排行 | 电脑技术 | 视觉贴图 | 关于我们
推荐版块: 太极风光 | 户外运动 | 消费信息 | 本土文学 | 休闲灌水 | 出门在外
Google
      
发新话题
打印

CSS模块详解

CSS模块详解

注解: 1、background: url() repeat-x; 括号里放图片。在首页显示图片的代码 2、height: 高度 3、center: 居中 4、width: 宽度 5、color: #333333; 字体的颜色 6、right: 右边 7、left: 左边 8、px: 前面的数字是设置字体的大小或者边距 /* CSS Document */ /*定义页面总体样式*/ body { margin: 0; font-family: Arial, Helvetica, sans-serif;(表示英文字体和中文字体) font-size: 12px;(表示网站字体的大小为12px) background: url(http://a327491761.lingd.net/attachment.php?id=225114) #fff3df; }(http://a327491761.lingd.net/attachment.php?id=225114:这个是背景图片地址;#fff3df:这个是背景颜色代码。如果不要要图片可以设置颜色代码把http://a327491761.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://a327491761.lingd.net/attachment.php?id=225115) repeat-x;(http://a327491761.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://a327491761.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://a327491761.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://a171914873.lingd.net/attachment.php?id=240425) no-repeat 2px center;(http://a171914873.lingd.net/attachment.php?id=24042:边框那排字前面的小图片) height: 20px; } /*内容定义样式*/ /*最新文章那排总宽度*/ #contents { width: 590px;(最新文章那排的宽度) float: left;(最新文章那排在左边) background: url(http://a327491761.lingd.net/attachment.php?id=232584) repeat;(最新文章那排背景图片) } /*最新文章底图*/ #contents .news { background: url(http://chen1314.lingd.net/attachment.php?id=182498); repeat;(幻灯片旁边最新文章底部图片) float: right;(最新文章的位置在在幻灯片右边) width: 330px;(最新文章的宽度) } .space { height: 1px; clear: both; overflow: hidden; } #contents .lists { width: 190px;(显示几栏)具体的教程请看: float: left; margin: 0 0 0 3px; } /*最新文章下面图片*/ .ads { background: url(http://a171914873.lingd.net/attachment.php?id=202496) no-repeat center; height: 60px;clear: both;(http://a171914873.lingd.net/attachment.php?id=202496:最新文章下面图片地址) } #contents h2 { font-size: 12px;(字体的大小为12px0 background: url(http://a327491761.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://a171914873.lingd.net/attachment.php?id=240743) no-repeat left center;(最新文章字前面的小图片) } .news strong { font-weight: normal; font-family: Verdana; float: right; background: url(http://a327491761.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://a327491761.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(http://pic3.5460.net/data/data2/38/45/67/410468.jpg) 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; }/*所有页面底部*/ /*底部样式定义*/ #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://a327491761.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://a327491761.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; } .newslists ul { padding: 10px; margin: 0; list-style: none; } .newslists li { background: url(http://pic3.5460.net/data/data2/38/45/67/410468.jpg)(点击more后现在在字前面的小图片) 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 #009900; border-color: #009900 #009900 #009900 #009900; 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 #009900; border-bottom: 1px solid #009900; background-color: #FFF; padding: 2px; color: #101408; } .path { (打开文章显示的路径定义) font-size: 12px;(字体的大小) background: url(http://a327491761.lingd.net/attachment.php?id=225119) no-repeat; line-height: 23px; margin: 0; height: 23px; padding-left: 30px; color: #101408;(文字颜色) } .quote { margin: 5px 0px; padding: 5px; border: 1px solid #000; background-color: #009900; } .commentcontent { margin: 5px 0px 15px 0px; } .commentdate { color: #101408; font-size: 11px; padding-top: 2px; text-align: righx; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #009900; /*定义分页导航样式*/ .page { text-decoration: none; font-family: sans-serf; font-size: 12px; padding: 5px; background: #009900; margin: 0px; color: #101408; } a.page, a.page:link, a.page:visited { font-family: sans-serif; text-decoration: none; color: #101408; } a.page:hover { font-family: sans-serif; text-decoration: none; color: #101408; background: #009900; }

看不懂,得好好学习了
人生没有彩排,每天都是现场直播
QQ空间:http://user.qzone.qq.com/59423945
大家有空去我的网店逛逛哟!
我的淘宝网网店:http://shop36168820.taobao.com
发新话题
查看积分策略说明

快速回复主题

选项

[完成后可按 Ctrl+Enter 发布]  预览帖子  恢复数据  清空内容