0

0

div+css网页布局小结 【转】_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 12:27:00

|

1397人浏览过

|

来源于php中文网

原创

1、ul:默认的ul的margin和padding不是0,如果在导航中用到了左浮动的li,往往会把外部的div撑大,导致页面变形,改成: ul{margin:0px; padding:0px;}


 2、img:

①这里牵涉的不同浏览器的问题,ie6里显示的图片height总是要大于准确值,这里就需要我们记住下面这一点 img{ display:block};

②页面中最好不要用大块背景,能平铺的要平铺,否则加载起来会很慢,也不利于以后的优化和扩展,当然也有些大的网站,现在都尽量把背景统一放到一张图片上,用background-postion来取得背景。

③最好的格式就是gif格式,即确保了背景透明,在ie6中又不会有阴影,有时gif图片会有锯齿,这就需要我们保存成web格式,设置一下matter,matter的值用背景颜色的值越相近越好。


 3、overflow:有时一些公司的注册协议都是很长,这就用到了overflow,可以把div的style里加上这个:overflow:auto

 

4、float:有时候一些div会挤到页面的上方,这里可能就是浮动引起的,可以加上clear:both。


 5、div:height等于1px的div,在ie6中可能并不是1px,在这个div的style里加上font-size:1px;这样就ok了。


 6、id和class:当一个样式在页面中多次使用时,不要用id,要用class,要使用js的时候,样式最好不要用id,因为id要留给js使用。id在一个页面中出现的次数是一次,过多使用将失去样式的可重用性的特征,对于页面的可维护性也将大打折扣。

 

7、table与div: 现在网络上的大多数网页都是用table写的,可以说它是不标准的!table层层嵌套,缺点是很繁琐,修改起来很麻烦,用w3c网页标准来说,table真正的目的是用来显示数据的,而不是用来布局的。div布局的好处是它符合了w3c网页标准,div是真正用来布局网页的,以后维护时要是想改变布局的话修改起来很方便,现在sina,163等国内网站以及国外的大多数网站都是用div布局的,如果你真的想当一名网页设计师,建议你走div这条路,但前提是要把css学好,并且要学精!你可以设置body的css属性,或者设置body中元素的css属性,例如p标记、table标记、div标记等,他们都有text-align属性,设置居中就可以了,另外需要注意的是,要让整个网页居中最好使用table来定位内容的位置,这样操作起来最简单和最方便。


 7、link:.link:link{}、.link:visited{}、.link:hover{}、.link:active{}。有一点,visited与hover的顺序一定不能倒换,否则ie6中会大大的问题。

 

8、网页布局的方法: 网页布局的方法有两种,第一种为纸上布局;第二种为软件布局。尺寸选择:目前一般800x600的分辨率为约定俗成的浏览模式。

 

9、层叠样式表的应用:
   在新的html4.0标准中,css(层叠样式表)被提出来,它能完全精确的定位文本和图片。css对于初学者来说显得有点复杂,但它的确是一个好的布局方法。你曾经无法实现的想法利用css都能实现。目前在许多站点上,层叠样式表的运用是一个站点优秀的体现。你可以在网上找到许多关于css的介绍和使用方法。 当然,日趋炙热的web标准(xhtml+css)开是强烈推崇内容和表现相分离,并为下一代数据交换xml做为过渡(即xhtml)。

 10、dtd:如果无论怎样调整不同浏览器显示结果还是不一样,那么可以检查一下页面开头是不是忘了写下面这行dtd

 

 11、float:1)元素务必指定width属性:很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。另外指定元素时尽量使用em而不是px做单位。2)float元素不能指定margin和padding等属性:ie在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为ie指定特别的值。3) float元素的宽度之和要小于100%如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。4)float元素的父元素不能指定clear属性:macie下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。这是macie的着名的bug,倘若不知道就会走弯路。

 

12、默认样式: 某些属性如margin、padding等,不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

 

 13、利用border属性确定出错元素的布局特性:使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出。

 

14、使用清除浮动元素:停止书写诸如

,以及element:after {content:”.”;clear:both;visibility:hidden;height:0;display:block}这些都是hacks,不是最好的做法。应该如下:
#container {overflow:hidden}

#container {display:inline-block} #container {display:block}

为什么要用overflow:hidden,因为它具有神奇的魔力,具体解释看w3c的文档解释。

 

 15、适当使用单位:不要使用px定义字体大小,使用px定义字体大小应该是table布局时代的一种旧习惯,与之对应的是像素字体在1024*768分辨率下看起来ok,但是时代是不断变化,现在1024分辨率的占有率不断下降,这也就意味着在1920的显示器上会觉得字很小。如何解决?用em单位定义,比如font-size:1.2em,意思就是该字体是默认字体的1.2倍,在火狐和ie下相当于16px,使用em的好处是,你可以通过改变body标签或者其他任意外部标签的字体大小来控制整站的字体大小,让字体具有弹性,而用px是无法做到的,除非你使用的浏览器的缩放功能。另外字体也不应该用诸如pt、cm等单位定义,避免使用百分比,1em和100%是等效的,但是后者占用了更多的空间而且有自己的怪癖。

 

 16、position:float为主,position为辅!!!如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素的padding的属性影响,当然你也可以用position,不过到时候计算的时候不要忘记padding的值。但是定位(position)有一个缺点,不会自适应内部元素的高度,kwoojan建议大家布局页面的时候,还是要以float为主,position为辅!这样你才能做出高质量的页面。
 

 

http://blog.sina.com.cn/s/blog_879890300100wnmb.html

ecshop仿万表网商城整站
ecshop仿万表网商城整站

该软件是以ecshop作为核心的仿制万表网的商场网站源码。万表网模板 2015最新版整体简洁大气,功能实用,是一款时尚典雅的综合类模板!样式精美的商品分类树,层次分明,分类结构一目了然。首页轮播主广告分别对应切换小广告,商品宣传更到位。独家特色增加顶级频道页面、品牌页面,以及仿京东对比功能,提升网站档次,让您的网站更加高端大气!并且全站采用div+css布局,兼容性良好,更注重页面细节,增加多种j

下载

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

616

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

194

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

91

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

20

2026.02.13

Redis高可用架构与分布式缓存实战
Redis高可用架构与分布式缓存实战

本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

54

2026.02.13

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

29

2026.02.12

雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

15

2026.02.12

豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

598

2026.02.12

PostgreSQL性能优化与索引调优实战
PostgreSQL性能优化与索引调优实战

本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

56

2026.02.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
前端实战原生布局—(小米商城)
前端实战原生布局—(小米商城)

共25课时 | 3.2万人学习

前端工程师必备技能—PS切图
前端工程师必备技能—PS切图

共11课时 | 1.9万人学习

兄弟连高洛峰CSS3视频教程
兄弟连高洛峰CSS3视频教程

共20课时 | 4.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号