正文描述:《divcss在网页布局中的应用研究》由会员上传分享,免费在线阅读,更多相关内容在学术论文-天天文库。
1、DIV+CSS在网页布局中的应用研究摘要:网页布局对于网页的设计制作非常重要,DIV+CSS是目前网页设计中比较流行的一种页面布局方式。本文通过分析DIV+CSS布局技术优势,阐述了DIV、CSS的布局原理,并通过一个实例说明DIV+CSS布局的基本流程和使用技巧。关键词:DIV;CSS;网页布局;Web2.0标准;优势中图分类号:TP393文献标识码:A文章编号:1009-3044(2015)02-0181-02Abstract:Pagelayoutisveryimportantforthewebpagedesig
2、n.DIV+CSShavegraduallybecomethemostpopularpagelayouttechnology.ThispaperanalyzestheadvantagesofDIVandCSSlayoutandexplainsrelevantlayoutprinciples.Finally,weexplainimplementationmethodandskillswithaconcreteexample.Keywords:DIV;CSS;Pagelayout;Web2.0standard;advan
3、tage1引言随着网络技术的不断发展,早期的表格布局方式已经不能适用新的要求,许多网站设计师开始采用Web2.0标准[1],DIV+CSS网页布局技术已成为主流的应用模式,其结构清晰化、便于维护和修改,提高用户体验度等优势,已被业内广泛认可和应用。2DIV+CSS布局的优势(1)表现和内容相分离,代码精简结构和表现相分离[2],这正是CSS布局的特色所在,结构与表现分离后,CSS将样式部分单独放在一个独立的样式文件中,HTML文件只需提供网页内容,至于内容的表现形式完全由CSS来实现。这样代码才简洁,尤其是网站改版时
4、,只需修改CSS文件内容,HTML文件即可表现出不同的形式[3]。如下代码可以加深理解结构和表现相分离的含义。通过上例可以看出如果还有更多的图片列表,那么第二种CSS布局方法将更具优势。(2)提高页面浏览速度采用DIV+CSS布局的网页比传统表格嵌套布局的网页浏览、加载速度更快。针对同一个页面效果,一般DIV+CSS构造的页面容量均比表格排版容量小[3]。(3)方便搜索引擎的搜索采用DIV+CSS布局的网页有利于SEO优化。设计后的网页能够通过W3C验证,搜索引擎spider爬行效率将提高,并可能给予一个较高的排名结
5、果。同时由于CSS的引用使得网页中正文部分更为突出,更易于被搜索引擎采集搜录。(4)样式便于操作,网页便于维护DIV+CSS布局更便于样式的控制,使得网页的维护更加方便,也更加易于修改。3DIV+CSS的布局原理3.1盒子模型[4]CSS盒子模型是DIV+CSS的网页布局的核心。HTML文档中的每一个盒子都可以看成四部分组成:内容(content)、填充(padding)、边框(border)和边界(margin)。每个部分又派生出top、right、bottom、left四个分支属性,如图1所示。3.2常用的定位属
6、性在CSS中定位机制包括:标准流,定位和浮动。通过使用position属性,我们可以选择4种不同类型的定位,position属性值分别有:static、relative、absolute、fixedo其中relative(相对定位)与absolute(绝对定位)是最常用的两种定位方式。如果设定相对定位:元素实际上依然占据文档中的原有位置,只是视觉上相对于它在文档中的原有位置移动了。如果指定绝对定位时,元素就脱离了文档,即在文档中已当某个盒子设置为float浮动定位后,将使块级元素脱离普通文档流,浮动的框可以向左或向右
7、移动,直到它的外边缘碰到最近的父包含框或另一个浮动框的边框为止。其他邻近元素将占据其空间表现得就像浮动框不存在一样。可以通过clear属性清除邻近某侧其他元素浮动。4DIV+CSS布局应用实例采用DIV+CSS的网页布局思路如下:首先用DIV分块,定义语义结构;然后利用CSS定位和添加样式达到美化网页效果,如:加入背景、对齐、边框线条等;最后在CSS定义的盒子内添加相应的主体内容。下面以博客首页设计为例,通过调用外部CSS文件,实现如图2效果,很好的体现了web标准结构与内容相分离的思想。当没有导入CSS样式表文件时
8、,样例页面效果如图2所示,只是页面的“内容”。如果导入外部CSS文件后,页面呈现图3所示效果,如果导入不同的外部CSS文件,呈现出内容的展示效果会不同,DIV+CSS可以使得网页改版和维护更加方便。下面介绍设计的具体实现步骤。(1)使用DIV进行页面分块根据博客首页的内容需求对整体布局进行规划,页面大致分为顶部、导航、主体内容和底部版权四个部分
显示全部收起
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。