Blogger Information
Blog 7
fans 0
comment 0
visits 4264
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
双飞翼布局-2019年4月29日22时
KingRay的博客
Original
512 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style5.css">
    <title>布局案例1:通用的底部与头部布局技巧</title>
    <style>
        /*********************************头部样式开始*/
        .header {
            background-color: lightgray;
        }

        /*头部内容区*/
        .header .content {
            /*头部内容区,应该居中显示,所以要有宽度*/
            width: 1200px;
            height: 20px;
            /*参考色块*/
            /*background-color: black;*/
            /*上下外边距为0,左右自动居中*/
            /*因为上下相等,左右也相等,所以可以简写为: margin: 0 atuo;*/
            margin: 0 auto;

        }

        /*头部内容区的导航*/
        .header .content .nav {
            /*    清空导航UL元素的默认样式*/
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
        }

        /*头部导航中列表项样式*/
        .header .content .nav .item {
            list-style-type: none;
        }


        /*头部导航中的链接样式: 重点*/
        .header .content .nav .item a {
            /*    一定要将浮动设置到链接标签<a>上面,否则无法实现导航区的点击与高亮*/
            float: left;
            /*设置最小宽度与最小高度,以使用导航文本的变化*/
            min-width: 50px;
            min-height: 20px;
            /*设置行高与头部区块等高,是导航文本可以垂直居中显示*/
            line-height: 20px;
            color: black;

            /*设置导航文本的左右内边距,使导航文本不要挨的太紧*/
            padding: 0 15px;
            /*去掉下划线*/
            text-decoration: none;
            /*    让导航文本在每一个小区块中居中显示*/
            text-align: center;
        }

        .header .content .nav .item a:hover {
            /*当鼠标移入到导航链接上时改变背景颜色文本前景色,实现当前导航高亮功能*/
            color: red;
            /*    将导航文本设置为系统跟字体大小的1.2倍*/
            font-size:1.1rem;
        }
        /*******************************头部样式结束*/

        /*******************************主体样式开始*/
        /*主体容器设置宽度并居中*/
        .container {
            width:1200px;
            min-height: 600px;
            margin:5px auto;
            background-color: lightblue;

            overflow: hidden;
        }

        /*中间区块宽度设置在容器wrap中*/
        .wrap {
            /*    继承父级宽度*/
            width:inherit;
            min-height: 800px;

            background-color: cyan;
        }

        /*左边栏样式*/
        .left {
            width: 200px;
            min-height: 800px;
            background-color: lightcoral;
        }
        /*右边栏样式*/
        .right {
            width: 200px;
            min-height: 800px;
            background-color: lightcoral;
        }

        /*因中间区块宽度100%,左右会到下面*/
        .wrap, .left, .right {
            float: left;
        }

        /*设置区块的负外边距,把区块反向移动*/
        .left {
            margin-left: -100%;
        }
        .right {
            margin-left: -200px;
        }

        /*显示中间的main*/
        .main {
            padding-left: 200px;
            padding-right: 200px;
        }
        /****************主体样式结束*/

        /****************底部样式开始*/
        /*与头部类似*/
        .footer {
            background-color: lightgray;
        }

        .footer .content p {
            text-align: center;
            line-height: 40px;
        }
        .footer .content a {
            text-decoration: none;
            color:black;
        }
        /****************底部样式结束*/
    </style>
</head>
<body>
    <div class="header">
        <div class="content">
            <div class="left-nav">
                <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>
                    <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>
                    <li class="item"><a href="">网站导航</a></li>
                </ul>
            </div>
        </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="content">
            <p>
                <a href="">taobao所有</a> | 
                <a href="">6666-6666666</a> | 
                <a href="">47298374938</a>
            </p>
        </div>
    </div>

</body>
</html>

运行实例 »

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

Correction status:Uncorrected

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