console
<div id="shang">
<div id="shangzuo">
<a id="diyi" href="#">读书</a><br><br>
<a id="dier" href="#">分类浏览</a><br><br>
<a id="dier" href="#">阅读</a><br><br>
<a id="dier" href="#">作者</a><br><br>
<a id="dier" href="#">书评</a><br><br>
<a id="dier" href="#">购书单</a><br><br>
</div>
<div id="shangzhongs">
<a href="#">新书速递······(更多) </a>
</div>
<div id="shangzhongx">
<div id="d1">
<a href="#">
<img src="https://img1.doubanio.com/view/subject/m/public/s33561587.jpg" ></a>
<br>
大小谎言<br>〔澳〕莉安·莫. <br><br><br>
<a href="#">
<img src="https://img9.doubanio.com/view/ark_column_cover/large/public/32865636.jpg?v=1582088678" ></a>
<br>
星环 · 无限.
</div>
<div id="d1" class="d1">
<a href="#">
<img src="https://img9.doubanio.com/view/subject/m/public/s33595195.jpg" ></a>
<br>
午后四点
<br>〔比〕阿梅丽. <br><br><br>
<a href="#">
<img src="https://img1.doubanio.com/view/ark_column_cover/large/public/32733717.jpg?v=1576230474" ></a>
<br>
干活吧!生<br>活委..
</div>
<div id="d1" class="d1">
<a href="#">
<img src="https://img3.doubanio.com/view/subject/m/public/s33609511.jpg" ></a>
<br>
私恋失调 <br><br><br><br>
<a href="#">
<img src="https://img9.doubanio.com/view/ark_column_cover/large/public/32454375.jpg?v=1568008522" ></a>
<br>
我和猫妖在长安...
</div>
<div id="d1" class="d1">
<a href="#">
<img src="https://img9.doubanio.com/view/subject/m/public/s33615876.jpg" ></a>
<br>
语言的诞生 <br><br><br><br>
<a href="#">
<img src="https://img1.doubanio.com/view/ark_column_cover/large/public/32747989.jpg?v=1578278816" ></a>
<br>
女子博士图鉴
</div>
</div>
<div id="shangyou">
<a href="#" id="shangyouz">热门标签 · · · · · · </a><br><hr >
<a href="#">[文学]</a> <a href="#">小说</a>
<a href="#">喜剧</a>
<a href="#">小说</a>
<a href="#">随笔</a> <br>
<a href="#">日本文学</a> <a href="#">动作</a>
<a href="#">童话</a> <a href="#">犯罪</a>
<a href="#">港台</a> <br><hr >
<a href="#">[流行]</a> <a href="#">漫画</a>
<a href="#">推理</a> <a href="#">绘本</a>
<a href="#">青春</a> <br>
<a href="#">科幻</a> <a href="#">言情</a>
<a href="#">奇幻</a> <a href="#">更多</a>
<br><hr >
<a href="#">[文化]</a> <a href="#">历史</a>
<a href="#">哲学</a> <a href="#">专辑</a>
<a href="#">设计</a> <a href="#">建造</a>
<a href="#">电影</a> <br><a href="#">回忆录</a>
<a href="#">音乐</a> <a href="#">更多</a>
<br><hr >
<a href="#">[生活]</a> <a href="#">旅行</a>
<a href="#">励志</a> <a href="#">教育</a>
<a href="#">职场</a> <a href="#">美食</a>
<a href="#">临修</a> <br><a href="#">家具</a>
<a href="#">健康</a> <a href="#">更多</a>
<br><hr >
<a href="#">[经管]</a> <a href="#">经济学</a>
<a href="#">管理</a> <a href="#">商业</a>
<a href="#">金融</a> <a href="#">营销</a>
<a href="#">理财</a> <br><a href="#">股票</a>
<a href="#">企业时</a> <a href="#">更多</a>
<br><hr >
<a href="#">[科技]</a> <a href="#">科普</a>
<a href="#">交付设计</a> <a href="#">编程</a>
<a href="#">互联网</a> <a href="#">算法</a>
<a href="#">临修</a> <br><a href="#">神经网络</a>
<a href="#">健康</a> <a href="#">更多</a>
<br><hr >
</div>
</div>
a{
text-decoration: none;
}
#shang{
width: auto;
height: auto;
margin-left: 5%;
}
#shangzuo{
float: left;
width: 80px;
}
#diyi{
font-size: 35px;
}
#shangzuo a{
color: rgb(34, 119, 170);
color: #000000;
}
#shangzhongs{
width: 170px;
height: 20px;
padding: 0;
float: left;
margin-left: 100px;
margin-top: 0px;
}
#shangzhongs a{
color: #072;
margin-left: -20px;
}
#shangzhongx{
width: 650px;
float: left;
margin-left: -190px;
margin-top: 30px;
}
#d1{
float: left;
}
#shangzhongx img{
width: 110px;
height: 150px;
margin-left: 0px;
}
.d1{
margin-left: 30px;
}
#shangyou{
float: left;
margin-left: 10px;
margin-top: 0;
}
#shangyou a{
color: #000000;
}
#shangyou #shangyouz {
color: #072;
}