当当网

最新推荐文章于 2021-05-18 23:39:12 发布

（#、#）

最新推荐文章于 2021-05-18 23:39:12 发布

阅读量552

点赞数 1

本文链接：https://blog.youkuaiyun.com/weixin_42527809/article/details/80990833

版权

写好后效果

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../Css/first.css">

</head>
<body>
    <div id="container">
        <div id="header">
            <div class="logo">
                <img src="../Image2/logo.jpg" />
            </div>
            <ul>
                <li><a href="#">唯品会</a></li>
                <li><a href="#">当当优品</a></li>
                <li><a href="#">数字馆</a></li>
                <li><a href="#">都看阅读</a></li>
                <li class="tip"><a href="#"><img src="../Image2/icon_count.png" /></a></li>
            </ul>
        </div>
        <div id="menu">
            <a href="#">首页</a>
            <a href="#">图像</a>
            <a href="#">音像</a>
            <a href="#">童装</a>
            <a href="#">服装</a>
            <a href="#">鞋靴</a>
            <a href="#">运动</a>
            <a href="#">箱包</a>
            <a href="#">美妆</a>
            <a href="#">珠宝</a>
            <a href="#">家居</a>
            <a href="#">食品</a>
            <a href="#">酒</a>
            <a href="#">手机</a>
            <a href="">数码</a>
            <a href="">电脑</a>
            <a href="">家电</a>
        </div>
        <div class="clear10"></div>
        <div><img src="../Image2/banner.png" /></div>
        <div class="clear10"></div>
        <div id="bookTop">
            <div class="title">
                <img src="../Image2/bg_bang.gif" height="39" width="240"/>
            </div>

            <div class="bookLeft">
                <dl>
                    <dt>
                        <img src="../Image2/book-01.jpg"/>
                        <div class="first">
                            <img src="../Image2/bookNo1.gif" />
                        </div>
                    </dt>
                    <dd>
                        <a href="#">偷影子的人</a>
                        <p>作 者：[法] 马克・李维（Marc Levy）著,段韵灵 译</p>
                        <p>出版社：湖南文艺出版社</p>
                        <p>当当价：<strong>￥ 17.90</strong></p>
                        <p>
                            不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。
                            一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他
                        </p>
                    </dd>
                </dl>
            </div>
            <div class="bookRight">
                <dl>
                    <dt>
                        <img src="../Image2/book-02.jpg" alt="看见"/>
                        <div clss="second">
                            <img src="../Image2/bookNo2.gif" height="37" width="28"/>
                        </div>
                    </dt>
                    <dd>
                        <a href="#">看见（央视知名记者、主持人柴静:十年个人成长的告白，中国社会变迁的备忘）</a>
                        <p>作者:柴静 著</p>
                        <p>出版社:广西师范大学出版</p>
                        <p><strong>￥29.40</strong><span>7.4折</span></p>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="../Image2/book-03.jpg" height="100" width="100"/>
                        <div class="third">
                            <img src="../Image2/bookNo3.gif" height="36" width="27"/></div>
                    </dt>
                    <dd>
                        <a href="#">改变孩子先改变自己</a>
                        <p>作 者：贾容韬 贾毅 著</p>
                        <p>出版社：作家出版社</p>
                        <p><strong>￥ 22.20</strong> <span>7.4折</span></p>
                    </dd>
                </dl>
            </div>
        </div>
        <div id="footer">
            Copyright (C) 当当网 2004-2017, All Rights Reserved<img src="../Image2/validate.gif" height="48" width="40"/>京ICP证041189号出版物经营许可证
            新出发京批字第直0673号
            </div>
    </div>
</body>
</html>

CSS

/*将全部内边外边距离设置为0*/
*{
    padding: 0px;
    margin: 0px;
}
/*设置整体的字体大小行高*/
body{
    font-size: 12px;
    font-family: Verdana,"宋体";
    line-height: 25px;
}
/*整体去除无序列表前的点*/
ul,li{
    list-style: none;
}
/*整体的图片边框为0*/
img{
    border: 0px;
}
/*超链接去除下划线设置字体颜色*/
/*灰色*/
a{
    text-decoration: none;
    color:#7B7B7B;
}
/*鼠标放上去未点击的样式*/
/*有下划线*/
/*灰色*/
a:hover{
    text-decoration: underline;
    color:#7B7B7B;
}
/*整体div(container)居中  */
#container{
    margin: 0px auto;
    /*必须要设一个宽度才能居中*/
    width: 960px;
    /*设置一个边框方便观察div的范围*/
    border: 1px red solid;
}
/*处理网页开头部分logo和右边的5链接（包括图片）*/
#header{
    /*设置div的高度*/
    height: 55px;
    border: 1px red solid;
}
/*设置开头部分左边的图片*/
#header .logo{
    /*左浮动*/
    float: left;
    /*调整适当的距离*/
    /*图片与头部的高度*/
    /*图片和div的距离*/
    padding-top: 5px;
    border: 1px red solid;
}
/*整体调整的无序列表*/
#header ul{
    /*首先左浮动*/
    float: right;
    /*设置边框添加背景*/
    border:1px #c8ece3 solid;
    background:#eafffa;
    /*地面边框为0px更具图片样式*/
    border-bottom: 0px;
    /*整体调整和div的距离外边距*/
    margin-top:20px;
    /*调整行高*/
    /*一行的高度*/
    height: 29px;
    /*脱离文档流，相对定位*/
    /*方便右边链接图片的移动*/
    position: relative;
    /*ps(还未变成行排列)*/
}
/*设置每一个超链接并变成行排*/
#header ul li{
    /*浮动超链接变成行排*/
    float: left;
    /*display:inline-block;*/
    /*设置样式*/
    padding:0px 10px;
    line-height:29px;
    border: 1px red solid;
}
/*调整右边的图片*/
#header ul .tip{
    /*绝对移动(图里文档流)*/
    position:absolute;
    left: 0;
    top:-13px;
}
/*设置整体的菜单栏的样式*/
#menu {
    /*清除浮动*/
    clear: both;
    height:36px;
    /*隐藏溢出的元素框*/
    overflow:hidden;
    background-color: #FE6915;
}
/*设置菜单栏的的链接样式(小的)*/
#menu a{
    /*a为行元素将他变为块元素(可以设置边距)*/
    display: block;
    border: 1px red solid;
    /*调整大小颜色背景距离*/
    /*ps（和menu一样宽的话字体就能居中显示了）*/
    height: 36px;
    line-height: 36px;
    color:white;
    padding:0px 16px;
    background-color: #FE6915;
    /*浮动变为行显示*/
    float: left;
}
/*第3部分的设置*/
/*整体设置*/
#bookTop{
    /*设置文本边框*/
    border:2px #cce9ac solid;
    /*宽度为960-2*2*/
    width:956px;
    /*脱离文档流/设置为相对地址/方便里面图片的位置移动*/
    position:relative;
    /*调整第3部分的div与整体div的外边距*/
    padding-top:90px;
}
/*图片畅销榜图片的设置*/
.title{
    /*定位的绝对位置*/
    position:absolute;
    left:-12px;
    top:15px;
    border: 1px red solid;
    /*设置堆叠顺序*/
    z-index:10;
}
/*链接样式设置(bookTop)中的*/
#bookTop a {
    color:#1a66b3;
    font-size:14px;
}
/*第一块中文字的设置*/
/*价格样式*/
#bookTop span{
    color:#5ea593;
    padding-left:10px;
}
/*第一块整体设置*/
.bookLeft {
    /*有浮动设置宽度方便第二块区第三块区应用*/
    float:left;
    width:560px;
    border: 1px red solid;
}
/*第一块区*/
.bookLeft dt {
    /*图片设置左浮动后字体自动上移*/
    float:left;
    /*整体宽度*/
    width:260px;
    border: 1px red solid;
    /*图片居中*/
    text-align: center;
    /*定位方便No1图标移动*/
    position: relative;
}
/*no1图片的定位移动*/
.bookLeft dt .first{
    position:absolute;
    top:-5px;
    left:20px;
}
/*编辑文档整体部分*/
.bookLeft dd {
    /*左浮动*/
    float:left;
    width:280px;
    padding-top:15px;
    border: 1px red solid;
}
/*第二、三块区域*/
.bookRight{
    /*左浮动*/
    float: left;
    /*设置宽(大小注意)*/
    width: 390px;
    border: 1px red solid;
}
/*两块整体*/

/*book1和book2二图片设置*/
.bookRight dt{
    float:left;
    width:100px;
    position:relative;
    border: 1px red solid;
}
/*小图标no2，no3的设置移动位置*/
.bookRight dt div{
    position:absolute;
    top:-10px;
    left:0px;
    border: 1px red solid;
}
/*
!*清除浮动方便footer部位的文字设置*!
.bookRight dl{
    clear: both;
}*/
#footer {
    color:#848484;

    /*清除两边浮动是文字正常使用*/
    clear:both;
    text-align:center;
}
/*图片垂直居中*/
#footer img {
    vertical-align:middle;
}
.clear10 {
    clear:both;
    height:10px;
    overflow:hidden;
    border: 1px red solid;
}