admin 管理员组

文章数量: 1184232


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-头部

主题
底部