收藏
批改状态：合格
老师批语：总结的不错
页面主体内容的基本布局方式有：双飞翼布局：float+margin 及 圣杯布局：float+padding
我们常用的主体布局方式是双飞翼布局
主要布局思路：
一、用ul标签设置头部导航
二、直接用p标签设置底部元素
三、设置头部与底部的样式，样式相似，部分内容可通用
四、把主体内容分为三部分，中间主体部分用一个div class=wrap包裹
五、设置主体部分内容样式，并且浮动
六、把左右两部分内容浮动到相应位置上，中间部分用magin挤出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/0708style1.css"> <title>双飞翼</title> </head> <body> <div class="header"> <div class="header-content"> <ul class="nav"> <li class="item"><a href=""> 首页</a></li> <li class="item"><a href=""> 公司简介</a></li> <li class="item"><a href=""> 公司产品</a></li> <li class="item"><a href=""> 联系我们</a></li> <li class="item"><a href=""> 关于我们</a></li> </ul> </div> </div> <div class="container"> <!--中间内容--> <div class="wrap"> <div class="main">内容</div> </div> <!-- 左侧内容--> <div class="left">左侧</div> <!-- 右侧--> <div class="right">右侧</div> </div> <div class="footer"> <div class="footer-content"> <p> <a class="item2">友情链接:</a> <a class="item2" href="">南京分公司</a> <a class="item2" href="">西安分公司</a> <a class="item2" href="">上海分公司</a> </p> </div> </div> </body> </html>
css代码
.header,.footer{
background-color: lightgray;
}
.header .header-content {
width:1000px ;
height:60px;
background-color: black;
margin: 0 auto;
}
.header .header-content .nav{
list-style: none;
padding: 0;
margin: 0;
}
.header .header-content .nav .item a{
float: left;
padding: 0 20px;
line-height: 60px;
color: white;
text-decoration: none;
}
.header .header-content .nav .item a:hover{
background-color: red;
color: yellow;
font-size: 1.1rem;
}
.container{
width: 1000px;
min-height: 500px;
background-color: lightgray;
margin: 5px auto;
}
.footer{
margin-top: 0;
}
.footer .footer-content{
width:1000px ;
height:50px;
background-color: lightpink;
margin: 0 auto;
}
.footer .footer-content p{
text-align: center;
line-height: 50px;
}
.footer .footer-content p a {
padding: 0 20px;
color: black;
}
.footer .footer-content p a:hover {
color: white;
}
/*主体分割线*/
.wrap{
width:100%;
min-height: 500px;
background-color: lightgreen;
float: left;
}
.left{
background-color: lightblue;
min-height: 500px;
width: 200px;
float: left;
margin-left: -100%;
}.right{
background-color: lightblue;
min-height: 500px;
width: 200px;
float: left;
margin-left: -200px;
}
.main{
margin: 0 210px;
}总结：页面布局要先搭建好框架，然后再填写内容，调整样式
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
