html网页布局论文,DIV+CSS在网页布局制作中的应用-程序员宅基地
技术标签： html网页布局论文
网页设计与制作论文第三篇：DIV+CSS在网页布局制作中的应用
摘要：布局对网页的作用类似于设计图对地产开发商的作用,制作商务网页的首要内容是对网页进行布局。常见的布局方式有:表格布局、框架布局、层布局,鉴于以上布局方式均存在一定的缺陷逐渐退出历史潮流。目前流行的布局方式是DIV+CSS来制作页面,DIV主要解决网页中的元素(如文字、图片、表格、音视频等)放置在网页显示位置的问题,而CSS主要解决网页元素美观性的问题。本文主要探讨DIV+CSS布局方式用法及要注意的问题。
关键词：DIV+CSS; 浮动布局; 定位布局;
一个商务网页是否吸引用户，布局至关重要。所谓布局就是对网页元素进行定位，网页整体结构是上中下还是左中右，网页的LOGO、导航、网页标题、网页核心内容、版权信息等内容显示的位置。鉴于表格布局导致表格标签的嵌套浏览器解析较慢，框架布局不够灵活，DIV+CSS布局方式逐渐成为主流，DIV实现把页面进行切割，不同的DIV放置不同的内容，CSS实现对内容进行美化，如添加背景色、设置不同块之间的间距等等。
1 DIV+CSS的概念
DIV是HTML语言中的一个标签元素即
CSS(Cascading Style Sheets)指层叠样式表，作用是对网页元素进行美化，CSS可以出现在HTML标签行中、HTML的
标签中、外部样式表三个位置，在DIV+CSS布局中常常把CSS独立形成一个．css文件，实现与HTML文件完全分离，可以实现样式表的重复使用、网页的结构与表现可以实现完全分离。CSS中主要有类选择器、ID选择器、复合选择器和标签选择器四种，优先级顺序为:复合选择器>ID选择器>类选择器>标签选择器，复合选择器的优先级最高、标签选择器的优先级最低，ID选择器只能使用一次，类选择器可以重复使用，在实际制作网页过程中要根据需求灵活选择CSS选择器的类型。2 DIV+CSS的运用
2.1 标准布局
标准布局是指网页元素按HTML代码的顺序自上而下或自左向右逐步分布的，就像流水一样，我们将这种流动方式称为标准流或文档流。标准流布局具有以下两个比较典型的特征。块级元素会在所处的包含元素内自上而下按顺序垂直分布。因为在默认状态下，不管把块级元素的宽度设置多窄，它都会独占一行。内联元素会在所处的包含元素内自左向右水平分布显示，超出一行后，会自动自上而下换行显示，然后继续自左向右按顺序流动，依次类推。
2.2 浮动布局
标准布局不能完全满足网页设计的需求，有时设计需要把两个或者多个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属性来控制元素的层级顺序实现想要的效果。在实际应用中相对定位很少单独使用，相对定位一般作为祖先元素的定位，从而辅助设置其子孙元素的绝对定位。
3 DIV+CSS布局要注意的问题
页面的整体布局一般都采用标准流方式，当页面中有多个块元素要在一行显示时，可通过浮动布局和定位布局来实现，采用浮动布局，要注意清除对后面元素的影响，定位布局通常设置祖先元素的相对定位作为参考对象，即祖先元素必须拥有定位position属性，属性值为relative或absolute，其次要设置绝对定位的坐标值，参考点是祖先元素4个顶点中的任意一点，只能设置两个值即水平方向:left或right;垂直方向:top或bottom。
4 结语
使用DIV+CSS布局可以完美地实现结构、表现的分离，DIV的主要作用是把页面分割成一个个区域，然后运用标准布局、浮动布局、定位布局三种布局方式实现页面的结构，CSS对设置每一个区域的样式以及区域内网页元素的样式。DIV+CSS的布局方式使得网页的开发速度、执行效率以及代码的可读性都有了很大的提高，但如果要熟练的运用DIV+CSS的布局完整页面需要不停的学习和积累经验。
参考文献
[1]李居兰.谈网页设计常用的布局方法[J].计算机产品与流通,2019(11):253.
[2]黄楚鹏.基于CSS页面布局的网页设计[J].电脑知识与技术,2017,13(04):45+55.
[3]雷烨.运用DIV+CSS技术对网页进行布局[J].电脑知识与技术,2016,12(07):212-213.
点击查看>>网页设计与制作论文(优秀范文8篇)其他文章
智能推荐
动画：这一次用动画搞懂递归！_php 递归 动画 详解-程序员宅基地
文章浏览阅读1w次，点赞197次，收藏282次。递归这玩意儿，尤其是对于初学者，在数据结构和算法中归为“玄学”一类。咳咳，如果今天鹿哥能把这玄学的玩意儿讲明白，岂不是要上天。同样讲不明白的后果，鹿哥将会被后台的石锤大队石锤…其实不学递归也没啥，但是学到后边会发现，什么 0-1 背包问题（动态规划内容，也可以用递归解决）、深度广度优先遍历、八皇后问题，回溯算法等，反正各种内容都会涉及到递归。所以，今天放句狠话，必须搞它，搞的它明明白白的。..._php 递归 动画 详解
CSS 画 iPhone XR_前端仿iphonexr手机边框样式-程序员宅基地
文章浏览阅读438次。用CSS简单实现 iPhone XR 低仿图_前端仿iphonexr手机边框样式
type类型为number的input标签可以输入字母e_vue input type number 为什么可以输入e-程序员宅基地
文章浏览阅读5.3k次，点赞4次，收藏5次。关于< input type=“number” />可以输入字母e！！！今天偶然间发现一个神奇的问题：一个type属性值设置为number类型的input标签可以输入字母e|E <input type="number" class="form-control" placeholder="number">主要原因是：e在数学上代表的是无理数，是一个无限不循环的小数，..._vue input type number 为什么可以输入e
关于Bundle Adjustment(BA)的直观理解_ba和重投影的关系-程序员宅基地
文章浏览阅读1w次，点赞34次，收藏106次。关于Bundle Adjustment的直观理解前言BA的作用投影特征匹配重投影重投影误差最小化重投影误差参考文献前言学习SLAM最大的一个问题就是知识点太多，学完前面又忘记后面，而且脑子总是很混乱，还经常看不懂。今天刚搞懂了Bundle Adjustment的原理，马上过来记录一下，以后忘记还可以回来看看。本文没有公式的证明，只是通俗的理解Bundle Adjustment到底是什么，这需..._ba和重投影的关系
STM32CUBEMX_H750_NAND_FLASH_cubemx nand flash-程序员宅基地
文章浏览阅读1.4k次。STM32CUBEMX_H750_NAND_FLASHNAND FLASH信号线NAND FLASH存储结构需要确定plane block page个数 NAND FLASH最小擦除单位是blockNAND FLASH 由2部分组成：数据存储区（data area）和备用区域(spare area)数据存储区大小为 2K 字节，备用区域大小为 64 字节。我们存储的有效数据，一般都是存储在数据存储区（ data area）。备用区域（ spare area），一般用来存放 ECC（ Error_cubemx nand flash
微信小程序对接微信支付所遇问题合集-程序员宅基地
文章浏览阅读873次，点赞19次，收藏28次。后端使用会简单很多，可以看看在第五个大标题上。1. 以下所有问题均基于uniapp开发微信小程序。2. 所使用的工具版本为：1、微信开发者工具：稳定版2、uniapp工具：HBuilder X 3.99；3、后端程序语言：java；
随便推点
安装和配置OpenCV-Python和OpenCV-Contrib-Python的常见问题和解决方法_pip install opencv-contrib-python-程序员宅基地
文章浏览阅读3.3k次，点赞3次，收藏11次。在使用Python进行计算机视觉项目时，安装和配置OpenCV-Python和OpenCV-Contrib-Python是常见的需求。解决方法：这可能是由于安装路径未正确配置导致的。可以尝试重新安装OpenCV-Python和OpenCV-Contrib-Python包，并确保依赖库文件正确安装。希望本文能够帮助你解决安装和配置OpenCV-Python和OpenCV-Contrib-Python的常见问题。这将下载并安装最新版本的OpenCV-Python和OpenCV-Contrib-Python包。_pip install opencv-contrib-python
jar中没有主清单属性-程序员宅基地
文章浏览阅读90次。在导出jar时指定主类位置或手动配置jar包中的MANIFEST.MF文件：添加Main-Class: gui参考：JAVA环境变量CLASSPATH.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;PATH.;%JAVA_HOME%\jre\bin;%JAVA_HOME%\b...
介绍两款在线数学公式编辑器-程序员宅基地
文章浏览阅读1.1k次。[size=medium]当然了，在线的不能像Math Type那样，可以随心所欲的编辑公式。这两款都是用一种特定的格式的表达式来表达特定的数学符号，比如：[/size][code="java"]{a}_{b}+\int_{q}^{e}-\lambda *\kappa [/code][size=medium]就会输出对应的公式：[/size][img]/upload/attachm..._在线可复制公式编辑
苹果手机各种兼容性问题：滑动，背景图片不显示，input 禁止非数字输入，position定位，隐藏input光标等_height:100%图片在苹果手机中无效-程序员宅基地
文章浏览阅读1.7k次，点赞3次，收藏2次。每次做移动端项目，到了提测阶段最让我忐忑的还是测试的各种版本的IOS手机，尤其是那只苹果se系统版本贼低的神机。 苹果手机 overflow-y: auto 滑动不了或者滑动卡的问题 -webkit-overflow-scrolling: touch; 这行代码启用了硬件加速特性，所以滑动很流畅。但这属性会相对耗费更多内存 手机端：使页面不能滑动 ..._height:100%图片在苹果手机中无效
linux命令 linux目录结构，cat，more，less，head，tail，wc，grep，gzip，bzip2，tar，zip_linux的cat查看目录-程序员宅基地
文章浏览阅读225次。w：只显示全字符合的列。-o --------精确匹配所输入的匹配项，然后挨个列出，经常搭配wc -l使用，显示文章中一共匹配到了多少次。tail -5f /var/log/messages--------跟踪messages里面的最后5行内容。拓展显示5到15行内容 --------tail -n +5 999999 | head -n -5。tail -f 文件名------------------//跟踪文件尾部内容的动态更新。head -n 文件名…-------------//n为行数。_linux的cat查看目录
IDEA使用插件JRebel热部署失败的问题排查_java热部署失败 查看多出来的方法-程序员宅基地
文章浏览阅读1.1w次。IDEA 使用JRebel进行热部署。IDEA同时部署多个tomcat应用，端口映射配置。JRebel热部署插件失效。_java热部署失败 查看多出来的方法