学习DIV
来源:互联网 发布:网络超市加盟 编辑:程序博客网 时间:2024/06/10 23:52
学习ing,这两天出现的问题,都是与DIV有关的。。初步小结一下,以后继续补充~
1,布局:定位(绝对position: absolute,相对position: relative)、宽度高度、
float的使用,不光是div,列表等都可以使用浮动。
使用float后会出现的问题:浮动后父容器高度自适应(overflow:auto;是让高度自适应);
经常会遇IE6的双倍边距bug:
2,可视性(这条属性在编写语言和使用动态HTML时很有用,比如你可以使某段落或图像只在鼠标滑过时才显示。)
2.1,弹出层(z-index)
特性 z-index 用于堆叠屏幕上的单元。缺省情况下,单元堆叠的顺序为它们出现在HTML标记的顺序——也就是说,后出现单元堆叠在早出现单元的上面。(值大的单元在上层)。
3,剪辑绝对定位单元(clip)绝对定位单元可以被剪辑
4,控制单元溢出(overflow)
固定绝对或相对定位单元的 width 和 height,很可能会因为指定的区域不能满足单元实际内容的需要,而造成单元内容溢出。这时可使用 overflow 来指定浏览器如何处理溢出:值 none(缺省值)允许浏览器显示溢出的内容,因此单元可溢出指定的区域。而值 clip 要求浏览器在单元底部和右边剪辑单元内容,这样,超出指定区域的单元内容将不显示。值 scroll 也同样要求浏览器在单元底部和右边剪辑单元内容(同 clip),不过,浏览器应该(如果可能的话)为单元提供滚动条以使用户能通过滚动来浏览被剪辑的内容。
DIV+CSS布局优势
一.精简代码,减少重构难度。
网站使用DIV+CSS布局使代码很是精简,相信大多朋友也都略有所闻,css文件可以在网站的任意一个页面进行调用,而若是使用table表格修改部分页面却是显得很麻烦。要是一个门户网站的话,需手动改很多页面,而且看着那些表格也会感觉很乱也很浪费时间,但是使用css+div布局只需修改css文件中的一个代码即可。
二.网页访问速度
使用了DIV+CSS布局的网页与Table布局比较,精简了许多页面代码,那么其浏览访问速度自然得以提升,也从而提升了网站的用户体验度。
三.SEO优化
采用div-css布局的网站对于搜索引擎很是友好,因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题,而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。
四.浏览器兼容性
若使用table布局网页,在使用不同浏览器情况下会发生错位,而div+css则不会,无论什么浏览器,网页都不会出现变形情况。
最后,需要注意的是,蜘蛛不喜欢一个页面有太多的css代码,否则同样会影响蜘蛛的爬行,影响搜索引擎的收录,所以采用外部调用的方式调用CSS是非常不错的方法。而同时,若非必须太多花哨的网站,采用CSS布局,同样可以到达所想要的效果。如网站导航中的文字颜色变化、下拉菜单等。[1]
- 学习DIV
- css+div学习
- div+css学习笔记
- Div+css学习笔记
- Css+Div布局学习
- Div+css学习笔记
- div+css学习1
- div+css 学习
- div+css学习笔记
- div+css 学习概要
- div学习笔记
- css+div学习站点
- div + css 学习总结
- DIV+CSS学习笔记
- DIV+CSS布局学习
- DIV+CSS学习
- div+css学习
- 学习div容器
- NEC 遥控器 源码处理流程分析
- Listview属性
- 快速排序算法(java)
- 设计模式之装饰器模式
- 文件目录的权限是rwxrwxrwt
- 学习DIV
- 秒杀多线程第二篇 多线程第一次亲密接触 CreateThread与_beginthreadex本质区别 .
- 设计模式学习笔记(十六)—Proxy模式
- Java冒泡排序
- Java开发牛人十大必备网站
- Android-- FragmentStatePagerAdapter分页
- 浏览器输入网址后台是如何运作的
- hadoop stream指定输出的part文件个数,并利用mapreduce进行压缩
- Asterisk SIP连通测试(X-Lite eyebeam)