css 布局技巧 css中基本布局?
css中基本布局?
css中基本的布局有以下几种:
1、静态布局
最传统的布局,网页中所有尺寸都是由px作为单位,设置了min-width,如果宽度小于就会出现滚动条,如果大于这个宽度则内容居中外加背景
2、自适应布局
可以看成是不同屏幕下由多个静态布局组成的。自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局(页面元素位置可能发生改变),但在每个静态布局中,页面元素不随窗口大小的调整发生变化。
自适应布局页面里面元素的位置会变化,很好的解决了流式布局中的大屏空间利用率不高弊端。屏幕分辨率变化时,页面里面元素的位置会变化而大小不会变化。
3、流式布局(又别名 百分比布局 %)
网页中主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用),分别为不同的屏幕设置布局格式,当屏幕大小改变时,会出现不同的布局。
意思就是在这个屏幕下这个元素块在这个地方,但是在那个屏幕下,这个元素块又会出现在那个地方。只是布局改变,元素不变。可以看成是不同屏幕下由多个静态布局组成的。
4、响应式布局:媒体查询
通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度),并设置不同的CSS样式,就可以实现响应式的布局。主要依靠是css的媒体查询。
每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。
5、弹性布局 (rem/em flex布局)
CSS DIV布局有什么好处?
CSS DIV布局有什么好处?
CSS DIV是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css div的实现各种定位。
DIV CSS优点如下:
1、符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的,因为这保证您的网站不会因为将来网络应用的升级而被淘汰。
2、支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容。
3、搜索引擎更加友好。相对与传统的table, 采用DIV CSS技术的网页,对于搜索引擎的收录更加友好。
4、样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站,网易,新浪等国内门户网站,和主流的WEB2.0网站,均采用DIV CSS的框架模式,更加印证了DIV CSS是大势所趋。
5、CSS的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽,而且众所周知,搜索引擎喜欢清洁的代码。
6、表现和结构分离,在团队开发中更容易分工合作而减少相互关联性。
CSS网页布局的意义体现在如下方面:
一、使页面载入得更快
二、降低流量费用
三、修改设计时更有效率
四、保持视觉的一致性
五、更好地被搜索引擎收录
六、对浏览者和浏览器更具亲和力
版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。