DIV CSS常见的网页页面合理布局编码

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

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

单行1列
下列是引入片断:
body{margin:0px;padding:0px;text-align:center;}
#content{margin-left:auto;margin-right:auto;width:400px;width:370px;}
两行1列
下列是引入片断:
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;width:370px;}
3行1列
下列是引入片断:
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}
#content-mid{margin-left:auto;margin-right:auto;width:400px;width:370px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;width:370px;}
单行多列
下列是引入片断:
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:410px;}
两行多列
下列是引入片断:
#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:410px;}
3行多列
下列是引入片断:
#header{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:410px;}
#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
单行3列
肯定精准定位
下列是引入片断:
#left{position:absolute;top:0px;left:0px;width:120px;}
#middle{margin:20px190px20px190px;}
#right{position:absolute;top:0px;right:0px;width:120px;}
float精准定位1
xhtml:
下列是引入片断:
<divid="warp">
<divid="column">
<divid="column1">这里是第1列</div>
<divid="column2">这里是第2列</div>
<divclass="clear"></div>
</div>
<divid="column3">这里是第3列</div>
<divclass="clear"></div>
</div>
CSS:
下列是引入片断:
#wrap{width:100%;height:auto;}
#column{float:left;width:60%;}
#column1{float:left;width:30%;}
#column2{float:right;width:30%;}
#column3{float:right;width:40%;}
.clear{clear:both;}
float精准定位2
xhtml:
下列是引入片断:
<divid="center"class="column">
<h1>Thisisthemaincontent.</h1>
</div>
<divid="left"class="column">
<h2>Thisistheleftsidebar.</h2>
</div>
<divid="right"class="column">
<h2>Thisistherightsidebar.</h2>
</div>
CSS:
下列是引入片断:
body{margin:0;padding-left:200px;padding-right:190px;min-width:240px;}
.column{position:relative;float:left;}
#center{width:100%;}
#left{width:180px;right:240px;margin-left:⑴00%;}
#right{width:130px;margin-right:⑴00%;}
两行3列
xhtml:
下列是引入片断:
<divid="header">这里是顶行</div>
<divid="warp">
<divid="column">
<divid="column1">这里是第1列</div>
<divid="column2">这里是第2列</div>
<divclass="clear"></div>
</div>
<divid="column3">这里是第3列</div>
<divclass="clear"></div>
</div>
CSS:
下列是引入片断:
#header{width:100%;height:auto;}
#wrap{width:100%;height:auto;}
#column{float:left;width:60%;}
#column1{float:left;width:30%;}
#column2{float:right;width:30%;}
#column3{float:right;width:40%;}
.clear{clear:both;}
3行3列
xhtml:

下列是引入片断:
<divid="header">这里是顶行</div>
<divid="warp">
<divid="column">
<divid="column1">这里是第1列</div>
<divid="column2">这里是第2列</div>
<divclass="clear"></div>
</div>
<divid="column3">这里是第3列</div>
<divclass="clear"></div>
</div>
<divid="footer">这里是底部1行</div>
CSS:
下列是引入片断:
#header{width:100%;height:auto;}
#wrap{width:100%;height:auto;}
#column{float:left;width:60%;}
#column1{float:left;width:30%;}
#column2{float:right;width:30%;}
#column3{float:right;width:40%;}
.clear{clear:both;}
#footer{width:100%;height:auto;}
PS:这里列出的是常见的事例,而非科学研究之用,对1每一个盒子,都沒有设定margin,padding,boeder等特性!