search

博客列表 >通用的布局实战案例_0905

通用的布局实战案例_0905

Jet的博客
Jet的博客原创
2019年09月08日 15:48:09840浏览

1、完成一个网站的首页的完整内容布局

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <link rel="stylesheet" href="css/style.css"> -->
    <style>
        body,
        h1,
        p {
            margin: 0;
        }
        /* 头部信息 */
        
        .header {
            background-color: black
        }
        
        .header .content {
            width: 90%;
            background-color: black;
            margin: 0 auto;
            height: 60px;
            /* 防止导航溢出 自动移动到下面*/
            overflow: hidden;
        }
        
        .header .content .nav {
            margin: 0;
            padding: 0;
        }
        
        .header .content .nav .item {
            list-style: none;
        }
        
        .header .content .nav .item a {
            float: left;
            min-width: 80px;
            min-height: 60px;
            padding: 0 15px;
            line-height: 60px;
            text-decoration: none;
            text-align: center;
            color: white;
            font-size: 18px;
            font-family: 微软雅黑;
        }
        
        .header .content .nav .item a:hover {
            background-color: red;
            font-size: 1.3rem;
        }
        /* 底部信息 */
        
        .footer {
            width: 100%;
            background-color: #444444;
        }
        
        .footer .content {
            width: 90%;
            background-color: #444444;
            height: 60px;
            margin: 0 auto;
        }
        
        .footer .content p {
            line-height: 60px;
            text-align: center;
        }
        
        .footer .content p a {
            color: #999999;
            text-decoration: none;
        }
        
        .footer .content p a:hover {
            color: white;
        }
        /* 内容主题区 */
        
        .slider {
            width: 90%;
            height: 450px;
            margin: 0 auto;
        }
        
        .slider img {
            width: 100%;
            height: 100%;
        }
        
        .container {
            width: 90%;
            margin: 5px auto;
        }
        
        .left {
            min-height: 500px;
            width: 200px;
            background-color: seashell;
            margin-left: -100%;
            box-sizing: border-box;
            padding: 10px;
            border: 1px solid #c9c6c6;
        }
        
        .right {
            min-height: 500px;
            width: 200px;
            background-color: seashell;
            margin-left: -202px;
            border: 1px solid #c9c6c6;
            box-sizing: border-box;
            padding: 10px;
        }
        
        .main {
            width: 100%;
            min-height: 500px;
            box-sizing: border-box;
            padding-left: 200px;
            padding-right: 200px;
        }
        
        .left,
        .right,
        .main {
            float: left;
        }
        
        .container {
            overflow: hidden;
        }
        
        .left h1 {
            color: #555;
            font-size: 1.5rem;
            border-bottom: 1px solid #555555;
        }
        
        .left ul {
            margin-top: 20px;
            padding: 0;
        }
        
        .left ul li {
            list-style: none;
            padding: 5px 20px;
        }
        
        .left ul li a {
            text-decoration: none;
            color: #555555;
        }
        
        .left ul li a:hover {
            color: crimson;
            text-decoration: underline;
            cursor: pointer;
        }
        /**/
        
        .right h1 {
            color: #555;
            font-size: 1.5rem;
            border-bottom: 1px solid #555555;
        }
        
        .right ul {
            margin-top: 20px;
            padding: 0;
        }
        
        .right ul li {
            list-style: none;
            padding: 5px;
        }
        
        .right ul li a {
            text-decoration: none;
            color: #555555;
        }
        
        .right ul li a:hover {
            color: crimson;
            text-decoration: underline;
            cursor: pointer;
        }
        
        .plate {
            width: 100%;
            margin: 0 auto;
            overflow: hidden;
        }
        
        .plate .plate-title h1 {
            width: 95%;
            padding: 0;
            margin-left: 10px;
            margin-top: 10px;
            font-size: 24px;
            font-weight: bold;
            border-bottom: 1px solid #999999;
        }
        
        .plate .plate-list {
            padding: 0;
            margin: 0;
            border: 0;
        }
        
        .plate .plate-list .plate-box {
            width: 100%;
            min-width: 940px;
            margin-top: 5px;
            padding: 0;
        }
        
        .plate .plate-list .plate-box li {
            width: 290px;
            height: 200px;
            margin-left: 10px;
            list-style: none;
            float: left;
            border: 1px solid #ccc;
        }
        
        .plate .plate-list .plate-box .pic img {
            width: 290px;
        }
        
        .plate .plate-list .plate-box .banner {
            width: 75%;
            float: left;
        }
        
        .plate .plate-list .plate-box .button {
            width: 25%;
            float: right;
        }
        
        .plate .plate-list .plate-box .button .btn {
            border-radius: 15px;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <div class="header">
        <div class="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="slider">
        <img src="http://img.zcool.cn/community/01cd0258d93766a801219c77b2642c.jpg">
    </div>
    <div class="container">
        <div class="main">
            <div class="plate">
                <div class="plate-title">
                    <h1>热卖推荐</h1>
                </div>
                <div class="plate-list">
                    <ul class="plate-box">
                        <li>
                            <span class="pic"><img src="http://m.nanhutravel.com/LineImage/20113924_20190215105300853.jpg"></span>
                            <span class="banner">【爆款】沙巴.沙比岛5天游</span>
                            <span class="button"><input type="button" name="button" value="了解详情" class="btn"></span>
                        </li>
                        <li>
                            <span class="pic"><img src="http://m.nanhutravel.com/LineImage/20113924_20190215105300853.jpg"></span>
                            <span class="banner">【爆款】沙巴.沙比岛5天游</span>
                            <span class="button"><input type="button" name="button" value="了解详情" class="btn"></span>
                        </li>
                        <li>
                            <span class="pic"><img src="http://m.nanhutravel.com/LineImage/20113924_20190215105300853.jpg"></span>
                            <span class="banner">【爆款】沙巴.沙比岛5天游</span>
                            <span class="button"><input type="button" name="button" value="了解详情" class="btn"></span>
                        </li>
                        <li>
                            <span class="pic"><img src="http://m.nanhutravel.com/LineImage/20113924_20190215105300853.jpg"></span>
                            <span class="banner">【爆款】沙巴.沙比岛5天游</span>
                            <span class="button"><input type="button" name="button" value="了解详情" class="btn"></span>
                        </li>
                        <li>
                            <span class="pic"><img src="http://m.nanhutravel.com/LineImage/20113924_20190215105300853.jpg"></span>
                            <span class="banner">【爆款】沙巴.沙比岛5天游</span>
                            <span class="button"><input type="button" name="button" value="了解详情" class="btn"></span>
                        </li>
                        <li>
                            <span class="pic"><img src="http://m.nanhutravel.com/LineImage/20113924_20190215105300853.jpg"></span>
                            <span class="banner">【爆款】沙巴.沙比岛5天游</span>
                            <span class="button"><input type="button" name="button" value="了解详情" class="btn"></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="left">
            <h1>商品列表</h1>
            <ul>
                <li>
                    <a href="">热卖推荐</a>
                </li>
                <li>
                    <a href="">出境短线</a>
                </li>
                <li>
                    <a href="">出境长线</a>
                </li>
                <li>
                    <a href="">国内游</a>
                </li>
                <li>
                    <a href="">省内游</a>
                </li>
                <li>
                    <a href="">港澳游</a>
                </li>
                <li>
                    <a href="">自由行</a>
                </li>
            </ul>
        </div>
        <div class="right">
            <h1>热卖线路排行</h1>
            <ul>
                <li>
                    <a href="">1、沙巴.沙比岛5天游</a>
                </li>
                <li>
                    <a href="">2、新加坡|巴淡岛6天</a>
                </li>
                <li>
                    <a href="">3、曼谷芭提雅6天</a>
                </li>
                <li>
                    <a href="">4、东阪5大名城6天</a>
                </li>
                <li>
                    <a href="">5、土耳其蓝色浪漫全景游12天</a>
                </li>
                <li>
                    <a href="">6、德法瑞意12天</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <div class="content">
            <p>
                <a href="">个人网站</a>   |  
                <a href="">400-****-1234</a>   |  
                <a href="">皖ICP备19***666</a>
            </p>
        </div>
    </div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


注意点：

1 left、right、main(wrap)浮动后，会飘出文档流，解决方式：在父级元素增加container {overflow: hidden;}，清除浮动；

2 导航防止溢出 自动移动下面，可增加overflow:hidden属性；

3 双飞翼和圣杯布局原理基本相似，差别在main盒模型计算方式

.main{ box-sizing: border-box; }

计算标准设置到边框上，抵消到内边距对盒子的影响，这样就不会被撑开了；


上一条：使用CSS制作一张带有四个圆角的表格_0906下一条：用css对表格的样式进行配置—2019-09-06
实战案例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多