科学技术创新
1di v+css 布局的优势1.1与表格布局比较。cs s +di v 布局在网站开发中已经被应用很多年了，占据了相当大的主导地位。di v 是H TM L 里的一种标签<di v>是可以用来成块显示内容的一种标记。几乎所有浏览器都能够识别此标签，为网页设计提供布局结构。在di v 标签里，开始和结束标签之间可写入任何需要的标签来充实网页内容。D i v 元素可以看做一个干净容器所以设计师可以通过设置其属性来修饰其样式也可以嵌套其他元素来放入内容，最后通过改变其布局方式来呈现多彩多样的网页布局形式。Cs s 则是层级样式表，几乎所有浏览器都支持cs s 技术,cs s 将di v 中的各种属性和属性值集合在一起，能够简单、有效的控制网页的颜、布局、字体、背景等等。
将cs s 样式表打包成一个文件，使用时可重复调用、举一反三。使用cs s +di v 布局可以使内容和表现形式分离，代码干净整洁、有较好的复用性和可读性。与cs s +di v 布局相比因表格布局最初的目的是用于放置文字显示内容，用于网页布局必须要调整表格内部大小，与制表元素夹杂在一起容易导致大量冗余代码，影响代码的可读性并且难以维护。
1.2属性的多样性。D i v 元素可设置多种属性，其属性可通过cs s 层叠样式表统一设置，下面是几种较
css表格样式为常用的能够增强网页美观度属性设置。
1.2.1backgr ound 设置背景颜，例如设置背景颜为红或者绿ackgr ound :r ed/gr een ，其中属性值还可以用十六进制数表示；属性值若是为ur l (“图片路径”)则为设置该路径下的图片为此di v 元素的背景。
1.2.2opaci t y 设置背景颜的透明度，例如opaci t y :0.7效果是百分之70是不透明的，数值越小透明度越高。
1.2.3bor der -r adi us 设置di v 元素的圆角化，例如bor der -r adi us :10px 将10px 的宽度进行圆角化且数值越大圆角化的程度越高。
1.2.4bor der 设置边框属性，此属性可同时设置边框的宽度、样式、颜。例如:bor der :1px s ol i d #00008b 效果宽度为1px ，样式为实线，颜为#00008b 。
2di v+css 布局的劣势
虽然大多数浏览器都支持cs s +di v 技术，但还是有部分浏览器不支持此技术。而且di v+cs s 技术对于新手开发者来说是比较困难的，因为相对于表格布局来说di v 元素的定位更复杂，容易导致页面分布七零八落。
3di v+css 实现网页布局3.1常规流式布局
流式布局是在网页中常见的布局，流式布局是按照标签的编写顺序来依次垂直排列。如图1:
图1流式布局
流式布局代码:<s t yl e>
body{
m ar gi n:0;}.box{
wi dt h:960px;m ar gi n:0aut o;}.box .header {
hei ght :120px;bor der :1px s ol i d #f 00;l i ne-hei ght :120px;}.box .m ai n{
hei ght :300px;bor der :1px s ol i d #0f 0;l i ne-hei ght :300px;}.box .f oot er {
hei ght :100px;bor der :1px s ol i d #00f ;l i ne-hei ght :100px;}di v{
t ext -al i gn:cent er ;}
</s t yl e><body>
基于cs s 的di v 网页布局设计
楚孟慧吴姝瑶
(山东科技大学电气信息系，山东济南250031)
摘要:css+div 网页布局设计可以通过多种布局形式来实现多姿多彩的网页。本文介绍div+css 进行网页布局的优势和劣势以及三种常见布局，并对每个实例进行解析。
关键词：网页布局;css ;div 中图分类号:TP393.092文献标识码:A 文章编号:2096-4390(2021)09-0086-02作者简介：楚孟慧(2000,01,03-)，女，籍贯：山东济宁，现于山东科技大学攻读学士学位，目前主要从事于计算机科学与技术相关专业研究。
86--
2021.09科学技术创新
<di v cl as s="box">
<di v cl as s="header">头部</di v>
<di v cl as s="m ai n">主题</di v>
<di v cl as s="f oot er">底部</di v>
</di v>
</body>
代码解析：常规流式布局中简单罗列<di v>标签就可以达到垂直排列的网页布局并且cs s中主题部分高度设置大于头部和底部，宽度设置相同，此代码可以直接应用到各种需要常规布局的网站。
3.2浮动布局
仅仅使用常规的流式布局只能实现垂直方向上的di v元素排列无法形成多种多样的网络布局结构，此时浮动布局就显得尤为重要。浮动布局可以形象的描述为每个di v元素块就像浮动在水面上，位置可以随着水流方向的改变而改变。浮动分为两个方向左浮动和右浮动分别对应属性和属性值为f l oat:l ef t/ r i ght。在同一行中的不同di v元素可以存在不同的浮动，浮动块不会相互重叠。在不需要浮动属性时可以清除浮动，浮动布局可以使各部分排列有序，从而有利于对整体空间规划。
当三个相同大小的di v元素都设置向左浮动的属性时则出现如图2所示的情况:
图2全部左浮动
当没有浮动属性时f l oat:none也是默认设置网页布局与图1相同。
当底部di v的浮动属性由f l oat:l ef t改为f l oat:r i ght时底部di v模块会向右对齐。
当di v排列在同一行时当底部di v的浮动属性被清除即cl ear:l ef t则底部di v将换行显示，如图3。
图3底部清除浮动
当大小不一致的di v元素排列在同一行，不能完全显示的di v会自动换行，并在下一行的开头显示，如图4。
图4底部换行显示
在cs s中加入f l oat:l ef t使得三个di v层全部左移形成水平排列的效果。cs s样式表中的高度和宽度大小相同。
3.3定位布局
3.3.1静态定位。pos i t i on:s t at i c如果代码中不写pos i t i on属性相当于写上了pos i t i on:s t at i c，元素在它原本的位置显示，即使增加t op、l ef t等属性也不起作用。
3.3.2相对定位与绝对定位。相对定位:podi t i on:r el at i ve是相对于原来位置进行上下左右的移动，且原来位置仍被占位。
绝对定位pos i t i on:abs ol ut e是相对于网页左上角0点来说，配合t op、l ef t、r i ght、bot t om来进行定位。若位于父层元素的下一层元素则是相对于父层元素来定位，前提是父层元素已经定位。当父层元素定位为绝对定位，子层元素相对于最近的父层元素发生改变。
当G r andf at her层定位,f at ehr层进行想对移动之后,s on层相对于已经定位的f at her层进行移动，如图5所示。
图5绝对定位
解析：首先G r andf at her层di v设置pos i t i on:abs ol ut e，此时Fat her层的最近父层则为G r andf at her层，于是Fat her层相对于G r andf at her层偏移。Fat her层设置为pos i t i on:abs ol ut e之后Son 层可以相对于Fat her层进行偏移。
4结论
综上所述,cs s+di v布局结构存在着优势同时又存在着劣势。但di v+cs s布局能够成为主流主要是由于cs s与di v将样式与布局分离，避免改变样式时需要大量的修改代码。所以对于新手设计师来说需要将di v+cs s结构掌握之后再进行网页设计，尽量避免定位不准确的问题，掌握三种常用的布局方式对设计网页有极大帮助。
参考文献
[1]刘坤彪，程旭东，陈铭.基于CSS的标准网页布局设计[J].南阳理工学院学报,2012,4(06):23-28.
[2]谢振华.Div+css网页布局设计实现[J].中小企业管理与科技(中旬刊),2016(04):151-152.
[3]韦春暖.网页布局设计技术问题探究[J].数字通信世界,2018 (09):95.
[4]郑宁宁.浅析DIV+CSS网页设计技术[J].山东省农业管理干部学院学报,2008,24(06):169-170.
[5]张伟娜，王海波.DIV+CSS网页设计初探[J].电脑知识与技术, 2013,9(03):607-611.
[6]黄雄平.基于Dreamweaver的DIV+CSS网页设计初步研究[J].电脑知识与技术
,2010,6(36):10318-10319+10327.
87
--

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。