2023年12月19日发(作者：vb和数据库怎么连接)
-86-科学技术创新基于css的div网页布局设计楚孟慧吴姝瑶渊山东科技大学电气信息系袁山东济南250031冤摘要院css+div网页布局设计可以通过多种布局形式来实现多姿多彩的网页遥本文介绍div+css进行网页布局的优势和劣势以及三种常见布局袁并对每个实例进行解析遥关键词院网页布局曰css曰div中图分类号院TP393.092文献标识码院A文章编号院2096-4390渊2021冤09-0086-021div+css布局的优势1.1与表格布局比较遥css+div布局在网站开发中已经被应用很多年了袁占据了相当大的主导地位遥div是HTML里的一种标签
是可以用来成块显示内容的一种标记遥几乎所有浏览器都能够识别此标签袁为网页设计提供布局结构遥在div标签里袁开始和结束标签之间可写入任何需要的标签来充实网页内容遥Div元素可以看做一个干净容器所以设计师可以通过设置其属性来修饰其样式也可以嵌套其他元素来放入内容袁最后通过改变其布局方式来呈现多彩多样的网页布局形式遥Css则是层级样式表袁几乎所有浏览器都支持css技术袁css将div中的各种属性和属性值集合在一起袁能够简单尧有效的控制网页的颜色尧布局尧字体尧背景等等遥将css样式表打包成一个文件袁使用时可重复调用尧举一反三遥使用css+div布局可以使内容和表现形式分离袁代码干净整洁尧有较好的复用性和可读性遥与css+div布局相比因表格布局最初的目的是用于放置文字显示内容袁用于网页布局必须要调整表格内部大小袁与制表元素夹杂在一起容易导致大量冗余代码袁影响代码的可读性并且难以维护遥1.2属性的多样性遥Div元素可设置多种属性袁其属性可通过css层叠样式表统一设置袁下面是几种较为常用的能够增强网页美观度属性设置遥1.2.1background设置背景颜色袁例如设置背景颜色为红色或者绿色background院red/green袁其中属性值还可以用十六进制数表示曰属性值若是为ur渊l野图片路径冶冤则为设置该路径下的图片为此div元素的背景遥1.2.2opacity设置背景颜色的透明度袁例如opacity院0.7效果是百分之70是不透明的袁数值越小透明度越高遥1.2.3border-radius设置div元素的圆角化袁例如border-radius院10px将10px的宽度进行圆角化且数值越大圆角化的程度越高遥1.2.4border设置边框属性袁此属性可同时设置边框的宽度尧样式尧颜色遥例如院border:1pxsolid#00008b效果宽度为1px袁样式为实线袁颜色为#00008b遥2div+css布局的劣势虽然大多数浏览器都支持css+div技术袁但还是有部分浏览器不支持此技术遥而且div+css技术对于新手开发者来说是比较困难的袁因为相对于表格布局来说div元素的定位更复杂袁容易导致页面分布七零八落遥3div+css实现网页布局3.1常规流式布局流式布局是在网页中常见的布局袁流式布局是按照标签的编写顺序来依次垂直排列遥如图1院头部
主题
底部
图1流式布局流式布局代码院
作者简介院楚孟慧渊2000袁01袁03-冤袁女袁籍贯院山东济宁袁现于山东科技大学攻读学士学位袁目前主要从事于计算机科学与技术相关专业研究遥
2021.09科学技术创新-87-头部
代码解析院常规流式布局中简单罗列
标签就可以达到垂直排列的网页布局并且css中主题部分高度设置大于头部和底部袁宽度设置相同袁此代码可以直接应用到各种需要常规布局的网站遥3.2浮动布局仅仅使用常规的流式布局只能实现垂直方向上的div元素排列无法形成多种多样的网络布局结构袁此时浮动布局就显得尤为重要遥浮动布局可以形象的描述为每个div元素块就像浮动在水面上袁位置可以随着水流方向的改变而改变遥浮动分为两个方向左浮动和右浮动分别对应属性和属性值为float院left/right遥在同一行中的不同div元素可以存在不同的浮动袁浮动块不会相互重叠遥在不需要浮动属性时可以清除浮动袁浮动布局可以使各部分排列有序袁从而有利于对整体空间规划遥当三个相同大小的div元素都设置向左浮动的属性时则出现如图2所示的情况院3.3定位布局3.3.1静态定位遥position院static如果代码中不写position属性相当于写上了position院static袁元素在它原本的位置显示袁即使增加top尧left等属性也不起作用遥3.3.2相对定位与绝对定位遥相对定位院podition院relative是相对于原来位置进行上下左右的移动袁且原来位置仍被占位遥绝对定位position院absolute是相对于网页左上角0点来说袁配合top尧left尧right尧bottom来进行定位遥若位于父层元素的下一层元素则是相对于父层元素来定位袁前提是父层元素已经定位遥当父层元素定位为绝对定位袁子层元素相对于最近的父层元素发生改变遥当Grandfather层定位袁fatehr层进行想对移动之后袁son层相对于已经定位的father层进行移动袁如图5所示遥图2全部左浮动当没有浮动属性时float院none也是默认设置网页布局与图1相同遥当底部div的浮动属性由float院left改为float院right时底部div模块会向右对齐遥当div排列在同一行时当底部div的浮动属性被清除即clear院left则底部div将换行显示袁如图3遥图3底部清除浮动当大小不一致的div元素排列在同一行袁不能完全显示的div会自动换行袁并在下一行的开头显示袁如图4遥图5绝对定位解析院首先Grandfather层div设置position院absolute袁此时Father层的最近父层则为Grandfather层袁于是Father层相对于Grandfather层偏移遥Father层设置为position院absolute之后Son层可以相对于Father层进行偏移遥4结论综上所述袁css+div布局结构存在着优势同时又存在着劣势遥但div+css布局能够成为主流主要是由于css与div将样式与布局分离袁避免改变样式时需要大量的修改代码遥所以对于新手设计师来说需要将div+css结构掌握之后再进行网页设计袁尽量避免定位不准确的问题袁掌握三种常用的布局方式对设计网页有极大帮助遥参考文献[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.图4底部换行显示在css中加入float院left使得三个div层全部左移形成水平排列的效果遥css样式表中的高度和宽度大小相同遥
本文标签：
布局
网页
浮动
属性
admin 管理员组
发表评论