定位浮动-上机练习4html

最新推荐文章于 2022-06-01 22:09:36 发布

Hy draulic

最新推荐文章于 2022-06-01 22:09:36 发布

阅读量309

点赞数

文章标签： html css html5

本文链接：https://blog.csdn.net/H3587005447/article/details/120739673

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../CSS/当当网.css">
</head>
<body>
<div class="ddw">
    <div class="ddw-top">
        <img src="../image/logo.jpg" alt="">
        <img src="../image/icon_count.png" alt="">
        <ul class="ddw-tops">
            <li>尾品汇</li>
            <li>当当优品</li>
            <li>数字馆</li>
            <li>都看阅器</li>
        </ul>
    </div>
    <div class="ddw-center">
        <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>
    <img src="../image/banner.png" alt="">


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

        </ul>
        <ul class="bottom-ul-2">
            <li>看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘 </li><br>
            <li>作 者：柴静 著</li><br>
            <li>出版社：广西师范大学出版社</li><br>
            <li><span class="price">￥ 29.40</span>&nbsp;&nbsp;&nbsp;<span class="count">7.4折</span> </li>
        </ul>
        <ul class="bottom-ul-3">
            <li>改变孩子先改变自己 </li><br>
            <li>作 者：贾容韬 贾毅 著</li><br>
            <li>出版社：作家出版社</li><br>
            <li><span class="price">￥ 22.20</span>&nbsp;&nbsp;&nbsp;<span class="count">7.4折</span></li>
        </ul>
    </div>

    <div class="bottom4">
        <div  class="bottom2">Copyright (C) 当当网 2004-2017, All Rights Reserved</div>
        <img src="../image/validate.gif" alt="">
        <div  class="bottom3">京ICP证041189号出版物经营许可证 新出发京批字第直0673号</div>
    </div>
</div>
</body>
</html>

CSS

* {
    margin: 0px;
    padding: 0px;
}

/* 设置盒子宽度 */
.ddw{
    width: 960px;
    margin: 20px auto;
}

/* 清除浮动 */
.ddw-top{
    overflow: hidden;
    margin-bottom: 10px;
}

li {
    display: inline-block;
    list-style: none;
}

/* ul盒子加框线和背景颜色 */
.ddw-tops{
    border: 1px #ccc solid;
    padding: 5px;
    background: #EAFFFA;
}
/* 设置ul里面的li文字 */
.ddw-tops li{
    list-style:none;
    color: #666;
    font-size: 15px;
}

/* 转行内块元素 */
.ddw-tops li{
    display: inline-block;
}

/* logo和文字浮动 */
.ddw-top img:nth-of-type(1){
    float: left;
}

/* 3折定位 */
.ddw-top img:nth-of-type(2){
    float: right;
    position: absolute;
    top: 24px;
    right: 375px;
    z-index: 2;
}

.ddw-tops{
    position: relative;
    float: right;
    margin-top: 16px;
}
/* 以上是头部内容 */

.ddw-center{
    background: #FE6915;
    margin-bottom: 10px;
}


/* a标签的样式 */
.ddw-center a{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-size: 10px;
    background: #FE6915;
    border-top: 1px #FE470B solid;
    border-bottom: 1px #FE470B solid;
    padding:7px 15px 7px 12px;

}

a:hover{
    color: deepskyblue;
    text-decoration: underline;
}
/* 以上是中间内容 */

.bottom{
    border: 1px #CCE9AC solid;
    position: relative;
    height: 370px;
    margin-top: 10px;
}

/* 定位3张图片*/
.bottom img:nth-of-type(1){
    position: absolute;
    top: 20px;
    left: -13px;
}
.bottom img:nth-of-type(2){
    position: absolute;
    top: 90px;
    left: 0px;
}
.bottom img:nth-of-type(3){
    position: absolute;
    top: 80px;
    left: 20px;

}

.count{
    color: #5EA593;
    font-size: 12px;
}


.price {
    color: #890020;
    font-size: 12px;
    font-weight: 700;
}

.bottom img:nth-of-type(1){
    color: #1A66B3;
    font-size:16px;
}

.bottom img:nth-of-type(2){
    color: #1A66B3;
    font-size:15px;
}

.bottom img:nth-of-type(3){
    color: #1A66B3;
    font-size:15px;
}

.bottom ul:nth-of-type(1){
    width: 320px;
    position: absolute;
    top: 120px;
    left: 255px;
    font-size: 14px;
    line-height: 22px;
}

.bottom ul:nth-of-type(2){
    /* color: #1A66B3; */
    width: 250px;
    position: absolute;
    top: 100px;
    right: 15px;
    font-size: 14px;
    line-height: 22px;

}

.bottom ul:nth-of-type(3){
    width: 250px;
    position: absolute;
    top: 245px;
    right: 15px;
    font-size: 14px;
    line-height: 22px;

}

.bottom img:nth-of-type(4){
    position: absolute;
    top: 90px;
    right: 260px;
}

.bottom img:nth-of-type(5){
    position: absolute;
    top: 80px;
    right: 333px;
}

.bottom img:nth-of-type(6){
    position: absolute;
    top: 220px;
    right: 260px;
}

.bottom img:nth-of-type(7){
    position: absolute;
    top: 215px;
    right: 340px;
}

.bottom4{
    text-align: center;
}

.bottom2 ,.bottom3{
    vertical-align: middle;
    display: inline-block;
    margin-bottom:45px ;
}

Hy draulic

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定位浮动-上机练习4html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../CSS/当当网.css"></head><body><div class="ddw"> <div class="d.
复制链接

扫一扫