CSS Div网页页面合理布局中的构造与主要表现

日期:2021-03-16 类型:科技新闻 

关键词:h5平台,手机端网页,手机端网页模板,免费的h5场景制作平台,h5制作工具


在Web规范中1个很关键的定义便是强调网页页面的构造与主要表现分离出来。说的通俗化1点便是XHTML中应当沒有款式化的物品,并且Web在访问器中除內容外都应当由CSS主要表现,这包含合理布局与其它款式。1旦1个规范的XHTML编码写完以后,那末CSS能够完成实际上百变脸孔。实际上XHTML是1个演员,CSS是编剧,XHTML演甚么人物角色,都由CSS来决策的。
这听起来好像有点理想化现实主义,完成起来好像就沒有那末非常容易了。但是我還是想根据1个简易的事例来讲难题。
大家在设计方案网页页面的情况下遵照的1个标准便是:关键內容最先载入,即将內容稍后载入。因而大家会发现像我的blog1样,主內容编码是写在侧面栏前面的。可是大家却能够根据CSS使侧面栏坐落于左边,假如不要看编码只看在网页页面中的主要表现,这和先载入侧面栏沒有甚么不一样。这便是构造和主要表现分离出来的益处。
假定大家有1个3栏的合理布局,在其中两个是主內容地区,1个是侧面栏的次內容地区。那末依照上面的标准,大家应当把两个主內容地区的编码写在侧面栏次內容地区的前面,这样访问器才会最先载入她们。那末大家就要搭建下面的编码段:
<div id="content">
<div id="primaryContent"></div>
<div id="secondaryContent"></div>
<div id="sideContent"></div>
</div>
前面早已说过,构造和主要表现分离出来的益处便是大家能够随意地分配这3栏的部位。例如大家要把“sideContent”放在网页页面的左边,主內容区坐落于正中间和左边,另外栏与栏之间有10px的间隔。大家设置网页页面宽度为760px,扣减两个10px的间距,那末內容区的共有740px的宽度,大家能够设置请內容区为290px,侧面栏为160px。因而有
#primaryContent {
float:left;
width:290px;
height:300px;
}
#secondaryContent {
float:left;
width:290px;
height:300px;
}
#sideContent {
float:left;
width:160px;
height:300px;
}
注:以便演试便捷沒有提升编码。
float:left为使3个div元素水平对齐的常见方式。这样大家预览网页页面的情况下,3个div便会出現在同1行内。
接下来,大家要挪动它们的部位。把primaryContent挪动到160 10px的部位(10px)为间隔,那末能够设定为
margin-left:170px;
把sendcondary依此向右挪动,和primaryContent的间距也是10px,必须
margin-left:10px;
那末这个时sideContent早已被挤出content了,而且其左侧缘恰好是content的右侧缘,因而大家要应用负的边距把它拉返回一切正常部位:
margin-left:⑺60px;
这样部位就恰好了。
(自身查询运作实际效果)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> div css合理布局中的构造和主要表现分离出来 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF⑻" />
<style type="text/css">
body { font-size:middle;font-family:Tahoma,Arial, Helvetica, sans-serif,"雅黑","宋体"; background-color:#999;}
div { background-color:#ccc; }
#wrap {
width:760px;
padding:10px;
margin:0 auto;
background-color:#fff;
}
#header {
height:100px;
}
#content {
height:300px;
margin-top:10px;
background-color:#fff;
}
#primaryContent {
float:left;
height:300px;
width:290px;
margin-left:170px;
}
#secondaryContent {
float:left;
height:300px;
width:290px;
margin-left:10px;
}
#sideContent {
float:left;
height:300px;
width:160px;
margin-left:⑺60px;
}
#footer {
height:100px;
margin-top:10px;
}
pre { font-family:tahoma; }
</style>
</head>
<body>
<div id="wrap">
<div id="header">header
</div>
<div id="content">
<div id="primaryContent"><h3>主內容区1</h3>
这是主內容区,以便提高客户体验,应用关键內容最先显示信息,它常常在放在其它內容的前面。
<pre>
#primaryContent {
float:left;
height:300px;
width:290px;
margin-left:170px;
}</pre>
</div>
<div id="secondaryContent"><h3>主內容区2</h3>这是主內容区,以便提高客户体验,应用关键內容最先显示信息,它常常在放在其它內容的前面。
<pre>
#secondaryContent {
float:left;
height:300px;
width:290px;
margin-left:10px;
}</pre>
</div>
<div id="sideContent"><h4>次內容区</h4>这是即将內容地区,它常常出現在网页页面的后部。
<pre>
#sideContent {
float:left;
height:300px;
width:160px;
margin-left:⑺60px;
}
</pre>
</div>
</div>
<div id="footer">footer <br/><a href="http://www.dudo.org/" style="color:#000;text-decoration:none;">http://www.dudo.org/</a>
</div>
</div>
</body>
</html>
(调整bug,请应用Internet Explorer 7、Firefox等访问器查询)
针对两样1段XHTML编码,大家只必须改动CSS款式便可以完成多种多样合理布局:
编码1(自身查询运作实际效果)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> div css合理布局中的构造和主要表现分离出来 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF⑻" />
<style type="text/css">
body { font-size:middle;font-family:Tahoma,Arial, Helvetica, sans-serif,"雅黑","宋体"; background-color:#999;}
div { background-color:#ccc; }
#wrap {
width:760px;
padding:10px;
margin:0 auto;
background-color:#fff;
}
#header {
height:100px;
}
#content {
height:300px;
margin-top:10px;
background-color:#fff;
}
#primaryContent {
float:left;
height:300px;
width:290px;
}
#secondaryContent {
float:left;
height:300px;
width:290px;
margin-left:180px;
}
#sideContent {
float:left;
height:300px;
width:160px;
margin-left:⑷60px;
}
#footer {
height:100px;
margin-top:10px;
}
pre { font-family:tahoma; }
</style>
</head>
<body>
<div id="wrap">
<div id="header">header
</div>
<div id="content">
<div id="primaryContent"><h3>主內容区1</h3>
这是主內容区,以便提高客户体验,应用关键內容最先显示信息,它常常在放在其它內容的前面。
<pre>
#primaryContent {
float:left;
height:300px;
width:290px;
}</pre>
</div>
<div id="secondaryContent"><h3>主內容区2</h3>这是主內容区,以便提高客户体验,应用关键內容最先显示信息,它常常在放在其它內容的前面。
<pre>
#secondaryContent {
float:left;
height:300px;
width:290px;
margin-left:180px;
}</pre>
</div>
<div id="sideContent"><h4>次內容区</h4>这是即将內容地区,它常常出現在网页页面的后部。
<pre>
#sideContent {
float:left;
height:300px;
width:160px;
margin-left:⑷60px;
}
</pre>
</div>
</div>
<div id="footer">footer <br/><a href="http://www.dudo.org/" style="color:#000;text-decoration:none;">http://www.dudo.org/</a>
</div>
</div>
</body>
</html>
编码2(自身查询运作实际效果)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> div css合理布局中的构造和主要表现分离出来 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF⑻" />
<style type="text/css">
body { font-size:middle;font-family:Tahoma,Arial, Helvetica, sans-serif,"雅黑","宋体"; background-color:#999;}
div { background-color:#ccc; }
#wrap {
width:760px;
padding:10px;
margin:0 auto;
background-color:#fff;
}
#header {
height:100px;
}
#content {
height:300px;
margin-top:10px;
background-color:#fff;
}
#primaryContent {
float:left;
height:300px;
width:290px;
}
#secondaryContent {
float:left;
height:300px;
width:290px;
margin-left:10px;
}
#sideContent {
float:left;
height:300px;
width:160px;
margin-left:10px;
}
#footer {
height:100px;
margin-top:10px;
}
pre { font-family:tahoma; }
</style>
</head>
<body>
<div id="wrap">
<div id="header">header
</div>
<div id="content">
<div id="primaryContent"><h3>主內容区1</h3>
这是主內容区,以便提高客户体验,应用关键內容最先显示信息,它常常在放在其它內容的前面。
<pre>
#primaryContent {
float:left;
height:300px;
width:290px;
}</pre>
</div>
<div id="secondaryContent"><h3>主內容区2</h3>这是主內容区,以便提高客户体验,应用关键內容最先显示信息,它常常在放在其它內容的前面。
<pre>
#secondaryContent {
float:left;
height:300px;
width:290px;
margin-left:10px;
}</pre>
</div>
<div id="sideContent"><h4>次內容区</h4>这是即将內容地区,它常常出現在网页页面的后部。
<pre>
#sideContent {
float:left;
height:300px;
width:160px;
margin-left:10px;
}
</pre>
</div>
</div>
<div id="footer">footer<br/>
<a href="http://www.dudo.org/" style="color:#000">http://www.dudo.org/</a>
</div>
</div>
</body>
</html>
实际上还能完成更繁杂的合理布局。我举这个事例自然并不是在讲合理布局的技能,只是说说为何1下强调构造与主要表现分例,光说不做可不太好了解它的最高境界。