一、网页结构分析七条原则

这以下7个原则是经过多年网站实战经验之后的总结,只要掌握这7个原则,可以解决大部分在编写网站布局中的问题。

1、先结构后样式.

2、能用CSS表现出来的效果,就尽量少用图像.

3、切图之前一定要认真的去分析页面效果图.

4、尽量使用最简单的网页结构.

5、大结构可以用id,内部结构用class.

6、定位:相对定位+绝对定位.

7、给容器设置内边距或外边距或者边框,对应容器的宽度一定要减去相应的宽度或高度.

二、网页结构总体结构划分

大部分网页结构都可以划分为以下五个部分:

1、header 头部区域。

2、nav  导航区域。

3、banner 广告区域。

4、content 内容页区域。

5、footer 底部导航区域。

三、HTML+CSS 结构分析

css 全局样式设置

网页背景宽为:2000px;内容宽度为:980px;网页里重用的字体为宋体,字号为12px 标题字为14px 或 16px;

header 区域:

效果:

解析:

1.header 中只要设置一张Logo,可设置一个div标签.这里布局可设置Padding值:Logo 离左边距 10像素,顶部20px; height= 119-20=99 像素. width:980-5=975像素.

代码:

/*header*/
#header{width:975px; height:99px; margin:0 auto; padding:20px 0 0 5px;}
html:
<div id="header"><a href="#"><img src="data:images/logo.gif" width="168" height="76" alt="绿色食品网" /></a></div>

nav 区域:

结构分析:

导航结构可按左中右进行划分;左边和右边切一个小块 width:17px; height:58px;填充背景,不平铺.中间的导航宽度为 width:980-17*2 = width:946px 使用背景填充平铺水平方向. 切出导航分割线,作为li 标签有中间平铺。li 的宽度 为 946/9 = 105, height 为分割线的高度; 去掉最右边的分割线,单独给li设置样式,无背景.

css 代码:

 /*nav*/
#nav{width:980px; height:58px; margin: auto;}
.navLeft{display:block; width:17px; height:58px; float:left; background:url(../images/navLeft.jpg) no-repeat;}
.navCenter{width:946px; height:52px; padding-top:6px; float:left; background:url(../images/navBg.jpg) repeat-x;}
.navCenter li{width:105px; height:31px; line-height:31px; float:left; text-align:center; background:url(../images/navLine.jpg) no-repeat right center;}
.navCenter a:link,.navCenter a:visited{font-size:14px; color:#fff; text-decoration:none; font-weight:bold;}
.navCenter a:hover{text-decoration:underline;}
.navCenter li.noBg{background:none;}
.navRight{display:block; width:17px; height:58px; float:left; background:url(../images/navRight.jpg) no-repeat;}
html:
 <div id="nav">
<span class="navLeft"></span>
<ul class="navCenter">
<li><a href="#">网站首页</a></li>
<li><a href="list.html">公司新闻</a></li>
<li><a href="#">行业动态</a></li>
<li><a href="#">基地管理</a></li>
<li><a href="#">会员服务</a></li>
<li><a href="#">网上购物</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">关于我们</a></li>
<li class="noBg"><a href="#">ENGLISH</a></li>
</ul>
<span class="navRight"></span>
</div>

banner 广告区域

结构分析:

在一个div容器中,容器中只有一张图片布局, 可以设置容器的内边距padding:来调整图片的位置.

效果:

css:

/*banner*/
#banner{width:980px; height:382px; margin:0 auto; padding-top:3px;}

html:

<div id="banner"><img src="data:images/banner.jpg" width="980" height="382" /></div>

content 内容页区域

效果:

结构分析:

这个内容结构可以划分为上下结构,

上面结构可以使用ul li 来布局; ul li 使用单独样式 conTop,避免和网站其他ul li结构产生冲突, 给conTop 设置padding-left:10px;  width=980-10=970; li 的 宽度: 970-7*3-12=211;li 标签里面的结构使用: h2 和 p 标签;

下面部分结构分析:

下部分内容采用 ul li 来划分结构, 将样式命名为 conBot , 在conBot 中可以划分为左中右结构,conBotL,conBotC

在conBotL 块中: 结构分为上下结构,上面部分放H2标签 和 更多图片的链接(span标签),span标签采用相对定位. 定位=相对定位+绝对定位;下面部分采用 dl,dt,dd 标签;

在 conBotC 块中:结构分为上下结构,上面部分采用H2标签,span标签进行相对定位。

下面的样式设置 ul,li 结构:  图片和底部文字单独设置样式。

在 conBotR 块中: 结构分为上下结构,上面部分放H2标签 和 更多图片的链接(span标签),span标签采用相对定位;下面采用一个P标签.

css:

/*content*/
#content{width:980px; overflow:hidden; margin:8px auto 0; background:url(../images/content_bg.jpg) no-repeat #fff; padding-top:9px;}
.conTop{width:970px; height:92px; border-bottom:1px solid #E0E0E0; padding-left:10px;}
.conTop li{width:211px; height:73px; background:url(../images/li_bg.jpg) no-repeat; float:left; margin-right:7px; padding:10px 12px 0;}
.conTop p{color:#9d9d9d; padding-left:38px; line-height:18px;}
.conBot{width:980px; height:209px; background:url(../images/content_bg1.jpg) repeat-x left bottom;}
.conBotL{width:302px; height:199px; float:left; background:url(../images/line_bg.jpg) no-repeat right top; padding:10px 10px 0;}
.conBotL h2{height:38px; position:relative;}
.conBotL span{display:block; width:35px; height:20px; position:absolute; right:; top:10px;}
.conBotL dl{height:135px; margin-top:22px;}
.conBotL dt{width:100px; height:135px; float:left;}
.conBotL dl img{width:94px; height:80px; border:1px solid #d8d8d8; padding:2px;}
.conBotL dd{width:189px; height:135px; float:right; line-height:20px;}
.conBotL a:link,.conBotL a:visited{color:#398C00; text-decoration:none;}
.conBotL a:hover{text-decoration:underline;}
.conBotC{width:388px; height:199px; float:left; background:url(../images/line_bg.jpg) no-repeat right top; padding:10px 10px 0;}
.conBotC h2{height:38px; position:relative;}
.conBotC span{display:block; width:35px; height:20px; position:absolute; right:; top:10px;}
.conBotC ul{width:388px; height:125px; margin-top:22px;}
.conBotC li{width:120px; height:125px; float:left; margin-right:13px;}
.conBotC .noMargin{margin:;}
.one{height:94px;}
.one img{width:114px; height:88px; border:1px solid #E0E0E0; padding:2px;}
.two{height:28px; line-height:28px; text-align:center;}
.conBotR{width:230px; height:199px; float:left; padding:10px 10px 0;}
.conBotR p{margin-top:22px; line-height:22px;}

html:

<div id="content">
<ul class="conTop">
<li>
<h2><a href="#"><img src="data:images/tit_bg1.jpg" alt="有机蔬菜" /></a></h2>
<p>主要通过自然降水、施用农家肥人工除草等传统的农...</p>
</li>
<li>
<h2><a href="#"><img src="data:images/tit_bg2.jpg" alt="有机蔬菜" /></a></h2>
<p>含有丰富的碳水化合物、维生素和微量元素,尤其是...</p>
</li>
<li>
<h2><a href="#"><img src="data:images/tit_bg3.jpg" alt="有机蔬菜" /></a></h2>
<p>含有丰富的碳水化合物、维生素和微量元素,尤其是...</p>
</li>
<li>
<h2><a href="#"><img src="data:images/tit_bg4.jpg" alt="有机蔬菜" /></a></h2>
<p>在饲养过程中不添加任何化学合成的添加剂、抗生素...</p>
</li>
</ul>
<div class="conBot">
<div class="conBotL">
<h2><a href="#"><img src="data:images/tit_bg5.jpg" width="185" height="38" alt="关于我们" /></a><span><a href="#"><img src="data:images/more.jpg" width="35" height="20" alt="更多" /></a></span></h2>
<dl>
<dt><a href="#"><img src="data:images/photo_1.jpg" width="96" height="82" /></a></dt>
<dd>绿色食品(北京)有限公司立志于有机事业的发展,坚持以人为本,走可持续发展的道路,从农田到餐桌,实行全过程监控体系,以优质的产品为更多的人提供健康的食品安...<a href="#">详细内容>></a></dd>
</dl>
</div>
<div class="conBotC">
<h2><a href="#"><img src="data:images/tit_bg6.jpg" width="148" height="38" alt="产品展示" /></a><span><a href="#"><img src="data:images/more.jpg" width="35" height="20" alt="更多" /></a></span></h2>
<ul>
<li>
<p class="one"><a href="#"><img src="data:images/photo_2.jpg" width="114" height="88" /></a></p>
<p class="two"><a href="#">(古道)纯牛奶</a></p>
</li>
<li>
<p class="one"><a href="#"><img src="data:images/photo_3.jpg" width="114" height="88" /></a></p>
<p class="two"><a href="#">油茶籽油</a></p>
</li>
<li class="noMargin">
<p class="one"><a href="#"><img src="data:images/photo_4.jpg" width="114" height="88" /></a></p>
<p class="two"><a href="#">龙兴香桃</a></p>
</li>
</ul>
</div>
<div class="conBotR">
<h2><a href="#"><img src="data:images/tit_bg7.jpg" width="126" height="38" alt="联系我们" /></a></h2>
<p>
地 址:北京市海淀区知春路未来大厦6层<br />
邮 编:100191<br />
热线电话:010-62358888<br />
传 真:010-88636666<br />
邮 箱:lssp@lssp.com
</p>
</div>
</div>
</div>
 
作者:向雄 
如果对我发表的文章存在疑问或者有更好的建议,可以扫描左边二维码(或者长按识别二维码)加我微信可以相互探讨(加好友,请备注来自博客园)。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

 

还在为CSS布局发愁?你该看看这7条原则的更多相关文章

  1. 还在为垂直居中苦恼?CSS 布局利器 flexbox 轻轻松松帮你搞定

    传统的 CSS 布局方式是基于盒模型(它是根据盒子与父盒子以及兄弟盒子的关系确定大小和位置的算法),实现时依赖于 block, inline, table, position, float 这些属性, ...

  2. WEB入门.七 CSS布局模型

    学习内容 标准文档流 流动模型(flow model) 浮动模型(float model) CSS基本布局 能力目标 理解标准文档流 使用流动模型实现页面布局 使用浮动模型实现页面布局 掌握常用CSS ...

  3. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  4. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  5. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  6. 熟悉HTML CSS布局模型

    HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...

  7. 我的CSS布局之旅--持续更新

    虽然我也接触前端一年之久了,但是无奈从切图布局下来的经验还真是很不足,因为之前比赛或者是做小项目时全部都是自己负责设计,所以都是编写边设计,哎呀,也是醉了:或者是有模板,然后从人家上面扒拉下来的,真的 ...

  8. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  9. CSS布局(下)

    1.CSS布局之浮动 1.1.float之图文混排 float的意思就是元素漂浮在上层. 可以直接通过设置float属性实现图文混排,代码如下: <div style="width:2 ...

随机推荐

  1. getElementById和querySelector方法的区别

    "querySelector 属于 W3C 中的 Selectors API 规范 .而 getElementsBy 系列则属于 W3C 的 DOM 规范" 1.区别 getXXX ...

  2. 前端开发规范:命名规范、html 规范、css 规范、js 规范

    上周小组的培训内容是代码可读性艺术,主要分享如何命名.如何优化代码排版,如何写好的注释.我们都知道写出优雅的代码是成为大牛的必经之路. 下面感谢一位前端开发小伙伴总结的前端开发规范,通过学习相关开发规 ...

  3. 【收藏】socket 中的 recv与send函数

    收藏自世道:http://www.cnblogs.com/jianqiang2010/archive/2010/08/20/1804598.html 1.send 函数 int send( SOCKE ...

  4. [0] AssemblyInfo.cs文件介绍

    AssemblyInfo.cs文件:包含程序版本.信息.版权的属性文件 先介绍AssemblyInfo.cs文件中的程序集属性 内容: using System.Reflection;using Sy ...

  5. Linux命令 比较文件

    cmp [功能说明] 比较文件 #cmp可以比较任何类型的文件,并在标准输出设备上显示文件的第一次不同处的行号和字节号,分别从1开始,但是一般用于比较文本文件 [语法格式] Cmp[参数][文件1][ ...

  6. crontab问题处理

    用pyhton写了一些爬虫,由于数据量比较大,需要跑的时间也比较长,所以将代码部署到服务器上.选择用crontab完成爬虫的定时爬取数据,这样避免了人工的干预,减少一些人为错误.但在部署crontab ...

  7. 【CC2530入门教程-03】CC2530的中断系统及外部中断应用

    第3课  CC2530的中断系统及外部中断应用 广东职业技术学院  欧浩源 一.中断相关的基础概念  内核与外设之间的主要交互方式有两种:轮询和中断. 轮询的方式貌似公平,但实际工作效率很低,且不能及 ...

  8. 简单理解js闭包

    什么是闭包?我们先来看一段代码: function a() { var n = 0; function inc() { n++; console.log(n); } inc(); inc(); } a ...

  9. strval

    将变量转成字符串类型. 语法: string strval(mixed var); 返回值: 字符串 函数种类: PHP 系统功能   内容说明 本函数可将数组及类之外的变量类型转换成字符串类型.   ...

  10. shell中source与sh区别

    shell中使用source conf.sh,是直接运行conf.sh的命令,不创建子shell,类似与html中include,而sh是则创建子shell, 子shell里面 的变量父shell无法 ...