还在为CSS布局发愁?你该看看这7条原则
一、网页结构分析七条原则
这以下7个原则是经过多年网站实战经验之后的总结,只要掌握这7个原则,可以解决大部分在编写网站布局中的问题。
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像素.
代码:
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;}
<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:
html:
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条原则的更多相关文章
- 还在为垂直居中苦恼?CSS 布局利器 flexbox 轻轻松松帮你搞定
传统的 CSS 布局方式是基于盒模型(它是根据盒子与父盒子以及兄弟盒子的关系确定大小和位置的算法),实现时依赖于 block, inline, table, position, float 这些属性, ...
- WEB入门.七 CSS布局模型
学习内容 标准文档流 流动模型(flow model) 浮动模型(float model) CSS基本布局 能力目标 理解标准文档流 使用流动模型实现页面布局 使用浮动模型实现页面布局 掌握常用CSS ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
- 熟悉HTML CSS布局模型
HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...
- 我的CSS布局之旅--持续更新
虽然我也接触前端一年之久了,但是无奈从切图布局下来的经验还真是很不足,因为之前比赛或者是做小项目时全部都是自己负责设计,所以都是编写边设计,哎呀,也是醉了:或者是有模板,然后从人家上面扒拉下来的,真的 ...
- CSS布局中的水平垂直居中
CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...
- CSS布局(下)
1.CSS布局之浮动 1.1.float之图文混排 float的意思就是元素漂浮在上层. 可以直接通过设置float属性实现图文混排,代码如下: <div style="width:2 ...
随机推荐
- getElementById和querySelector方法的区别
"querySelector 属于 W3C 中的 Selectors API 规范 .而 getElementsBy 系列则属于 W3C 的 DOM 规范" 1.区别 getXXX ...
- 前端开发规范:命名规范、html 规范、css 规范、js 规范
上周小组的培训内容是代码可读性艺术,主要分享如何命名.如何优化代码排版,如何写好的注释.我们都知道写出优雅的代码是成为大牛的必经之路. 下面感谢一位前端开发小伙伴总结的前端开发规范,通过学习相关开发规 ...
- 【收藏】socket 中的 recv与send函数
收藏自世道:http://www.cnblogs.com/jianqiang2010/archive/2010/08/20/1804598.html 1.send 函数 int send( SOCKE ...
- [0] AssemblyInfo.cs文件介绍
AssemblyInfo.cs文件:包含程序版本.信息.版权的属性文件 先介绍AssemblyInfo.cs文件中的程序集属性 内容: using System.Reflection;using Sy ...
- Linux命令 比较文件
cmp [功能说明] 比较文件 #cmp可以比较任何类型的文件,并在标准输出设备上显示文件的第一次不同处的行号和字节号,分别从1开始,但是一般用于比较文本文件 [语法格式] Cmp[参数][文件1][ ...
- crontab问题处理
用pyhton写了一些爬虫,由于数据量比较大,需要跑的时间也比较长,所以将代码部署到服务器上.选择用crontab完成爬虫的定时爬取数据,这样避免了人工的干预,减少一些人为错误.但在部署crontab ...
- 【CC2530入门教程-03】CC2530的中断系统及外部中断应用
第3课 CC2530的中断系统及外部中断应用 广东职业技术学院 欧浩源 一.中断相关的基础概念 内核与外设之间的主要交互方式有两种:轮询和中断. 轮询的方式貌似公平,但实际工作效率很低,且不能及 ...
- 简单理解js闭包
什么是闭包?我们先来看一段代码: function a() { var n = 0; function inc() { n++; console.log(n); } inc(); inc(); } a ...
- strval
将变量转成字符串类型. 语法: string strval(mixed var); 返回值: 字符串 函数种类: PHP 系统功能 内容说明 本函数可将数组及类之外的变量类型转换成字符串类型. ...
- shell中source与sh区别
shell中使用source conf.sh,是直接运行conf.sh的命令,不创建子shell,类似与html中include,而sh是则创建子shell, 子shell里面 的变量父shell无法 ...