复现当当网静态页面

最新推荐文章于 2023-12-19 12:51:35 发布

小小前端菜鸟

最新推荐文章于 2023-12-19 12:51:35 发布

阅读量368

点赞数

分类专栏：基础复习文章标签： html 前端 css

本文链接：https://blog.csdn.net/Javaloli/article/details/126941131

版权

基础复习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

网页效果：
网页样式
目的：复习页面布局思路，css相关布局属性。
代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" type="text/css">
</head>

<body>
    <div id="header">
        <img src="./images/header.png" alt="">
    </div>

    <div id="main">
        <div class="way">
            <p> <span class="way-black">图书</span> > 小说 > 其他</p>
        </div>
        <div class="book">
            <div class="book-img">
                <img src="./images/book1.jpg" alt="">
            </div>
            <div class="book-text">
                <p class="book-text-name">
                    一个人的朝圣（新版）
                </p>
                <br>
                <p>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;欧洲首席畅销小说，热销5年不衰，入围2012年布克文学奖。全球销量过4,000,000册，简体中文版销量过1,500,000册。这一年，我们都需要哈罗德安静而勇敢的陪伴。
                </p>
                <br><span></span>
                <div class="book-text-main">
                    <p class="autho">作者：（英）<span>蕾秋·乔伊斯</span> （<span>Rachel Joyce</span>) 著 <span>黄妙瑜</span> 译</p>
                    <p class="press">出版社: <span>北京联合出版有限公司</span> 出版时间: 2017年06月</p>
                    <br>
                    <p class="rank">在<span>当当小说榜</span>排名95位 <span>6664条评论</span> <span
                            class="book-text-main-pf">我要评分</span></p>
                </div>
                <br>
                <div class="book-text-price">
                    <p>当当价 <span class="jiagefuhao-f">¥</span><span class="book-text-price-f">28.40</span> <span
                            class="jiagefuhao-f">(7.14折)</span> 定价 <span class="price-last">¥39.80</span></p>
                    <p>电子书价 <span class="jiagefuhao-s">￥</span><span class="book-text-price-s">5.99</span></p>
                </div>

            </div>
        </div>
        <div class="book">
            <div class="book-img">
                <img src="./images/book2.jpg" alt="">
            </div>
            <div class="book-text">
                <p class="book-text-name">
                    地下铁道
                </p>
                <br>
                <p>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（2017年普利策奖得主！《追风筝的人》之后，再燃无数中国人的阅读热情！奥巴马、奥普拉齐声赞叹，新晋奥斯卡奖得主导演巴里·詹金斯新片改编！人生终需一次妄想，带领我们去那从未到过的地方。）
                </p>
                <br><span></span>
                <div class="book-text-main">
                    <p class="autho">作者：[美] <span>科尔森·怀特黑德</span> 著 <span>康慨</span> 译</p>
                    <p class="press">出版社: <span>上海人民出版社</span> 出版时间: 2017年03月</p>
                    <br>
                    <p class="rank"><span>8449条评论</span> <span class="book-text-main-pf">我要评分</span></p>
                </div>
                <br>
                <div class="book-text-price">
                    <p>当当价 <span class="jiagefuhao-f">¥</span><span class="book-text-price-f">30.80</span> <span
                            class="jiagefuhao-f">(7.74折)</span> 定价 <span class="price-last">¥39.80</span></p>
                    <p>电子书价 <span class="jiagefuhao-s">￥</span><span class="book-text-price-s">6.99</span></p>
                </div>

            </div>
        </div>
        <div class="book" id="last-book">
            <div class="book-img">
                <img src="./images/book3.jpg" alt="">
            </div>
            <div class="book-text">
                <p class="book-text-name">
                    所有明亮的地方
                </p>
                <br>
                <p>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;美丽的故事，却残酷得如此真实，狠狠地击碎你的心！
                    Goodreads超高评分，超5000000人留言热议，在美国掀起阅读热潮；好莱坞大牌团队改编、艾丽·范宁主演电影即将震撼上映！ <span
                        style="color: skyblue;">文学艺术畅品 每满150减50</span>
                </p>
                <br><span></span>
                <div class="book-text-main">
                    <p class="autho">作者：（美）<span>詹妮弗·尼文 Jennifer Niven</span>著 <span>枣泥</span> 译</p>
                    <p class="press">出版社: <span>北京联合出版有限公司</span> 出版时间: 2017年07月</p>
                    <br>
                    <p class="rank">在<span>当当小说榜</span>排名244位 <span>3171条评论</span> <span
                            class="book-text-main-pf">我要评分</span></p>
                </div>
                <br>
                <div class="book-text-price">
                    <p>当当价 <span class="jiagefuhao-f">¥</span><span class="book-text-price-f">25.20</span> <span
                            class="jiagefuhao-f">(6.34折)</span> 定价 <span class="price-last">¥39.80</span></p>
                    <p>电子书价 <span class="jiagefuhao-s">￥</span><span class="book-text-price-s">11.99</span></p>
                </div>

            </div>
        </div>
    </div>
    <div class="text-bottom">
        <p>Copyright (C) 当当网 2004-2017, All Rights Reserved京ICP证041189号出版物经营许可证 新出发京批字第直0673号</p>
    </div>
</body>

</html>

* {
    margin: 0;
    padding: 0;
}

body {
    min-width: 1600px;
}

#header {
    width: 100%;
}

#header img {
    width: 100%;
    height: 180px;
}

.way {
    width: 89%;
    margin: 0 auto;
    font-size: small;
}

.way-black {
    font-weight: 700;
}

.book {
    width: 65%;
    height: 300px;
    margin: 0 auto;
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px black solid;
}

.book-img {
    width: 25%;
    height: 100%;
    float: left;
}

.book-img img {
    height: 90%;
}

.book-text {
    height: 100%;
    width: 75%;
    float: right;
}

.book-text-name {
    font-size: larger;
    font-weight: bold;
}

.book-text-main {
    font-size: small;
}

.book-text-main span {
    color: skyblue;
}

.rank .book-text-main-pf {
    color: orange;
}

.book-text-price {
    font-size: small;
    color: gray;
}

.jiagefuhao-f {
    color: red;
}

.jiagefuhao-s {
    color: purple;
}

.book-text-price-f {
    all:initial;
    color: red;
    font-size: xx-large;
}

.book-text-price-s {
    all:initial;
    color: purple;
    font-size: xx-large;
}

.price-last {
    text-decoration: line-through;
}

.text-bottom {
    width: 100%;
    text-align: center;
}

#last-book {
    border-bottom: none;
}

.text-bottom {
    border-top: 1px black solid;
    color: gray;
    font-size: small;
    padding-top: 5px;
    padding-bottom: 5px;
}