DIVCSS常用的网页布局代码

margin

109 浏览量更新于2023-05-04 1 收藏 25KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

DIV CSS常用的网页布局代码常用的网页布局代码

单行一列单行一列

以下是引用片段：以下是引用片段：

body{margin:0px;padding:0px;text-align:center;}

#content{margin-left:auto;margin-right:auto;width:400px;width:370px;}

两行一列两行一列

以下是引用片段：以下是引用片段：

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;}

三行一列三行一列

以下是引用片段：以下是引用片段：

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;}

三行两列三行两列

以下是引用片段：以下是引用片段：

#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;}

单行三列单行三列

绝对定位

以下是引用片段：以下是引用片段：

#left{position:absolute;top:0px;left:0px;width:120px;}

#middle{margin:20px190px20px190px;}

#right{position:absolute;top:0px;right:0px;width:120px;}

float定位一定位一

xhtml:

以下是引用片段：以下是引用片段：

<divid="warp">

<divid="column">

<divid="column1">这里是第一列</div>

<divid="column2">这里是第二列</div>

<divclass="clear"></div>

</div>

<divid="column3">这里是第三列</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定位二定位二

xhtml:

以下是引用片段：以下是引用片段：

<divid="center"class="column">

<h1>Thisisthemaincontent.</h1>

</div>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38590541

粉丝: 6
资源: 937

会员权益专享

DIV CSS常用的网页布局代码

DIV+CSS页面布局

CSS网页布局

DIV+CSS商业案例与网页布局源代码

利用div和css网页布局

div css布局大全

使用div+css布局

用div和css设计网页代码模板

利用div+css完成网页布局

css框架布局网页代码

使用div和css做一个网页布局 生成代码

css div布局效果图

利用DIV-CSS布局一个简单网页页面代码

html5网页设计作业div css

html div css设计简单网页

网页制作div+css

div+css五行两列布局

写一个利用div+css布局的页面完整代码

比flex更好用的css布局，CSS Grid 网格布局教程

使用div+css3来布局网页，设计一个登录页面实验中的操作操作步骤是什么，以及保证实验成功的关键问题是什么

制作一个学校的主页，使用CSS+DIV布局

会员权益专享

最新资源

使用div和css做一个网页布局生成代码