网页布局

作者: 卑微小利 | 来源:发表于2019-01-02 12:04 被阅读0次

1.网页布局基础
6、盒子模型边框、圆角、阴影、内外边距、外边距塌陷
网页布局方式
DIV+CSS对SEO网站优化好处有哪些？
京东登录
学习笔记（二）
08-CSS浮动流
CSS-浮动流
浮动
浮动流

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shopbop.com女装时尚品牌</title>
<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    .nav,.c1{
        list-style: none;
    }
    .nav li{
        float: left;
        padding: 10px;
        font-size: 16px;
    }
    .nav a,.box2 a{
        color: #000;
        padding: 7px;
        width: 100%;
        text-align: center;
        text-decoration: none;
    }
    .nav a:hover{
        color: red;
    }
    .head{
            width: 1349px;
            height: 211px;
            background-color:white;
    }
    .head1{
            width: 1349px;
            height: 31px;
            background-color: rgb(244, 244, 244);
            line-height: 30px;
            border-bottom: 1px solid rgb(229, 229, 229)
    }
    .head2{
            width: 1070px;
            height: 180px;
            background-color: skyblue;
            margin: 0 auto;
    }
    .a1{
        width: 300px;
        height: 140px;
        float: left;
        background-color: black;
    }
    .a2{
        width: 650px;
        height: 117px;
        float: right;
        background-color: black;
    }
    .a3{
        width: 1070px;
        height: 38px;
        float: left;
        background-color: white;
    }
    .a4{
        width: 140px;
        height: 40px;
        float: left;
        text-align: center;
        background-color: red;
    }
    .a4 span{
        color: white;
        font-size: 16px;
    }
    .box1{
            width: 1070px;
            height: 30px;
            margin: 0 auto;
    }
    .box2{
            width: 122px;
            height: 30px;
            float: left;
    }
    .box3{
            float: left;
            height: 30px;
            padding-left: 20px;
            width: 250px;

    }
    .c1 a{
            text-decoration: none;
    }
    .c1 a li span{
                    height: auto;
                    top: 0;
                    left: 36px;
                    color:#666666;
    }
    .c1 a li span:hover{
                    color: red;
    }
    span{
        padding-left: 3px;
        font-size: 12px;
    }
    .box2 a{
        color: #666666;
    }
    .box2 a:hover{
        color: red;
    }
    em{
        font-style: normal;
        font-size: 12px;
    }
    .body{
        width: 1349px;
        height: 400px;
        background-color: greenyellow;
    }
    .body1{
            margin: 0 auto;
            height: 40px;
            position: relative;
            width: 1070px;
            top: 370px;
            z-index: 100;
            cursor: pointer;
            background-color: #1e389a;
    }
    .foot{
        width: 1070px;
        height: 110px;
        background-color: #bbffaa;
        margin: 0 auto;
        margin-top: 20px;
    }
    .foot2{
        width: 1349px;
        height: 444px;
        margin-top: 20px;
        background-color: white;
    }
    .f1{
        width: 1070px;
        height: 370px;
        margin: 0 auto;
        background-color: red;
    }
    .foot3{
        width: 1070px;
        height: 362px;
        margin: 0 auto;
        margin-top: 20px;
        background-color: #1e389a;
    }
    .foot4{
        width: 1349px;
        height: 2265px;
        background-color: #5c9bf1;
        margin-top: 20px;
    }
    .f2{
        width: 1070px;
        height: 501px;
        margin: 0 auto;
        margin-top: 20px;
        background-color: #6d62da;
    }
</style>
</head>
<body>
<!-- 头1-->
  <div class="bar">
            <div class="bar1">
                <div class="shop1">选购男士单品</div>
                <div class="shop2">CN</div>
                <div class="shop3">ZH</div>
                <div class="shop4">$USD</div>
            </div>
            <div class="bar2">免费国际快递 + 轻松退货</div>
            <div class="bar3">
                <div class="dl">
                    <a href="#">登录/注册</a>
                </div>
             <div class="bar3">
                 <ul class="c1">
                 </ul>
             </div>
         </div>
     </div>
    <div class="head2">
        <div class="a1"></div>
        <div class="a2"></div>
        <div class="a3">
            <div class="a4">
                <span>全部类目</span>
            </div>
            <ul class="nav">
             <li class="abc"><a href="#">新款上市</a></li>
            <li class="abc"><a href="#">礼品</a></li>
            <li class="abc"><a href="#">品牌</a></li>
            <li class="abc"><a href="#">服装</a></li>
            <li class="abc"><a href="#">鞋履</a></li>
            <li class="abc"><a href="#">包装</a></li>
            <li class="abc"><a href="#">配饰</a></li>
            <li class="abc"><a href="#">折扣促销</a></li>
            </ul>
        </div>
    </div>
</div>
<!-- 体body-->
<div class="body">
    <div class="body1"></div>
</div>
<!-- 底1-->
<div class="foot"></div>
<!-- 底2-->
<div class="foot2">
    <div class="f1"></div>
</div>
<!-- 底3-->
<div class="foot3"></div>
<!-- 底-->
<div class="foot4">
    <div class="f2"></div>
</div>
  </body>