DIV+CSS在网页布局制作中的应用发布者：本站 时间：2020-05-02 14:05:33
布局对网页的作用类似于设计图对地产开发商的作用,制作商务网页的首要内容是对网页进行布局。常见的布局方式有:表格布局、框架布局、层布局,鉴于以上布局方式均存在一定的缺陷逐渐退出历史潮流。目前流行的布局方式是DIV+CSS来制作页面,DIV主要解决网页中的元素(如文字、图片、表格、音视频等)放置在网页显示位置的问题,而CSS主要解决网页元素美观性的问题。本文主要探讨DIV+CSS布局方式用法及要注意的问题。
一个商务网页是否吸引用户，布局至关重要。所谓布局就是对网页元素进行定位，网页整体结构是上中下还是左中右，网页的LOGO、导航、网页标题、网页核心内容、版权信息等内容显示的位置。鉴于表格布局导致表格标签的嵌套浏览器解析较慢，框架布局不够灵活，DIV+CSS布局方式逐渐成为主流，DIV实现把页面进行切割，不同的DIV放置不同的内容，CSS实现对内容进行美化，如添加背景色、设置不同块之间的间距等等。
标准布局不能完全满足网页设计的需求，有时设计需要把两个或者多个DIV在一行显示，此时需用到浮动布局，浮动布局的主要作用是打破标准流布局的自上而下、自左向右的布局方式，使得块元素不独占一行。此时可有多种方式实现效果。
方法一:left、rihgt同时左浮动或者右浮动，#left#right{float:left;};方法二:left左浮动、right右浮动，即#left{float:left;}，#right{flaot:right};方法三:left设置宽度和左浮动，right设置左外边距值，即#left{width:200px;float:left;}，#right{margin-left:200px;};方法四:类似与方法三，right设置右浮动，left设置右外边距。设置浮动后会给right后面的元素产生影响，为了清除这种影响通常做法是在right后添加一个空白div1，并设置改空白div的样式#div1{clear:both;}。
2.3 定位布局
定位布局分为相对定位和绝对定位，主要是通过元素的position、z-index、overflow、clip属性来实现，相对定位通过设置水平位置和垂直位置来实现，其在标准流中的位置仍然存在。绝对定位的使用其祖先元素必须设置定位属性，在绝对定位中，标准流中其他元素的布局对绝对定位的元素不影响，所以会导致绝对定位的元素覆盖其他元素，这时就通过设置z-index属性来控制元素的层级顺序实现想要的效果。在实际应用中相对定位很少单独使用，相对定位一般作为祖先元素的定位，从而辅助设置其子孙元素的绝对定位。
选择我们，优质服务，不容错过
1. 优秀的网络资源，强大的网站优化技术，稳定的网站和速度保证
2. 15年上海网站建设经验，优秀的技术和设计水平，更放心
3. 全程省心服务，不必担心自己不懂网络，更省心。
------------------------------------------------------------
24小时联系电话：021-58370032
