html+css制作豆瓣读书页面

效果所下图所示：

1.第一层导航栏，我使用ul写的

这部分写在body-->header-->div1中（分不清在哪里的，看文章末尾的完整代码）

 <div class="div1">
            <ul style="padding-inline-start: 0px; ">

                <li>
                    <a href="https://www.douban.com/">豆瓣</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="#">FM</a>
                </li>
                <li>
                    <a href="#">时间</a>
                </li>
                <li>
                    <a href="#">豆品</a>
                </li>
            </ul>
            <div class="dli">
                <ul>
                    <li style="width: 90px;">
                        <a href="#">下载豆瓣客户端</a>
                    </li>
                    <li style="width: 90px; ">
                        <a href="#">登录/注册</a>
                    </li>
                </ul>
            </div>
        </div>

2.豆瓣读书搜索框

这部分写在body-->header-->div2中

<div class="dbds" style="margin-left: 250px;">
                    <a href="#"
                        style="font-family: Helvetica, Arial,  sans-serif; font-size: 30px;font-weight: bold; text-decoration: none;color: #58402A;">豆瓣读书</a>
                </div>
                <div class="sosuo">
                    <input id="search" name="search" type="text" placeholder="书名,作者,ISBN"
                        style="width: 490px;height: 30px;margin-top: 15px;">
                    <label for="search"><span class="iconfont icon-sousuo"></span></label>
                </div>
            </div>

3.购书单导航栏

这部分写在body-->header-->div2中的div.bdds下面

<ul>
                <li>
                    <a href="#">购书单 </a>
                </li>
                <li>
                    <a href="#">电子图书</a>
                </li>
                <li>
                    <a href="#">豆瓣书店</a>
                </li>
                <li>
                    <a href="#">2021年度榜单</a>
                </li>
                <li>
                    <a href="#"> 2021书影音报告</a>
                </li>
                <li>
                    <a href="#">购物车
                        <span class="iconfont icon-MBEfenggeduosetubiao-gouwuche"></span></a>
                </li>
            </ul>

 4.新书速递导航栏

这部分写在body-->section

<div class="nav">
            <ul style="padding-inline-start: 0px; margin-left: 250px;">
                <li style="font-size: 18px; font-weight: bold;width: 80px;">
                    <a href="https://www.douban.com/" style="color: black;font-size: 18px;">新书速递</a>
                </li>
                <li class="all">
                    <a href="#" style="color: black;">全部</a>
                </li>
                <li class="ltt">
                    <a href="#">文学</a>
                </li>
                <li class="fic">
                    <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="#" style="color: #3377aa;">更多>></a>
                </li>
        </div>

5.两排书以及下面的图书资讯

如何引入图片可以看我主页里的《使用html简单仿写一个静态的绝地求生官网首页》

使用html简单仿写一个静态的绝地求生官网首页_guaishou♂xxx的博客-CSDN博客引入动图的标签就不能用img了，要使用,并且设置了：自动播放，静音播放，循环播放，即：autoplay， muted ，loop。5.首先我们先编辑官网的导航栏部分 ，写在header标签里的nav自命名标签中。将你下载好的图片，拖入上面建好的image文件夹中。这是我以前写的一个静态网页，算一个html入门的简单的教程。1.首先在vscode新建一个文件夹，点击如图所示，点击蓝笔圈起的图标（左边的是新建文件）也是将动态图保存到image里，红圈部分就是我们要用的动图，后缀是.mp4。https://blog.csdn.net/yunanxxx/article/details/129189672?spm=1001.2014.3001.5501

 <div class="books">
            <table>
                <tr>
                    <td>
                        <img src="./image/和魂.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">我看见无数的她</p>
                        <p>张莉</p>
                    </td>
                    <td>
                        <img src="./image/和魂.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">长安的荔枝</p>
                        <p>xxx</p>
                    </td>
                    <td>
                        <img src="./image/和魂.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">和魂</p>
                        <p>吴伟明</p>
                    </td>
                    <td>
                        <img src="./image/和魂.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">柠檬炸弹</p>
                        <p>基次郎</p>
                    </td>
                    <td>
                        <img src="./image/和魂.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">数字抑郁时代</p>
                        <p>sala</p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="./image/柠檬炸弹.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">我看见无数的她</p>
                        <p>张莉</p>
                    </td>
                    <td>
                        <img src="./image/柠檬炸弹.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">长安的荔枝</p>
                        <p>xxx</p>
                    </td>
                    <td>
                        <img src="./image/柠檬炸弹.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">和魂</p>
                        <p>吴伟明</p>
                    </td>
                    <td>
                        <img src="./image/柠檬炸弹.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">柠檬炸弹</p>
                        <p>基次郎</p>
                    </td>
                    <td>
                        <img src="./image/柠檬炸弹.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">数字抑郁时代</p>
                        <p>sala</p>
                    </td>
                </tr>
            </table>
            <ul class="tszx" style="margin-top: 40px;">
                <li class="tszx1">
                    <h4>图书资讯</h4>
                </li>
                <li class="tszx2">
                    <p>
                        那些不经意间收集的T恤故事，和根本连载不完的T恤们——《村上T》新书后记</p>
                    <span>文治图书</span>
                    <p>POPEYE杂志专访村上春树；采访者：野村训市。 ——最开始穿T恤的契机是什么呢？
                        “我开始穿T恤已经是很久以前的事了，不过在我十几岁的时候，身边还根本没有穿T恤的文化。
                        只有类似于汗衫、内衣之类的东西，上面没...
                    </p>
                </li>
            </ul>
            <div class="nav2">
                <ul>
                    <li style="width: 130px;">
                        <a href="https://www.douban.com/"
                            style="color: black;font-size: 18px; font-weight: bold;background-color: white;">最受关注图书榜</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="#" style="margin-left: 13px;">更多>></a>
                    </li>
                </ul>
                <table class="newbooks">
                    <tr>
                        <td>
                            <img src="./image/柠檬炸弹.jpg" alt="">
                        </td>
                        <td>
                            <p>柠檬炸弹</p>
                            <p>作者：基次郎</p>
                        </td>
                        <td><img src="./image/和魂.jpg" alt=""></td>
                        <td>
                            <p>和魂汉神</p>
                            <p>作者：吴伟明</p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img src="./image/柠檬炸弹.jpg" alt="">
                        </td>
                        <td>
                            <p>柠檬炸弹</p>
                            <p>作者：基次郎</p>
                        </td>
                        <td><img src="./image/和魂.jpg" alt=""></td>
                        <td>
                            <p>和魂汉神</p>
                            <p>作者：吴伟明</p>
                        </td>
                    </tr>
                    <tr>
                        <td><img src="./image/和魂.jpg" alt=""></td>
                        <td>
                            <p>和魂汉神</p>
                            <p>作者：吴伟明</p>
                        </td>
                        <td>
                            <img src="./image/柠檬炸弹.jpg" alt="">
                        </td>
                        <td>
                            <p>柠檬炸弹</p>
                            <p>作者：基次郎</p>
                        </td>
                    </tr>
                    <tr>
                        <td><img src="./image/和魂.jpg" alt=""></td>
                        <td>
                            <p>和魂汉神</p>
                            <p>作者：吴伟明</p>
                        </td>
                        <td>
                            <img src="./image/柠檬炸弹.jpg" alt="">
                        </td>
                        <td>
                            <p>柠檬炸弹</p>
                            <p>作者：基次郎</p>
                        </td>
                    </tr>
                    <tr>
                        <td><img src="./image/和魂.jpg" alt=""></td>
                        <td>
                            <p>和魂汉神</p>
                            <p>作者：吴伟明</p>
                        </td>
                        <td><img src="./image/和魂.jpg" alt=""></td>
                        <td>
                            <p>和魂汉神</p>
                            <p>作者：吴伟明</p>
                        </td>
                    </tr>

                </table>
            </div>
        </div>

6.右侧的热门标签我使用的浮动定位 float: right; 

存在问题：缩小窗口这整个div会乱跑。 

<div class="b-right" style="    color: #111;
    font: 12px Helvetica,Arial,sans-serif;
    line-height: 1.62;
    font-size: 13px;
    float: right;
    width: 300px;
    margin-right: 200px;">
            <h5 style="border-bottom: 1px solid #ddd;padding-bottom: 3px;
        margin-bottom: 16px;">
                <span style="    font: 15px Arial, Helvetica, sans-serif;
    line-height: 150%;
    color: #111;
    font-weight: bold;
    font-size: 16px;
    margin-right: 15px;">热门标签</span>
                <span><a href="#" style="    font: 13px Arial, Helvetica, sans-serif;
        line-height: 150%;
        cursor: pointer;
        text-decoration: none;
        color: #3377aa;">所有热门标签»</a> </span>
            </h5>
            <ul class="right1">
                <li><a href="#" style="color: #111;
                            font: 12px Helvetica,Arial,sans-serif;
                            line-height: 1.62;
                            font-size: 13px;
                            background-color: white;">文学</a> </li>
                <li>
                    <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 style="margin-bottom: 15px;"><a href="#" style="color: #aaa;">更多»</a></li>
                    </ul>
                </li>
                <ul>
                    <li><a href="#" style="color: #111;
                        font: 12px Helvetica,Arial,sans-serif;
                        line-height: 1.62;
                        font-size: 13px;
                        background-color: white;
                        margin-right: 230px;">流行</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 style="margin-bottom: 15px;"><a href="#" style="color: #aaa; ">更多»</a></li>
                </ul>
                <ul>
                    <li><a href="#" style="color: #111;
                        font: 12px Helvetica,Arial,sans-serif;
                        line-height: 1.62;
                        font-size: 13px;
                        background-color: white;
                        margin-right: 230px;">流行</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 style="margin-bottom: 15px;"><a href="#" style="color: #aaa; ">更多»</a></li>
                </ul>
                <ul>
                    <li><a href="#" style="color: #111;
                        font: 12px Helvetica,Arial,sans-serif;
                        line-height: 1.62;
                        font-size: 13px;
                        background-color: white;
                        margin-right: 230px;">流行</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 style="margin-bottom: 15px;"><a href="#" style="color: #aaa; ">更多»</a></li>
                </ul>
                <ul>
                    <li><a href="#" style="color: #111;
                        font: 12px Helvetica,Arial,sans-serif;
                        line-height: 1.62;
                        font-size: 13px;
                        background-color: white;
                        margin-right: 230px;">流行</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 style="margin-bottom: 15px;"><a href="#" style="color: #aaa; ">更多»</a></li>
                </ul>
                <ul>
                    <li><a href="#" style="color: #111;
                        font: 12px Helvetica,Arial,sans-serif;
                        line-height: 1.62;
                        font-size: 13px;
                        background-color: white;
                        margin-right: 230px;">流行</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 style="margin-bottom: 15px;"><a href="#" style="color: #aaa; ">更多»</a></li>
                </ul>
            </ul>
        </div>

7.畅销图书榜

<div class="sell">
            <h2>畅销图书榜</h2>
            <ul style="padding-left: 0px;">
                <li>
                    <a href="#">钝感力</a>
                    <p style="text-align:left ;">[日]渡边淳一</p>
                </li>

                <li>
                    <a href="#">尘埃落定</a>
                    <p>[日]渡边淳一</p>
                </li>

                <li>
                    <a href="#">生死疲劳</a>
                    <p>[日]渡边淳一</p>
                </li>

                <li>
                    <a href="#">科普绘本</a>
                    <p>[日]渡边淳一</p>
                </li>

                <li>
                    <a href="#">小聪明豆</a>
                    <p>[日]渡边淳一</p>
                </li>

                <li>
                    <a href="#">张嘉骅少年读</a>
                    <p>[日]渡边淳一</p>
                </li>

                <li>
                    <a href="#">苏东坡传</a>
                    <p>[日]渡边淳一</p>
                </li>

                <li>
                    <a href="#">瓦尔登湖</a>
                    <p>[日]渡边淳一</p>
                </li>
            </ul>
            <div class="care">
                <h2>关注我们</h2>
                <table>
                    <tr>
                        <td>
                            <span class="iconfont icon-douban"></span>
                        </td>
                        <td>
                            <span class="iconfont icon-weibo"></span>
                        </td>
                        <td>
                            <span class="iconfont icon-weixinfang"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>豆瓣小站</td>
                        <td>微博</td>
                        <td>微信</td>
                    </tr>
                </table>
            </div>
        </div>

 

完整代码：

<!DOCTYPE html>
<html>

<head>
    <title>豆瓣读书2.0</title>
    <link rel="stylesheet" href="./iconfont/搜索/iconfont.css">
    <link rel="stylesheet" href="./iconfont/购物车/iconfont.css">
    <link rel="stylesheet" href="./iconfont/豆瓣/iconfont.css">
    <link rel="stylesheet" href="./iconfont/微博/iconfont.css">
    <link rel="stylesheet" href="./iconfont/微信/iconfont.css">
    <style type="text/css">
        /* 通用选择器 */
        * {
            margin: 0px;
            padding: 0px;
        }

        header.hed div.div1 {
            background-color: #545652;
        }

        header.hed div.div2 {
            height: 116px;
            background-color: #F6F6F1;

        }


        header.hed div.div1 ul li {
            display: inline-block;
            width: 50px;
            text-align: center;
        }

        header.hed div.div2 ul li {
            display: inline-block;

            text-align: center;
        }

        header.hed div.div1 ul li a {
            font-weight: bold;
            font-family: 微软雅黑;
            font-size: 12px;
            line-height: 28px;
            text-decoration: none;
            color: #d5d5d5;

        }

        header.hed div.div2 ul li a {
            font-size: 14px;
            text-decoration: none;
            color: #614e3c;
        }

        /* 伪类 顺序为l，v，h，a */
        /* 未访问的链接 */
        header.hed div.div1 ul li a:link {
            color: #d5d5d5;
        }

        header.hed div.div2 ul li a:link {
            color: #614e3c;
        }

        /* 鼠标划过链接 */
        header.hed div.div1 ul li a:hover {
            color: white;
        }

        header.hed div.div2 ul li a:hover {
            color: #d5d5d5;
        }

        /* 鼠标点击时 */
        header.hed div.div1 ul li a:active {
            color: #545652;
        }

        header.hed div.div2 ul li a:active {
            color: #545652;
        }


        header.hed div.updown a {
            font-weight: bold;
            font-family: 微软雅黑;
            font-size: 12px;
            line-height: 28px;
            text-decoration: none;
            color: #d5d5d5;
            display: inline-table;
        }

        header.hed div.login a {
            font-weight: bold;
            font-family: 微软雅黑;
            font-size: 12px;
            line-height: 28px;
            text-decoration: none;
            color: #d5d5d5;
        }

        .dli {
            position: absolute;
            margin: 0 0 0 1300px;
            top: 0;
        }

        section.xssd div.nav ul li a {
            text-decoration: none;
        }

        section.xssd div.nav {
            width: 100%;
            height: 40px;

        }

        section.xssd div.nav ul {
            width: 639px;
            height: 40.67px;
            /* text-align: center; */
            border-bottom: 1px solid #ddd;
            /* margin-left: 250px; */
        }

        section.xssd div.nav ul li {
            display: inline-block;
            text-align: center;
            line-height: 40px;
            width: 55px;
        }

        section.xssd div.nav ul li a {
            font-size: 13px;
            font-family: Arial, Helvetica, sans-serif;
            text-decoration: none;
            color: #9B9B9B;
        }

        section.xssd div.nav ul li[class] {
            width: 40px;
        }

        section.xssd div.books {
            width: 675px;
            height: 400px;
            margin-left: 250px;
            margin-top: 10px;

        }

        div.div2 div.divdb div.dbds {
            width: 145px;
            height: 56px;
            float: left;
            margin-top: 10px;

        }

        div.div2 div.divdb div.sosuo {
            height: 34px;
            width: 1000px;

        }

        div.div2 div.divdb {
            height: 75px;

        }

        section.xssd div.books tr td {
            width: 130px;
        }

        section.xssd div.books tr td img {
            width: 111.9px;
            height: 171.99px;
        }

        header.hed div.divdb {
            border-bottom: 1px solid #e5ebe4;

        }

        header.hed div.div2 ul {
            margin-left: 250px;
            width: 700px;
            margin-top: 10px;
        }

        header.hed div.div2 ul li {
            margin-right: 9px;
        }

        header.hed div.div2 ul li a:hover {
            background-color: #58402A;
        }

        section.xssd div.books ul li {
            display: inline-block;

        }

        section.xssd ul.right1 li {
            color: #111;
            font: 12px Helvetica, Arial, sans-serif;
            line-height: 1.62;
            font-size: 13px;
            list-style: none;
            float: left;
            display: inline;
            margin: 0;
            padding: 0;
            border: none;
            width: auto;
        }

        section.xssd ul.right1 li a {
            font: 12px Helvetica, Arial, sans-serif;
            list-style: none;
            cursor: pointer;
            text-decoration: none;
            width: auto;
            word-break: keep-all;
            white-space: nowrap;
            background-color: #f5f5f5;
            color: #37A;
            font-size: 13px;
            padding: 2px 11px 0;
            display: inline-block;
            margin: 0 3px 5px 0;
            line-height: 20px;
        }

        ul.tszx li.tszx1 {
            font: 15px Arial, Helvetica, sans-serif;
            margin: 0 0 12px 0;
            line-height: 150%;
            color: #111;
            font-weight: bold;
            font-size: 18px;
            border-bottom: none;
            padding: 0;
            margin-bottom: 15px;
        }

        ul.tszx li.tszx2 {
            color: #111;
            font: 12px Helvetica, Arial, sans-serif;
            line-height: 1.62;
            list-style: none;
            font-size: 0;
            margin: 0;
            display: inline-block;
            zoom: 1;
            vertical-align: top;
            width: 639px;
            border: solid 1px #ddd;
            border-radius: 2px;
            padding: 25px;
            box-sizing: border-box;
            margin-bottom: 4px;
        }

        ul.tszx li.tszx2 p:first-child {
            font: 12px Helvetica, Arial, sans-serif;
            list-style: none;
            cursor: pointer;
            line-height: 1.38;
            font-size: 15px;
            color: #37a;
        }

        ul.tszx li.tszx2 p:last-child {
            font: 12px Helvetica, Arial, sans-serif;
            list-style: none;
            cursor: pointer;
            color: #494949;
            line-height: 1.5;
            margin: 8px 0 0 0;
            font-size: 13px;
        }

        ul.tszx li.tszx2 span {
            font: 12px Helvetica, Arial, sans-serif;
            list-style: none;
            cursor: pointer;
            display: block;
            color: #aaa;
            font-size: 13px;
            line-height: 1;
            margin-top: 8px;
        }

        div.nav2 ul li {
            display: inline-block;
            text-align: center;
            line-height: 40px;
            margin-left: 5px;
        }

        div.nav2 ul li a {
            text-decoration: none;
            font: 13px Arial, Helvetica, sans-serif;
            line-height: 150%;
            cursor: pointer;
            color: #3377aa;
        }

        div.nav2 ul li a:hover {
            color: azure;
            background-color: #3377AA;
        }

        div.nav2 ul {
            border-bottom: 1px solid #ddd;
            width: 639px;
            padding-inline-start: 0px;
            margin-top: 20px;
        }

        table.newbooks tr td p:first-child {
            font: 14px Helvetica, Arial, sans-serif;
            line-height: 1.62;
            color: #3377aa;
        }

        table.newbooks tr td p:nth-child(2) {
            font: 13px Helvetica, Arial, sans-serif;
            line-height: 1.62;
            color: #111111;
        }

        table.newbooks tr td:nth-child(2) {
            padding-right: 100px;
        }

        table.newbooks tr td:nth-child(4) {
            padding-right: 100px;
        }

        table.newbooks tr td img {
            width: 80px;
            height: 100px;
            margin-top: 20px;
        }

        div.sell ul li a {
            text-decoration: none;
            font: 12px Helvetica, Arial, sans-serif;
            line-height: 1.62;
            font-size: 14px;
            color: #3377aa;
        }

        div.sell ul li p {
            font: 12px Helvetica, Arial, sans-serif;
            line-height: 1.62;
            margin: 0;
            color: #666;
            font-size: 13px;
        }

        div.sell ul li {
            display: inline-block;
            width: 300px;
            margin-bottom: 10px;
            border-bottom: 1px dotted #ccc;

        }

        div.sell h2 {
            padding: 0;
            font: 15px Arial, Helvetica, sans-serif;
            margin: 0 0 12px 0;
            line-height: 150%;
            color: #111;
            font-weight: bold;
            padding-bottom: 3px;
            margin-bottom: 16px;
            border-bottom: 1px solid #ddd;
            font-size: 18px;
        }

        div.sell {
            width: 300px;
            position: absolute;
            margin-left: 1020px;
            margin-top: 1000px;
            top: 250px;
        }

        div.care h2 {
            word-break: break-all;
            padding: 0;
            font: 15px Arial, Helvetica, sans-serif;
            margin: 0 0 12px 0;
            font-weight: bold;
            padding-bottom: 3px;
            margin-bottom: 16px;
            color: #222;
            border-bottom: 1px solid #E4E2E2;
            font-size: 14px;
            line-height: 25px;
        }

        div.care table tr td span {
            font-size: 40px;
        }

        div.care table tr:nth-child(2) {
            width: 50px;
            font-size: 12px;
            text-align: center;
            color: #3377AA;
        }
    </style>
</head>

<body>
    <header class="hed">
        <div class="div1">
            <ul style="padding-inline-start: 0px; ">

                <li>
                    <a href="https://www.douban.com/">豆瓣</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="#">FM</a>
                </li>
                <li>
                    <a href="#">时间</a>
                </li>
                <li>
                    <a href="#">豆品</a>
                </li>
            </ul>
            <div class="dli">
                <ul>
                    <li style="width: 90px;">
                        <a href="#">下载豆瓣客户端</a>
                    </li>
                    <li style="width: 90px; ">
                        <a href="#">登录/注册</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="div2">
            <div class="divdb">
                <div class="dbds" style="margin-left: 250px;">
                    <a href="#"
                        style="font-family: Helvetica, Arial,  sans-serif; font-size: 30px;font-weight: bold; text-decoration: none;color: #58402A;">豆瓣读书</a>
                </div>
                <div class="sosuo">
                    <input id="search" name="search" type="text" placeholder="书名,作者,ISBN"
                        style="width: 490px;height: 30px;margin-top: 15px;">
                    <label for="search"><span class="iconfont icon-sousuo"></span></label>
                </div>
            </div>
            <ul>
                <li>
                    <a href="#">购书单 </a>
                </li>
                <li>
                    <a href="#">电子图书</a>
                </li>
                <li>
                    <a href="#">豆瓣书店</a>
                </li>
                <li>
                    <a href="#">2021年度榜单</a>
                </li>
                <li>
                    <a href="#"> 2021书影音报告</a>
                </li>
                <li>
                    <a href="#">购物车
                        <span class="iconfont icon-MBEfenggeduosetubiao-gouwuche"></span></a>
                </li>
            </ul>
        </div>
    </header>
    <section class="xssd">
        <div class="nav">
            <ul style="padding-inline-start: 0px; margin-left: 250px;">
                <li style="font-size: 18px; font-weight: bold;width: 80px;">
                    <a href="https://www.douban.com/" style="color: black;font-size: 18px;">新书速递</a>
                </li>
                <li class="all">
                    <a href="#" style="color: black;">全部</a>
                </li>
                <li class="ltt">
                    <a href="#">文学</a>
                </li>
                <li class="fic">
                    <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="#" style="color: #3377aa;">更多>></a>
                </li>
        </div>
        <div class="books">
            <table>
                <tr>
                    <td>
                        <img src="./image/和魂.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">我看见无数的她</p>
                        <p>张莉</p>
                    </td>
                    <td>
                        <img src="./image/和魂.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">长安的荔枝</p>
                        <p>xxx</p>
                    </td>
                    <td>
                        <img src="./image/和魂.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">和魂</p>
                        <p>吴伟明</p>
                    </td>
                    <td>
                        <img src="./image/和魂.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">柠檬炸弹</p>
                        <p>基次郎</p>
                    </td>
                    <td>
                        <img src="./image/和魂.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">数字抑郁时代</p>
                        <p>sala</p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="./image/柠檬炸弹.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">我看见无数的她</p>
                        <p>张莉</p>
                    </td>
                    <td>
                        <img src="./image/柠檬炸弹.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">长安的荔枝</p>
                        <p>xxx</p>
                    </td>
                    <td>
                        <img src="./image/柠檬炸弹.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">和魂</p>
                        <p>吴伟明</p>
                    </td>
                    <td>
                        <img src="./image/柠檬炸弹.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">柠檬炸弹</p>
                        <p>基次郎</p>
                    </td>
                    <td>
                        <img src="./image/柠檬炸弹.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">数字抑郁时代</p>
                        <p>sala</p>
                    </td>
                </tr>
            </table>
            <ul class="tszx" style="margin-top: 40px;">
                <li class="tszx1">
                    <h4>图书资讯</h4>
                </li>
                <li class="tszx2">
                    <p>
                        那些不经意间收集的T恤故事，和根本连载不完的T恤们——《村上T》新书后记</p>
                    <span>文治图书</span>
                    <p>POPEYE杂志专访村上春树；采访者：野村训市。 ——最开始穿T恤的契机是什么呢？
                        “我开始穿T恤已经是很久以前的事了，不过在我十几岁的时候，身边还根本没有穿T恤的文化。
                        只有类似于汗衫、内衣之类的东西，上面没...
                    </p>
                </li>
            </ul>
            <div class="nav2">
                <ul>
                    <li style="width: 130px;">
                        <a href="https://www.douban.com/"
                            style="color: black;font-size: 18px; font-weight: bold;background-color: white;">最受关注图书榜</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="#" style="margin-left: 13px;">更多>></a>
                    </li>
                </ul>
                <table class="newbooks">
                    <tr>
                        <td>
                            <img src="./image/柠檬炸弹.jpg" alt="">
                        </td>
                        <td>
                            <p>柠檬炸弹</p>
                            <p>作者：基次郎</p>
                        </td>
                        <td><img src="./image/和魂.jpg" alt=""></td>
                        <td>
                            <p>和魂汉神</p>
                            <p>作者：吴伟明</p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img src="./image/柠檬炸弹.jpg" alt="">
                        </td>
                        <td>
                            <p>柠檬炸弹</p>
                            <p>作者：基次郎</p>
                        </td>
                        <td><img src="./image/和魂.jpg" alt=""></td>
                        <td>
                            <p>和魂汉神</p>
                            <p>作者：吴伟明</p>
                        </td>
                    </tr>
                    <tr>
                        <td><img src="./image/和魂.jpg" alt=""></td>
                        <td>
                            <p>和魂汉神</p>
                            <p>作者：吴伟明</p>
                        </td>
                        <td>
                            <img src="./image/柠檬炸弹.jpg" alt="">
                        </td>
                        <td>
                            <p>柠檬炸弹</p>
                            <p>作者：基次郎</p>
                        </td>
                    </tr>
                    <tr>
                        <td><img src="./image/和魂.jpg" alt=""></td>
                        <td>
                            <p>和魂汉神</p>
                            <p>作者：吴伟明</p>
                        </td>
                        <td>
                            <img src="./image/柠檬炸弹.jpg" alt="">
                        </td>
                        <td>
                            <p>柠檬炸弹</p>
                            <p>作者：基次郎</p>
                        </td>
                    </tr>
                    <tr>
                        <td><img src="./image/和魂.jpg" alt=""></td>
                        <td>
                            <p>和魂汉神</p>
                            <p>作者：吴伟明</p>
                        </td>
                        <td><img src="./image/和魂.jpg" alt=""></td>
                        <td>
                            <p>和魂汉神</p>
                            <p>作者：吴伟明</p>
                        </td>
                    </tr>

                </table>
            </div>
        </div>

        <div class="b-right" style="    color: #111;
    font: 12px Helvetica,Arial,sans-serif;
    line-height: 1.62;
    font-size: 13px;
    float: right;
    width: 300px;
    margin-right: 200px;">
            <h5 style="border-bottom: 1px solid #ddd;padding-bottom: 3px;
        margin-bottom: 16px;">
                <span style="    font: 15px Arial, Helvetica, sans-serif;
    line-height: 150%;
    color: #111;
    font-weight: bold;
    font-size: 16px;
    margin-right: 15px;">热门标签</span>
                <span><a href="#" style="    font: 13px Arial, Helvetica, sans-serif;
        line-height: 150%;
        cursor: pointer;
        text-decoration: none;
        color: #3377aa;">所有热门标签»</a> </span>
            </h5>
            <ul class="right1">
                <li><a href="#" style="color: #111;
                            font: 12px Helvetica,Arial,sans-serif;
                            line-height: 1.62;
                            font-size: 13px;
                            background-color: white;">文学</a> </li>
                <li>
                    <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 style="margin-bottom: 15px;"><a href="#" style="color: #aaa;">更多»</a></li>
                    </ul>
                </li>
                <ul>
                    <li><a href="#" style="color: #111;
                        font: 12px Helvetica,Arial,sans-serif;
                        line-height: 1.62;
                        font-size: 13px;
                        background-color: white;
                        margin-right: 230px;">流行</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 style="margin-bottom: 15px;"><a href="#" style="color: #aaa; ">更多»</a></li>
                </ul>
                <ul>
                    <li><a href="#" style="color: #111;
                        font: 12px Helvetica,Arial,sans-serif;
                        line-height: 1.62;
                        font-size: 13px;
                        background-color: white;
                        margin-right: 230px;">流行</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 style="margin-bottom: 15px;"><a href="#" style="color: #aaa; ">更多»</a></li>
                </ul>
                <ul>
                    <li><a href="#" style="color: #111;
                        font: 12px Helvetica,Arial,sans-serif;
                        line-height: 1.62;
                        font-size: 13px;
                        background-color: white;
                        margin-right: 230px;">流行</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 style="margin-bottom: 15px;"><a href="#" style="color: #aaa; ">更多»</a></li>
                </ul>
                <ul>
                    <li><a href="#" style="color: #111;
                        font: 12px Helvetica,Arial,sans-serif;
                        line-height: 1.62;
                        font-size: 13px;
                        background-color: white;
                        margin-right: 230px;">流行</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 style="margin-bottom: 15px;"><a href="#" style="color: #aaa; ">更多»</a></li>
                </ul>
                <ul>
                    <li><a href="#" style="color: #111;
                        font: 12px Helvetica,Arial,sans-serif;
                        line-height: 1.62;
                        font-size: 13px;
                        background-color: white;
                        margin-right: 230px;">流行</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 style="margin-bottom: 15px;"><a href="#" style="color: #aaa; ">更多»</a></li>
                </ul>
            </ul>
        </div>
        <div class="sell">
            <h2>畅销图书榜</h2>
            <ul style="padding-left: 0px;">
                <li>
                    <a href="#">钝感力</a>
                    <p style="text-align:left ;">[日]渡边淳一</p>
                </li>

                <li>
                    <a href="#">尘埃落定</a>
                    <p>[日]渡边淳一</p>
                </li>

                <li>
                    <a href="#">生死疲劳</a>
                    <p>[日]渡边淳一</p>
                </li>

                <li>
                    <a href="#">科普绘本</a>
                    <p>[日]渡边淳一</p>
                </li>

                <li>
                    <a href="#">小聪明豆</a>
                    <p>[日]渡边淳一</p>
                </li>

                <li>
                    <a href="#">张嘉骅少年读</a>
                    <p>[日]渡边淳一</p>
                </li>

                <li>
                    <a href="#">苏东坡传</a>
                    <p>[日]渡边淳一</p>
                </li>

                <li>
                    <a href="#">瓦尔登湖</a>
                    <p>[日]渡边淳一</p>
                </li>
            </ul>
            <div class="care">
                <h2>关注我们</h2>
                <table>
                    <tr>
                        <td>
                            <span class="iconfont icon-douban"></span>
                        </td>
                        <td>
                            <span class="iconfont icon-weibo"></span>
                        </td>
                        <td>
                            <span class="iconfont icon-weixinfang"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>豆瓣小站</td>
                        <td>微博</td>
                        <td>微信</td>
                    </tr>
                </table>
            </div>
        </div>
    </section>
</body>

</html>