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