div+css主页布局

最新推荐文章于 2022-08-05 16:56:29 发布

Andenn

最新推荐文章于 2022-08-05 16:56:29 发布

阅读量638

点赞数 1

分类专栏： DIV+CSS

本文链接：https://blog.csdn.net/andenn/article/details/13298023

版权

DIV+CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一个简单的主页框架布局。可以用于个人或集体展示的网页。

这一类的网页，是固定最外层盒子宽度的，然后盒子里先分几行盒子如： header navigator recommend search main footer;

接着在每个盒子里分别分两列，或者三列，或者更多。

两列的分法：左边的盒子左浮动，右边的盒子用margin-left控制其与父盒子左边的距离宽度最适应，高度固定值（用子内容来撑）。

三列的分法：左边的盒子左浮动，右边的盒子右浮动，中间的盒子，用margin-left margin-right 控制其与父盒子两边的距，宽度自适应，高度固定值（用子类容来撑）。

上面这张图的代码如下：

<!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>
       <meta http-equiv="content-type" content="text/html; charset=utf-8">
       <title>首页</title>
       <style type="text/css">
           body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px;}
           ul { list-style: none; }
           img { border-style: none; }

           body{width:960px;margin:2px auto;border:1px solid gray;font-size: 24px; font-weight: bold;}

            #header{background:#66aacc;margin-bottom:10px;}
           #logo{height:100px;width:200px;background:pink;float:left;}
           #userLogin{height:100px;width:200px;background:blue;float:right}
           #ad{margin-right:210px;margin-left:210px;background:yellow;height:100px;/*ad 不浮动，这个高度控制header盒子的总高度*/}

           #nev{height:60px;background:#ccc;margin-bottom:10px; line-height:60px;}

           #show{background:#9f9;margin-bottom:10px;}
           #newAction{height:300px;width:550px;float:left;background:#684;}
           #newRecommend{margin-left:560px;background:#486;height:300px;/*newRecommend不浮动，这个高度控制这个展示盒子的总高度*/}

           #search{height:50px;background:#ccc;margin-bottom:10px;line-height:50px}

           #main{background:#9ff;margin-bottom:10px;}
           #left{height:400px;width:300px;background:#0f0;float:left;}
           #right{height:400px;width:300px;background:#0f0;float:right;}
           #center{background:#0f0;margin:0 310px;height:400px;/*center不浮动，这个高度控制整个内容模块的总高度*/}

           #footer{background:gray;text-align:center;padding-top:20px;padding-bottom:40px;}

       </style>
   </head>
   <body>
       <div id="header">
           <div id="logo">logo</div>
           <div id="userLogin">用户登陆</div>
           <div id="ad">广告</div>
       </div>
       <div id="nev">导航条</div>
       <div id="show">
           <div id="newAction">幻灯片</div>
           <div id="newRecommend">推荐</div>
       </div>
       <div id="search">站内查询</div>
       <div id="main">
           <div id="left">内容块1</div>
           <div id="right">内容块2</div>
           <div id="center">内容块3</div>
       </div>
       <div id="footer">页脚</div>
   </body>
</html>
以上仅供参考，有什么不足之处，请留言指正，谢谢！

Andenn

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
div+css主页布局

一个简单的主页框架布局。可以用于个人或集体展示的网页。这一类的网页，是固定最外层盒子宽度的，然后盒子里先分几行盒子如： header navigator recommend search main footer;接着在每个盒子里分别分两列，或者三列，或者更多。两列的分法：左边的盒子做浮动，右边的盒子用margin-left控制其与父亲盒子的左边距离宽度最适应，高度固定值（用子内容
复制链接

扫一扫