网页设计，盒子模型

2018-11-16 本文已影响0人敏姐姐_e9d0

image.png

用所学知识制作一个当当网的界面。制作过程中遇到各种问题，才发现自己对标签记得熟练也不能保证自己做成一个漂亮的页面。各种搞笑的页面效果，都是自己对框架的不熟悉。好吧，其实很享受自己动手的过程，当界面一点点变成自己想要的效果，成就感就来了。可能有些语句不严谨，但以一个接触h5几天的新手来说，我觉得还可以，不过以后自己还是会学习，优化程序。废话不多说，下面粘程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当当网图书</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        a {
            text-decoration: none;
        }
        ul{
            list-style: none;
        }
        .new{
              width: 960px;
              height: 740px;
              border: solid 1px black;
              margin-left: 150px;
            margin-top: 10px;
          }
     .one {
         width: 960px;
         height: 80px;

     }
     .a1{
      margin-top: 20px;
         margin-left: 10px;
     }
   .one_one{
       width: 270px;
       height: 30px;
       background: #FFFFED;
       position: absolute;
       right:240px;
       top:40px;
       line-height: 30px;
   }
        .one_one img{
            position: absolute;
            right:220px;
            top:-10px;
        }
        .one_one  a{
            margin-right: 5px;
        }
        .two{
            width: 960px;
            height: 60px;
            background: orange;

        }
        .two li{
            display: inline-block;
        }
        .two a{
            color:white ;
            height: 60px;
            line-height: 60px;
            margin-right: 10px;
            margin-left: 10px;
        }
        .two a:hover{
            color: red;
        }
        .three{
            width: 960px;
            height: 120px;
            margin-top: 5px;
            margin-bottom: 5px;
        }
        .four{
            width: 960px;
            height: 410px;
            border: solid 1px green;
        }
        .four-one{
            width: 960px;
            height: 50px;
        }
        .four-one img{
            position: absolute;
            right:970px;
            top:280px;
        }
        .four-two{
            width: 960px;
            height: 350px;
        }
        .four-two-one{
            width: 300px;
            height: 350px;
            float: left;
        }
        .four-two-one img{
            width: 240px;
            height: 280px;
            margin-top: 40px;
            margin-bottom: 30px;
        }
        .four-two-two {
            width: 320px;
            height: 280px;
            font-size: 14px;
            float: left;
            padding-top: 70px;
        }
        .four-two-two p:nth-of-type(1){
            line-height: 20px;
        }
        .four-two-two p:nth-of-type(2){
            line-height: 20px;
        }
        .four-two-two p:nth-of-type(3){
            line-height: 20px;
        }
        .four-two-two p:nth-of-type(4){
            line-height: 20px;
        }
        .four-two-two a{
            color: #aacbee;

        }
        span{
            color: brown;
        }
        .four-two-three{
            width: 330px;
            height: 350px ;
            float: right;
        }
        .b1{
            width: 330px;
            height: 150px;
        }
        .c1{
            width: 90px;
            height: 150px;
            display: inline-block;
            float: left;
        }
        .c1 img{
            margin-top: 20px;
            width: 80px;
            height: 120px;
        }
        .c2{
            width: 220px;
            height: 120px;
            display: inline-block;
            float: left;
            font-size: 12px;
            margin-top: 30px;
        }
        .c2 p:nth-of-type(1){
            line-height: 20px;
        }
        .c2 p:nth-of-type(2){
            line-height: 20px;
        }
        .c2 p:nth-of-type(3){
            line-height: 20px;
        }

        .b2{
            width: 330px;
            height: 150px;
        }
        .c3{
            width: 100px;
            height: 150px;
            display: inline-block;
            float: left;
        }
        .c3 img{
            margin-top: 20px;
            width: 80px;
            height: 120px;
        }
        .c4{
            width: 220px;
            height: 120px;
            display: inline-block;
            float: left;
            margin-top: 30px;
            font-size: 12px;
        }
        .c4 p:nth-of-type(1){
            line-height: 20px;
        }
        .four-two-three a{
            color:#aacbee;
        }
        .footer{
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="new">
    <div class="one">
        <img class="a1" src="logo.jpg" alt=""/>
        <div class="one_one">
            <img src="icon_count.png" alt=""/>
                <a href="#">尾品汇</a>
                <a href="#">当当优品</a>
                <a href="#">数字馆</a>
                <a href="#">都看阅器</a>
        </div>
    </div>
    <div class="two">
        <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>
            <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>
            <li><a href="#">数码</a></li>
            <li><a href="#">电脑</a></li>
            <li><a href="#">家电</a></li>
        </ul>
    </div>
    <div class="three">
        <img src="banner.png" alt=""/>
    </div>
    <div class="four">
        <div class="four-one">
            <img src="bg_bang.gif" alt=""/>
        </div >
        <div class="four-two">
            <div class="four-two-one">
                <img src="book-01.jpg" alt=""/>
            </div>

            <div class="four-two-two">
                <a href="">偷影子的人</a>
                <p>作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译</p>
                <p>出版社：湖南文艺出版社</p>
                <p>当当价：<span>￥ 17.90</span></p>
                <p>不知道姓氏的克蕾儿。这就是你在我生命里的角色，
                我童年时的小女孩，今日蜕变成了女人，一段青梅竹
                马的回忆，一个时间之神没有应允的愿望。一个老
                是受班上同学欺负的瘦弱小男孩,因为拥有一种特殊
                能力而强大：他能“偷别人的影子”，因而能看见他</p>
            </div>

            <div class="four-two-three">
                <div class="b1">
                    <div class="c1">
                        <img src="book-02.jpg" alt=""/>
                    </div>
                    <div class="c2">
                            <a href="">看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</a>
                            <p>作 者：柴静 著</p>
                            <p>出版社：广西师范大学出版社</p>
                            <p>￥<span> 29.40</span> 7.4折</p>
                    </div>
                </div>
                <div class="b2">
                <div class="c3">
                    <img src="book-03.jpg" alt=""/>
                </div>
                <div class="c4">
                    <a href="">改变孩子先改变自己</a>
                    <p>作 者：贾容韬 贾毅 著</p>
                    <p>出版社：作家出版社</p>
                    <p>￥ <span>22.20</span> 7.4折</p>
                </div>
            </div></div>
        </div>
     </div>
    <div class="footer">
       <p>Copyright (C) 当当网 2004-2017, All Rights Reserved京ICP证041189号出版物经营许可证 新出发京批字第直0673号</p>
    </div>
</div>
</body>
</html>