技术标签： html中的分离式布局
摘 要 信息科学技术的进步使得互联网技术行业快速发展起来。其中网页设计作为互联网技术行业中重要的一部分，应用先进技术提高其工作效率与工作质量具有重要意义。DIV+CSS技术在网页布局中的优势作用使得其在网页设计与开发中应用越来越广泛。基于此，本文首先对DIV+CSS技术进行概述，并对其在网页布局中的优势与应用原理进行分析，最后举出网页设计的实例对该项技术的具体应用进行分布阐述。
【关键词】DIV CSS 网页布局 实践
当前，我国的信息技术得到了突飞猛进的发展，逐渐渗透到人们的生活与工作中，互联网已经成为不可或缺的重要工具。随着互联网的不断发展，网页开发与设计的功能日益强大。传统表格布局技术一些弊端的凸显使得DIV+CSS技术的应用逐渐增强，并且受到互联网行业的青睐。该种布局技术能够准确定位网页设计中的对象，提高网页传输与下载的速率，并且能够降低网页维护的难度，简化操作流程。
1 DIV+CSS技术概述
1.1 DIV技术
作为DIV+CSS技术中不可缺少的一部分，DIV也是设计、开发网页过程中的应用语言、标记元素，为文档提供布局结构。DIV起始到结束标签之间包含的内容都是HTML文档中大块的构成部分，还能把其称作定位技术，控制整个设计与开发中的元素。
1.2 CSS技术
即为Cascading Style Sheet(层叠样式表)，在设计网页时，CSS能够对页面的颜色、布局与背景等进行有效控制，丰富页面效果。另外，还能在一定程度上简化操作流程，也能提高网页语言的简洁性。在传统的表格布局技术中，也曾使用CSS技术。
1.3 DIV+CSS技术
该种布局技术进一步规范网页设计中的结构，规整页面中的元素，分离内容与样式，使之成为单独个体。另外，在将DIV与CSS进行合并的过程中，能够提高网页操作的灵活性与方便性。
2 DIV+CSS技术在网页布局中的优势
2.1 分离内容与样式，精简代码
将内容与样式进行分离，是该种布局技术最为显著的特征。样式由独立样式文件进行放置，链接到html文件中，通过对外部样式表里CSS样式属性的修改，就可以改变整个站点的版式。通过对应用CSS与未应用CSS技术的排版代码进行分析，能够发现应用CSS样式进行排版的代码要简洁得多。由此可见，CSS布局方式具有明显的优势。
2.2 浏览页面更快速
相较于以往表格嵌套布局，应用该种布局技术能够显著提高网页浏览与加载的速度。这是因为在达到相同页面效果的情况下，该种布局技术的页面容量小于表格排版。
2.3 利于搜索引擎爬虫
利用该种布局技术，结构清晰，容易被搜索引擎搜索到，并且使排名结果得到上升。另外，应用CSS能够突出网页中的正文部分，方便搜索引擎进行采集与寻找。
2.4 方便进行网页维护
传统表格布局，页面需要修改时，往往需要改动大量代码，工作量巨大，而DIV+CSS技术在网页布局中的应用能够便于控制样式，降低网页维护的难度，并且便于进行修改。
3 DIV+CSS技术在网页布局中应用原理
3.1 盒子模型
该种布局技术的核心为CSS盒子模型，也是网页布局的基础。HTML文档之中包含的每一个盒子都能看做由内容、填充、边框与边界四部分组成。每一个部分都具有四个边：top、right、bottom与left，可以单独修改一个边，也可以同时修改全部边。
3.2 定位和浮动
CSS中包括三种基本的定位机制：普通流、定位和浮动。普通流就是元素按照其在HTML中的位置先后次序依次@示，行内元素共处一行之中，块级元素占一行或多行。相对定位与绝对定位应用比较广泛。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。若使用绝对定位方式，绝对定位使元素的位置与文档流无关，因此不占据空间。若一个盒子设置成浮动定位，浮动将元素从原来的占位中删除，使元素可以左右移动，直到它的外边框边缘碰到包含块或另一个浮动元素的边缘。若是需要清除临近元素的浮动，可以利用clear属性进行清除。
4 DIV+CSS技术在网页布局中的实践应用
4.1 网页布局、规划
网页制作的基础为效果图的制作，不仅需要迎合建设方的需求，还要满足用户访问的需要。得到一张美工图片后，应该从上下、上中下、左右等展开思考。例如，将一个布局模式为上中下的网页作为实例进行分析，该网页中含有网站的标识与导航条，在布局中能够应用DIV技术，采用左右浮动进行定位。选取一张视觉效果好的图片作为Banner条，使用DIV标签进行定位，使用独立DIV对中间部位进行控制。该网页底部存在版权方面的信息，也使用DIV标签实现布局。
将DIV+CSS技术的网页布局理念作为依据对整个主页的结构进行划分，得出DIV框架的结构图，将此图作为显示出每个区块嵌套关系的依据。
4.2 设计网页布局的代码
在美国梦想编织者应用软件中，新建立一个HTML文档，同时建立一个外部文件CSS，再制作该外部文件的链接，插入到之中。在HTML文档中将DIV基本结构插入到var _userid = '';var _siteid =669;var _istoken = 1;var _model = 'Model03'; WebPageSpeed =313; UrchinTrack();中，编写适合的代码进行操作。
4.3 设计CSS样式代码
通过CSS样式，可以控制DIV的位置、宽度、高度，边框等属性，改变字体，字号，颜色，背景图片等用以达到设计图的效果。
5 结语
本文举出应用DIV+CSS技术的网页布局实例，对该种布局技术的实践应用进行深入探讨，对网页制作过程进行简要介绍。DIV+CSS技术应用在网页布局中，不仅能够分离内容与样式，还能显著提高搜索引擎的爬行效率与友好度。以往使用的表格布局技术操作难度低、网页制作比较快，并且便于初学者控制，针对网页设计入门而言较为适用。但是网络技术的不断创新与发展使得表格布局方式逐渐被淘汰，虽然DIV+CSS布局技术应用难度大于表格布局，但是针对该项技术的开发、重构与Web标准相符，在网站设计中具有广阔的应用前景。
参考文献
[1]刘小艮.网页设计中DIV+CSS布局技术的应用实践探讨[J].无线互联科技，2015(23)：34-35.
[2]洪秀金.DIV_CSS技术在网页布局中的应用[J].电子技术与软件工程，2016(12)：30-30.
[3]吕颍颍.CSS+DIV布局技术在网页制作中的应用[J].时代报告：学术版，2015(04)：268-268.
[4]田佳妮，翟悦.DIV+CSS在网页布局中的应用研究[J].电脑知识与技术，2015(02)：181-191.
作者单位
交通运输部科学研究院 北京市 100029
文章浏览阅读7.4k次，点赞2次，收藏5次。http://www.cnblogs.com/craftor/archive/2012/06/28/2567259.html大多数人都知道，PADS中导入DXF文件，然后转换成板框，是很方便的。AD也同样可以做到。PADS导入DXF见：http://www.cnblogs.com/craftor/archive/2012/01/14/2322446.html 1_ad24导入的孔怎么转换为板框的孔
文章浏览阅读1.6k次。1.概述官网：https://www.elastic.co/guide/en/elasticsearch/reference/current/ignore-malformed.html#ignore-malformed我们经常碰到一些内容不规范或者格式不对的数据，例如某个IP字段的里出现"UNKNOWN"，某个数字字段出现"-"。如果在这些字段上已经设置了明确的类型，比如"ip"或者"float"，字段中出现了非该类型的值，ES会抛出异常并丢弃整条数据。我们可以在该字段上设置"ignore_malf._es 查询时忽略格式不正确的ip
文章浏览阅读1.9k次。通常来说,在一个项目中我们会使用到多个dao,比如在一个信息管理系统中,有 UserDao/ MessageDao等; 每个 dao 都有相同的 CRUD 代码,每个 dao 去写也是可以的,但是代码量会偏多,代码结构不够好,显得比较臃肿;实际上可以通过泛型来抽取出一个 BaseDao,这个 BaseDao 包含了各个 dao 的增删改查代码,创建新的 dao 时继承BaseDao,就可以减少很_优化ssm项目的dao层
文章浏览阅读1.7k次。Bookmarks Organizer Chrome开发背景很多人都会随手保存书签方便下次使用，但你书签保存多了就知道什么叫做灾难了，很多的书签、还有一些是重复或者链接失效的书签，找起来特别麻烦，书签太多，不好管理怎么办？Bookmarks Organizer帮助你管理你的书签。Bookmarks Organizer有适用于Chrome浏览器和firefox浏览器两种，虽然名字相同，而且同样是管理..._bookmarks organizer
文章浏览阅读112次。MultiClassifier: A combination of DPI and ML for application-layer classification in SDN来源：International Conference on Systems and Informatics发表时间：2014针对问题在传统校园网络中，应用层分类是通过支持应用层分类的特定设备（防火墙）来实现，但是..._sdn引用文献
文章浏览阅读3k次，点赞5次，收藏9次。硬件、SDK、插件准备见这个文章：Unity体感应用开发——Kinect V2 获取彩色摄像头数据抠像，英文叫BackgroundRemoval。即背景移除。在SDK Browser的demo里面叫Coordinate Mapping，即坐标映射。从名字可以看出它的目的和原理，目的就是将图像中的人物与背景分离，将人物图像剥离出来。实现的原理就是将BodyIndexImage（一个512..._unity kinect抠像
文章浏览阅读370次。前言：@Api，@ApiOperation，@ApiImplicitParam，@ApiModelProperty，@ApiIgnore正文：一，Controller层@ApiIgnore@CrossOrigin(origins= "*")@RestController@Api(tags= {"文章接口"})public classArticleController {@ApiIgnore@Api..._io.swagger.v3.oas @apiignore
文章浏览阅读344次。问题因此，您想(分别)记录一个进程或子进程的stdout和stderr，如果您未记录任何内容，则输出不会与在终端中看到的输出不同。似乎很简单，不是吗？不幸的是，似乎不可能为这个问题写一个通用的解决方案，该解决方案适用于任何给定的流程...背景管道重定向是一种分离stdout和stderr的方法，允许您分别记录它们。不幸的是，如果将stdout / err更改为管道，则该过程可能会检测到该管道不是t..._subprocess.popen stdout和stderr定向到同一输出
文章浏览阅读2.1k次。jQuery学习点滴 在学习之余对jquery提供的方法进行分类总结，下文有些抄摘w3cschool，只为以后使用起来方便查找！jQuery 语法jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。基础语法是：$(selector).action()美元符号定义 jQuery 选择符（selector）“查询”和“查找” HTML 元素 jQ_"$(\"p\").css(\"color\")"
文章浏览阅读675次。Note: 只支持Android 6.0 以上dependencies {def security_version = "1.0.0-alpha02"implementation "androidx.security:security-crypto:$security_version"}文件内容操作e.g : 文件写入private fun writeFile(){val key = Master..._androidx.security:security-cypto
文章浏览阅读516次。我们在多模块项目开发过程中，会遇到这样的场景，工程里依赖了一个自己的或者其他同事的 模块，有时候为了开发调试方便，经常会把 改为本地源码依赖，开发完毕并提交的时候，会再修改回 依赖，这样就会很不方便，开发流程图示如下：一开始我们通过在 的 里的 判断如果是需要本地依赖的 ，就替换为 依赖，伪代码如下：这样就可以不用每次提交代码还要修改回 依赖，但是如果其他模块如果也依赖了该 模块，就会出现问题，虽然可以继续修改其他模块里的依赖方式，但是这样就会有侵入性，而且不能彻底解决问题，仍然有可能出_dependencysubstitution
文章浏览阅读3.2k次。cornexpression表达式详解：1、格式cron一共有7位，但是最后一位是年，可以留空，所以我们可以写6位：字段允许值允许特殊字符秒0-59, - * /分0-59, - * /小时0-23, - * /日1-31, - * ? / L W C月1-12或JAN-DEC, - * /周1-7或SUN-SAT,..._corn下午2点如何表达