准备
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:;
padding:;
border:;
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:;
}
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:;
}

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:;
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:;
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

css整站规划的更多相关文章

  1. HTML+CSS 整站 步骤

    文件夹管理: CSS JS img font html 根据设计图,划分区块 ,即页面布局 重置样式 ;padding:0;} 写main.css  注意:1 距离尽量使用偶数,避免奇数 2 在使用定 ...

  2. css+js整站变灰(兼容IE7+)

    原文:css+js整站变灰(兼容IE7+) 历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的? 重写一套css?NO,即便你有这个时间重写,那 ...

  3. quotes 整站数据爬取存mongo

    安装完成scrapy后爬取部分信息已经不能满足躁动的心了,那么试试http://quotes.toscrape.com/整站数据爬取 第一部分 项目创建 1.进入到存储项目的文件夹,执行指令 scra ...

  4. scrapy进阶(CrawlSpider爬虫__爬取整站小说)

    # -*- coding: utf-8 -*- import scrapy,re from scrapy.linkextractors import LinkExtractor from scrapy ...

  5. WordPress整站轻松开启HTTPS

    近两年来HTTPS取代HTTP已经成为大势所趋.早在2014年google Chromium安全团队提议将所有的HTTP协议网站标注为不安全.现在,Chrome浏览器已经开始执行这一标准了.从 Chr ...

  6. JavaWeb入门_模仿天猫整站Tmall_SSM实践项目

    Tmall_SSM 技术栈 Spring MVC+ Mybatis + Spring + Jsp + Tomcat , 是 Java Web 入门非常好的练手项目 效果展示: 模仿天猫前台 模仿天猫后 ...

  7. JavaWeb入门_模仿天猫整站Tmall_SSH实践项目

    Tmall_SSH 技术栈 Struts2 + Hibernate + Spring + Jsp + Tomcat , 是 Java Web 入门非常好的练手项目 效果展示: 模仿天猫前台 模仿天猫后 ...

  8. JavaWeb入门_模仿天猫整站Tmall_JavaEE实践项目

    Tmall_JavaEE 技术栈 Servlet + Jsp + Tomcat , 是Java Web入门非常好的练手项目 效果展示: 模仿天猫前台 模仿天猫后台 项目简介 关联项目 github - ...

  9. 整站死链接检测与查询工具 Xenu(可以用来制作sitemap)

    http://www.wocaoseo.com/thread-286-1-1.html 很多新手朋友们都会去找一些工具来检查网站死链接,这里给大家分享一款非常好用的检查网站死链接的工具xenu,大家可 ...

随机推荐

  1. markdown在list或者引用之后怎么去重新令其一段

    多打一个空格,虽然这个方法简单的要是,但是我就是没有想到,真是尴尬到奶奶家啦!

  2. Mybatis源码分析之Mapper的创建和获取

    Mybatis我们一般都是和Spring一起使用的,它们是怎么融合到一起的,又各自发挥了什么作用? 就拿这个Mapper来说,我们定义了一个接口,声明了一个方法,然后对应的xml写了这个sql语句, ...

  3. HTML中的ul, ol,li , dl,dt, dd标签

    ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol><li>……</li><li> ...

  4. oracle 查询重复纪录

    DELETE FROM xx where aa in(select aa from xx group by aa having count(aa) >1) and rowid in (selec ...

  5. C和指针之学习笔记(1)

    第1章 1.输入字符串 while((ch=getchar())!=EOF  &&  ch!=’\n’) ; ch=getchar() while(ch!=EOF  && ...

  6. 「清华集训2015」V

    「清华集训2015」V 题目大意: 你有一个序列,你需要支持区间加一个数并对 \(0\) 取 \(\max\),区间赋值,查询单点的值以及单点历史最大值. 解题思路: 观察发现,每一种修改操作都可以用 ...

  7. AOP 面向切面 记录请求接口的日志

    AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的一个热点, ...

  8. lucas定理 FOJ 2020 组合

     Problem 2020 组合 Accept: 886    Submit: 2084Time Limit: 1000 mSec    Memory Limit : 32768 KB Problem ...

  9. python开发_count()

    python中的count()函数,从字面上可以知道,他具有统计功能 下面来看看具体的demo: 功能:读取一个文件'c:\\test.txt',统计出该文件中出现字符'a'的次数 #python o ...

  10. hdu 5210 delete 水题

    Delete Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5210 D ...