Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 页面的基本布局--双飞翼布局的基本思路与实现代码--2017-07-08 22：:22
Blogger Information
Blog 11
fans 2
comment 0
visits 8251
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
页面的基本布局--双飞翼布局的基本思路与实现代码--2017-07-08 22：:22
烦帅不防晒
Original
630 people have browsed it

页面主体内容的基本布局方式有：双飞翼布局：float+margin  及  圣杯布局：float+padding   

我们常用的主体布局方式是双飞翼布局


1562691760265084.jpg

主要布局思路：

一、用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;

 }

总结：页面布局要先搭建好框架，然后再填写内容，调整样式

Correction status：qualified

Teacher's comments：总结的不错
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post