ScienceandApplication计算机科学与应用,2020,10
(2),303-311PublishedOnlineFebruary2020inHans./journal/csa/10.12677/csa.2020.102031 AnalysisofFixedandVariableWidthWebPageLayoutBasedonCSS+Div KuiGao,XiaocuiFu,WeiyanLiSchoolofInformationScienceandEngineering,ShandongAgriculturalUniversity,TaianShandong Received:Feb.1st,2020;epted:Feb.14th,2020;published:Feb.21st,2020 Abstract CSS+Divismonlyusedtechnologytorealizepagelayoutincurrentwebpagedesign,whichcanrealizefewerpagecodes,fasterreadingspeed,easierupdatingandricherpagelayouteffect.Bywayofexample,thispapergivestheusemethodandprecautionsofusingCSS+DivtechnologytorealizethefixedwidthandvariablewidthwebpagelayoutthroughthenumericalsettingofDivlabelwidth,equalproportionsetting,absolutepositioningmethodandimprovedfloatingmethodsetting,soastoachievethepurposeofmastering. Keywords CSS,Div,FixedWidthLayout,VariableWidthLayout,EqualRatio,ImprovedFloatingMethod 基于CSS+Div的固定宽度与变宽度网页布局剖析 高葵，付晓翠，李蔚妍山东农业大学信息科学与工程学院，山东泰安 收稿日期：2020年2月1日；录用日期：2020年2月14日；发布日期：2020年2月21日 摘要 CSS+Div是当前网页设计中实现页面布局的常用技术，可以实现页面代码更少，读取速度更快，更新更容易，页面布局效果更丰富。
本文通过举例，给出使用CSS+Div技术，通过Div标签宽度的数值设置，等比例设置，绝对定位法和改进浮动法设置实现固定宽度和变宽度网页布局的使用方法和注意事项，到 文章引用:高葵,付晓翠,李蔚妍.基于CSS+Div的固定宽度与变宽度网页布局剖析[J].计算机科学与应用,2020,10
(2):303-311.DOI:10.12677/csa.2020.102031 高葵等 达掌握的目的。
关键词 CSS，Div，固定宽度布局，变宽度布局，等比例，改进浮动法 Copyright©2020byauthor(s)andHansPublishersInc.ThisworkislicensedundertheCreativeCommonsAttributionInternationalLicense(CCBY4.0)./licenses/by/4.0/ Openess
1.引言 基于CSS+Div的排版是当前网页设计中实现页面布局的常用技术。
它使用……
(2),303-311PublishedOnlineFebruary2020inHans./journal/csa/10.12677/csa.2020.102031 AnalysisofFixedandVariableWidthWebPageLayoutBasedonCSS+Div KuiGao,XiaocuiFu,WeiyanLiSchoolofInformationScienceandEngineering,ShandongAgriculturalUniversity,TaianShandong Received:Feb.1st,2020;epted:Feb.14th,2020;published:Feb.21st,2020 Abstract CSS+Divismonlyusedtechnologytorealizepagelayoutincurrentwebpagedesign,whichcanrealizefewerpagecodes,fasterreadingspeed,easierupdatingandricherpagelayouteffect.Bywayofexample,thispapergivestheusemethodandprecautionsofusingCSS+DivtechnologytorealizethefixedwidthandvariablewidthwebpagelayoutthroughthenumericalsettingofDivlabelwidth,equalproportionsetting,absolutepositioningmethodandimprovedfloatingmethodsetting,soastoachievethepurposeofmastering. Keywords CSS,Div,FixedWidthLayout,VariableWidthLayout,EqualRatio,ImprovedFloatingMethod 基于CSS+Div的固定宽度与变宽度网页布局剖析 高葵，付晓翠，李蔚妍山东农业大学信息科学与工程学院，山东泰安 收稿日期：2020年2月1日；录用日期：2020年2月14日；发布日期：2020年2月21日 摘要 CSS+Div是当前网页设计中实现页面布局的常用技术，可以实现页面代码更少，读取速度更快，更新更容易，页面布局效果更丰富。
本文通过举例，给出使用CSS+Div技术，通过Div标签宽度的数值设置，等比例设置，绝对定位法和改进浮动法设置实现固定宽度和变宽度网页布局的使用方法和注意事项，到 文章引用:高葵,付晓翠,李蔚妍.基于CSS+Div的固定宽度与变宽度网页布局剖析[J].计算机科学与应用,2020,10
(2):303-311.DOI:10.12677/csa.2020.102031 高葵等 达掌握的目的。
关键词 CSS，Div，固定宽度布局，变宽度布局，等比例，改进浮动法 Copyright©2020byauthor(s)andHansPublishersInc.ThisworkislicensedundertheCreativeCommonsAttributionInternationalLicense(CCBY4.0)./licenses/by/4.0/ Openess
1.引言 基于CSS+Div的排版是当前网页设计中实现页面布局的常用技术。
它使用
标记将页面进行分区域，然后对各个区域进行CSS属性设置，最后再在各个区域中添加相应的内容。
利用CSS+Div排版的页面读取速度更快，更新更容易，页面布局效果更丰富。
CSS常用布局样式分为固定宽度布局和变宽度布局[1]。
固定宽度布局，在浏览器窗口大小变化的情况下，页面显示效果保持原样，不会变化，缺点是在浏览器窗口大小变化情况下，网页内容显示效果不全面。
变宽度布局，可以使内容的整体宽度随浏览器窗口宽度的变化而变化，浏览器窗口大小变化情况下，网页内容显示效果全面，变宽度布局更加灵活，实用性更强。
2.使用举例2.1.固定宽度布局 一般情况下，此类页面布局的列都有固定的宽度，在这里以经典的三行两列宽度固定布局为例讲解固定分栏布局。
例题1：完成页面，效果如下图
1。
Figure1.Weblayout1图
1.网页布局
1 对应的主要代码如下：doctypehtml> DOI:10.12677/csa.2020.102031 304 计算机科学与应用 高葵等固定宽度布局
#container{
/*页面顶部容器的CSS规则*/
width:900px;
/*设置元素宽度*/
margin:0auto;
/*设置元素自动居中对齐*/
}
#header{
background-color:#0F0;/*设置背景色*/
height:30px;
/*设置元素高度*/
}
#mainbox{
background-color:#cff;/*设置背景色*/
width:600px;/*设置元素宽度*/
height:300px;/*设置元素高度*/
float:left;/*设置左浮动*/
}
#sidebox{
width:300px;/*设置元素宽度*/
background-color:#ff0;/*设置背景色*/
float:right;/*设置右浮动*/
}
#footer{
background-color:#f0f;
height:30px;
clear:both;/*清除浮动效果*/
}
……
利用CSS+Div排版的页面读取速度更快，更新更容易，页面布局效果更丰富。
CSS常用布局样式分为固定宽度布局和变宽度布局[1]。
固定宽度布局，在浏览器窗口大小变化的情况下，页面显示效果保持原样，不会变化，缺点是在浏览器窗口大小变化情况下，网页内容显示效果不全面。
变宽度布局，可以使内容的整体宽度随浏览器窗口宽度的变化而变化，浏览器窗口大小变化情况下，网页内容显示效果全面，变宽度布局更加灵活，实用性更强。
2.使用举例2.1.固定宽度布局 一般情况下，此类页面布局的列都有固定的宽度，在这里以经典的三行两列宽度固定布局为例讲解固定分栏布局。
例题1：完成页面，效果如下图
1。
Figure1.Weblayout1图
1.网页布局
1 对应的主要代码如下：doctypehtml> DOI:10.12677/csa.2020.102031 304 计算机科学与应用 高葵等