css整站规划

准备
1 css reset

/**

 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)

 * http://cssreset.com

 */

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

    display: block;

}

body {

    line-height: 1;

}

ol, ul {

    list-style: none;

}

blockquote, q {

    quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

    content: '';

    content: none;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

 

2 命名习惯
匈牙利命名 下划线

3 命名防止冲突
lee_tab（注明自己的标记）

4 相同模块命名 box area left right
参考http://www.qq.com/map/
（注意：标题和内容的class名都相同 外壳class不同）
中间主体部分板块
<div class="con">
　　<div class="hd"></div>
　　<div class="bd"></div>
</div>
侧边栏
<div class="modRight">
　　<div class="hd"><h2>热门活动</h2></div>
　　<div class="bd"></div>
</div>

5 css分类
css reset
common public(header footer sider)
index
分页样式

6 布局css模块化
wrap{width: 1000px;margin: 0 auto;clear: both;overflow: hidden;zoom: 1;}
main{float: left;width: 786px;}
side{float: right;width: 190px;}

7 常用结构
　新闻列表

<ul class="lin_article">

    <li><span>2012-03-2</span><a href="javascript:void(0);" title="土豪！我们做朋友吧！">土豪！我们做朋友吧！</a></li>

    <li><span>2012-04-2</span><a href="javascript:void(0);" title="专注网站建设">专注网站建设</a></li>

    <li><span>2012-05-2</span><a href="javascript:void(0);" title="【原创】常用的HTML结构">【原创】常用的HTML结构</a></li>
</ul>

.lin_article{width:300px; margin:0px auto;}

.lin_article li{background: url(htmlImages/san.png) no-repeat scroll 0px 9px;height: 22px;line-height: 22px;overflow: hidden;padding-left: 10px;}

.lin_article li span{float:right; color:#999;}

图文结构

左图右文

<dl class="lin_imageText clearfix">

    <dt>

        <a href="javascript:void(0);" title="图"><img src="/Public/images/html/a.gif" alt="图片一"></a>

    </dt>

    <dd>

        <h4><a href="javascript:void(0);" title="林氏智造-专注网站建设">专注网站建设</a></h4>

        <p>专注网站建设,关注PHP开发,前端开发,网站运维,用户体验的专业博客</p>

    </dd>

</dl>

.lin_imageText{width:400px; margin:0px auto;} 

.lin_imageText dt{float:left; display:inline; width:200px; height:125px;}

.lin_imageText dd{float:left; display:inline; height:125px;width:190px; color:#333; padding-left:10px; font-size:12px;}

.lin_imageText dd a{font-size:14px;}

上图下文

<div class="bd"> 

　　<ul class="clearfix">

　　　　<li><a href="#" target="_blank"><img src="http://img1.gtimg.com/sports/pics/hv1/156/157/1500/97577691.jpg" width="140" height="80" alt="罗德曼离朝转机遭围堵">罗德曼离朝转机遭围堵</a></li>

　　　　<li><a href="#" target="_blank"><img src="http://img1.gtimg.com/sports/pics/hv1/155/157/1500/97577690.jpg" width="140" height="80" alt="恒大铁卫纹嫩模头像">恒大铁卫纹嫩模头像</a>　　</li>

　　　　<li><a href="#" target="_blank"><img src="http://img1.gtimg.com/sports/pics/hv1/153/157/1500/97577688.jpg" width="140" height="80" alt="海瑟薇游泳溺水险丧命">海瑟薇游泳溺水险丧命</a></li>

　　　　<li><a href="#" target="_blank"><img src="http://img1.gtimg.com/sports/pics/hv1/157/157/1500/97577692.jpg" width="140" height="80" alt=" FIFA典礼太太团斗艳"> FIFA典礼太太团斗艳</a></li>

　　</ul>

</div>

img {

vertical-align: bottom;

}

bd ul {

margin-left: -20px;

}

.bd li {

display: inline;

float: left;

width: 140px;

height: 110px;

overflow: hidden;

margin-left: 20px;

padding-bottom: 13px;

font-size: 14px;

}

.bd li img {

padding-bottom: 3px;

}

 

幻灯片
选项卡
分页

<div class="pages">

  <a href="#">上一页</a>

  <a href="#">1</a>

  <a href="#">2</a>

  <a href="#" class="active">3</a>

  <a href="#">4</a>

  <a href="#">15</a>

  <a href="#">211</a>

  <a href="#">255…</a>

  <a href="#">下一页</a>

</div>

.pages{ height:60px; background:#e8e8e8; width:600px; margin:90px auto; text-align:center;line-height:60px;}

.pages a{ background:#fff; border:1px solid #cdcdcd;color:#333333; padding:0 8px 0 9px; height:28px; line-height:28px; display:inline-block;}

.pages a:hover{border-color:red;color:red;}

.pages .active{ font-weight:bold; background:#fcf9ea;cursor:text;}

.pages .active:hover{border-color:#cdcdcd;color:#333333;}

视频通用模块

HTML

<li bosszone="videoRe1">
<a href="#" target="_blank"><img src="http://img1.gtimg.com/v/pics/hv1/157/125/1500/97569532.jpg" width="189" height="106" alt="《风暴》刘德华搏命"></a>
<b class="bicon"></b> 
<b class="bg-mb foot-mb"></b> 
<a href="#" class="text-link-foot" target="_blank">《风暴》刘德华搏命</a>
</li>

li {

position: relative;

float: left;

width: 189px;

height: 106px;

overflow: hidden;

margin-right: 14px;

}

.bicon {

display: block;

position: absolute;

left: 5px;

top: 60px;

z-index: 1;

width: 21px;

height: 21px;

background: url(http://mat1.gtimg.com/news/base2011/img/trs.png) repeat 0 0;

cursor: pointer;

_background-image: none;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://mat1.gtimg.com/news/base2011/img/trs.png",sizingMethod="scale");

}

.bg-mb {

top: 84px;

left: 0;

width: 169px;

height: 22px;

padding-left: 20px;

position: absolute;

filter: Alpha(Opacity=70);

opacity: 0.7;

background: #000;

}

 

分享到

空白块

一条线

8颜色 宽度 留白

color color_red
width w_100
padding pb_10

9 css组件
按钮 btn btn_green
图标

10 技巧方面

省略号

a