CSS篇-dbMovies和dbBooks小网页
2024-05-17 06:46:49
目录
1. dbMovies
2.dbBooks
1. dbMovies
html和css代码和效果图放在这里啦~
html代码实现:
<!DOCTYPE html>
<html lang="en"><head><title>小m的豆瓣</title><link rel="stylesheet" href="./dbmovie.css" /><link rel="stylesheet" href="./iconfont/iconfont.css" /></head><body><header class="dbHeader"><div class="hNav"><ul class="left"><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="#">FM</a></li><li><a href="#">时间</a></li><li><a href="#">豆品</a></li></ul><ul class="right"><li><a href="#">下载豆瓣客户端</a></li><li><a href="#">登录/注册</a></li></ul></div><div class="hMain"><div class="hmSearch"><span>豆瓣电影</span><input type="text" placeholder="搜索电影, 电视剧, 综艺, 影人" /><button><i class="iconfont icon-search"></i></button><!-- <div></div> --></div><ul class="hmNav"><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="#">2022年度榜单</a></li><li><a href="#">2022书影音报告</a></li></ul></div></header><!-- 正在热映 --><section class="target"><div class="tNav"><span>正在热映</span><ul class="left"><li><a href="#">全部正在热映<i class="iconfont icon-shuangyou_double-right"></i></a></li><li><a href="#">即将上映<i class="iconfont icon-shuangyou_double-right"></i></a></li></ul><ul class="right"><li>2 / 3</li><li><a href="#"><i class="iconfont icon-arrow-left-bold"></i></a></li><li><a href="#"><i class="iconfont icon-arrow-right-bold"></i></a></li></ul></div><div class="tMain"><ul><li><img src="./images/p1.jpg" alt="" /><p>风吹半夏</p><p>★★★☆☆ 5.2</p><div>选座购票</div></li><li><img src="./images/p1.jpg" alt="" /><p>风吹半夏</p><p>★★★☆☆ 5.2</p><div>选座购票</div></li><li><img src="./images/p1.jpg" alt="" /><p>风吹半夏</p><p>★★★☆☆ 5.2</p><div>选座购票</div></li><li><img src="./images/p1.jpg" alt="" /><p>风吹半夏</p><p>★★★☆☆ 5.2</p><div>选座购票</div></li><li><img src="./images/p1.jpg" alt="" /><p>风吹半夏</p><p>★★★☆☆ 5.2</p><div>选座购票</div></li></ul></div><div class="tfoot"><ul><li><div><</div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div>></div></li></ul></div><!-- 侧边栏 --><aside class="week"><!-- 块元素中可以写行内元素, 但行内元素中不要写块 --><ul><li>一周口碑榜</li><li>更多榜单>></li></ul><ol><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="#">他说</a></li><li><a href="#">我记得</a></li></ol></aside></section><!-- 热门推荐 --><section class="advice"><div class="adHeader"><span>热门推荐</span><ul><li>1 / 4</li><li><a href="#"><i class="iconfont icon-arrow-left-bold"></i></a></li><li><a href="#"><i class="iconfont icon-arrow-right-bold"></i></a></li></ul></div><div class="adMain"><div class="adMImg"><img src="./images/a.png" alt="" /></div><div class="adMContent"><h2 style="font-weight: 500">斯皮尔伯格新作《造梦之家》预告</h2><p>名导史蒂文·斯皮尔伯格自传式力作！米歇尔·威廉姆斯、保罗·达诺、塞斯·罗根主演。</p></div></div><aside class="adRight"><div class="rHot"><h4>热门片单</h4><ul><li><a href="#">179部经典港片</a><span>3456推荐</span></li><li><a href="#">179部经典港片</a><span>56推荐</span></li></ul></div><div class="rTeam"><h4>合作联系</h4><a href="#">电影合作邮箱: movie@mteee.icu</a><a href="#">电影合作邮箱: movie@mteee.icu</a></div><div class="rOur"><h4>关注我们</h4><ul><li><a href="#"><i class="iconfont icon-weixin"></i><p>微信</p></a></li><li><a href="#"><i class="iconfont icon-weixin"></i><p>微信</p></a></li><li><a href="#"><i class="iconfont icon-weixin"></i><p>微信</p></a></li><li><a href="#"><i class="iconfont icon-weixin"></i><p>微信</p></a></li></ul></div></aside></section><!-- 最受欢迎的影评 --><section class="review"><div class="rHeader"><span>最受欢迎的影评</span><ul><li><a href="#">全部正在热映<i class="iconfont icon-shuangyou_double-right"></i></a></li><li><a href="#">即将上映<i class="iconfont icon-shuangyou_double-right"></i></a></li></ul></div><div class="rMain"><img src="./images/b.webp" alt="" /><div class="rmContent"><ul><li><a href="#">中国大使回忆索马里内战撤离往事（ZT）</a></li><li style="color: rgb(247, 200, 139)"><a href="#">来电和断电</a><a href="#">评论</a><a href="#">《摩加迪沙》</a><span><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-favorite"></i><i class="iconfont icon-favorite"></i></span></li><li><span>2个长期隔离、仇恨、互相攻击的前兄弟国家，在突然爆发的危机面前，被迫抱团求生，就像冬天里的刺猬，为了抱团取暖需要挤在一起，但又不能太近，这种题材本身就很吸引眼球。话说，咱中国大使馆就这么被攻克了吗...</span><a href="#">(全文)</a></li></ul></div></div></section><footer class="dbfooter"><span> © 2022－2023 mteee.icu, all rights reserved 小m网络有限公司</span><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></ul></footer></body>
</html>
css代码实现
* {margin: 0;padding: 0;
}
ul li {list-style: none;
}/* 头部 */
header.dbHeader {width: 100%;/* height: 185px; */background-color: rgb(191, 226, 240);
}header.dbHeader div.hNav {height: 35px;background-color: pink;
}header.dbHeader div.hNav ul li,
section.target div.tNav ul li,
section.review div.rHeader ul li {display: inline-block;margin-right: 15px;/* 设置间距width: 50px; text-align: center;*/line-height: 35px;vertical-align: center;font-size: 12px;
}header.dbHeader div.hNav ul li a,
section.target div.tNav ul li a,
section.target aside.week ol li a,
footer.dbfooter ul li a,
section.advice div.adHeader ul li a,
section.review div.rHeader ul li a,
section.review div.rMain div.rmContent a,
section.advice aside.adRight a {text-decoration: none;color: rgb(87, 87, 140);
}header.dbHeader div.hNav ul li a:hover,
header.dbHeader div.hMain ul.hmNav li a:hover,
section.target div.tNav ul li a:hover,
section.target div.tNav ul li a i.iconfont:hover,
section.target aside.week ol li a:hover,
section.advice div.adHeader ul li a i.iconfont:hover,
footer.dbfooter ul li a:hover,
section.review div.rHeader ul li a i.iconfont:hover,
section.advice aside.adRight a:hover,
section.advice aside.adRight div.rOue ul li a i.iconfont:hover {color: rgb(169, 169, 208);
}header.dbHeader div.hNav ul.right,
section.target div.tNav ul.right {position: absolute;top: 0;right: 0;
}header.dbHeader div.hNav ul.right li {width: 100px;
}header.dbHeader div.hMain {/* margin: 0 auto;width: 90%; *//* text-align: center; */background-color: rgb(244, 219, 219);
}header.dbHeader div.hMain div.hmSearch {position: relative;padding-left: 140px;height: 90px;line-height: 90px;font-size: 25px;font-family: '宋体';background-color: rgb(254, 174, 174);
}header.dbHeader div.hMain div.hmSearch input {width: 30%;height: 30px;
}header.dbHeader div.hMain div.hmSearch button {position: absolute;bottom: 24px;padding: 4px;border: 1px solid #7f7f8e;border-left: 0;border-top-right-radius: 2px;border-bottom-right-radius: 2px;cursor: pointer;
}header.dbHeader div.hMain div.hmSearch button i.iconfont {font-size: 22px;color: #414164;
}header.dbHeader div.hMain ul.hmNav {padding-left: 140px;
}
header.dbHeader div.hMain ul.hmNav li {display: inline-block;margin-right: 40px;line-height: 60px;vertical-align: center;text-align: center;font-size: 12px;
}header.dbHeader div.hMain ul.hmNav li a {text-decoration: none;font-size: 16px;color: rgb(87, 87, 140);
}/* 正在热映 */
section.target {position: relative;margin: 0 140px;width: 60%;border-bottom: 1px solid rgb(177, 177, 181);background-color: rgb(221, 241, 248);
}section.target div.tNav {margin: 0 auto;position: relative;border-bottom: 1px solid rgb(177, 177, 181);
}section.target div.tNav span,
section.review div.rHeader span {margin-right: 10px;font-size: 18px;
}section.target div.tNav ul.left,
section.review div.rHeader ul {display: inline-block;
}section.target div.tNav ul.left li,
section.review div.rHeader ul li {display: inline-block;width: 90px;
}/* 字体图标 */
section.target div.tNav ul.left li a i.iconfont,
section.target div.tNav ul.right li i.iconfont,
section.advice div.adHeader ul li a i.iconfont,
section.review div.rHeader ul li a i.iconfont {font-size: 13px;color: #57578c;
}section.target div.tNav ul.right li {width: 30px;color: #57578c;
}section.target div.tMain ul li {display: inline-block;width: 15%;margin: 20px;font-size: 15px;text-align: center;
}section.target div.tMain ul li img {width: 100%;margin-bottom: 3px;
}section.target div.tMain ul li img ~ p {margin-bottom: 3px;/* 超出一行隐藏并显示省略号 */white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}section.target div.tMain ul li div {margin: auto;padding: 4px;/* width: 80px; */background-color: rgb(178, 227, 249);border-radius: 3px;
}section.target div.tfoot {height: 30px;line-height: 30px;text-align: center;/* background-color: rgb(213, 233, 253); */
}section.target div.tfoot ul li {display: inline-block;margin: 0 5px;
}section.target div.tfoot ul li div {width: 5px;height: 5px;background-color: #fff;border-radius: 50%;
}section.target div.tfoot ul li:first-child div,
section.target div.tfoot ul li:last-child div {margin: 5px 0;width: 20px;height: 20px;line-height: 20px;text-align: center;color: rgb(173, 173, 209);font-weight: 800;background-color: #cbe6f4;
}/* 一周 侧边栏 */
section.target aside.week {position: absolute;top: 15px;right: -330px;width: 220px;padding: 20px;padding-left: 40px;color: rgb(98, 98, 132);background-color: antiquewhite;
}aside.week ul li:first-child {position: absolute;left: 10px;top: 20px;font-weight: 700;
}
aside.week ul li:last-child {position: absolute;right: 10px;top: 20px;font-size: 12px;
}
aside.week ol {margin-top: 30px;
}
aside.week ol li {clear: both;margin: 10px 0;margin-bottom: 1px solid rgb(217, 207, 116);
}aside.week h4 small {margin-left: 10px;font-weight: 100;
}section.target aside.week ol li a {color: rgb(98, 98, 132);
}/* 热门推荐 */
section.advice,
section.review {position: relative;margin: 20px 140px;width: 60%;height: 350px;border-bottom: 1px solid rgb(177, 177, 181);background-color: rgb(221, 241, 248);
}section.advice div.adHeader,
section.review div.rHeader {padding: 20px 10px 5px 0;height: 30px;line-height: 30px;border-bottom: 1px solid rgb(177, 177, 181);
}section.advice div.adHeader span,
section.review div.rHeader span {float: left;font-size: 18px;
}section.advice div.adHeader ul {float: right;
}section.advice div.adHeader ul li {float: left;margin: 0 20px;font-size: 12px;color: rgb(87, 87, 140);
}section.advice div.adMain {padding: 25px 50px;/* height: 300px; */
}section.advice div.adMain div.adMImg {float: left;/* width: 30%; */
}section.advice div.adMain div.adMContent {float: right;margin-top: 40px;width: 400px;/* background-color: #fff; */
}section.advice div.adMain div.adMContent p {margin-top: 20px;color: #57578c;
}/* 热门片单侧边栏 */
section.advice aside.adRight {position: absolute;top: 40px;right: -330px;padding: 10px;width: 260px;background-color: #d5d5e9;
}section.advice aside.adRight h4 {line-height: 50px;border-bottom: 1px solid #885aa4;
}section.advice aside.adRight div.rHot ul,
section.advice aside.adRight div.rTeam a,
section.advice aside.adRight div.rOue ul {display: block;padding: 10px 20px;font-size: 14px;line-height: 30px;
}section.advice aside.adRight div.rTeam a {padding-bottom: 0;
}section.advice aside.adRight div.rHot ul li span {float: right;font-size: 12px;color: #323256;
}section.advice aside.adRight div.rOur ul li {display: inline-block;margin: 10px 15px 10px 20px;font-size: 12px;
}section.advice aside.adRight div.rOur ul li i.iconfont {font-size: 25px;
}/* 最受欢迎的影评 */
section.review div.rMain {position: relative;padding: 30px;
}section.review div.rMain img {width: 20%;
}section.review div.rMain div.rmContent {position: absolute;top: 30px;right: 40px;width: 70%;
}section.review div.rMain div.rmContent ul li {margin-top: 15px;
}section.review div.rMain div.rmContent ul li:first-child {font-size: 20px;
}section.review div.rMain div.rmContent ul li:nth-child(2) a {margin-right: 10px;
}/* 页尾 */
footer.dbfooter {margin-top: 10px;width: 100%;height: 40px;line-height: 40px;font-size: 12px;background-color: rgb(235, 149, 149);
}footer.dbfooter ul {float: right;margin-right: 30px;
}footer.dbfooter ul li {margin: 0 10px;display: inline-block;
}footer.dbfooter span {margin-left: 30px;color: rgb(87, 87, 140);
}
2.dbBooks
效果图:
html代码实现
<!DOCTYPE html>
<html lang="en">
<head><title>豆瓣读书-小m</title><link rel="stylesheet" href="./dbBooks.css"><link rel="shortcut icon" href="https://img1.doubanio.com/favicon.ico" type="image/x-icon"><link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body><!-- 头部 --><header><ul class="left"><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="#">FM</a></li><li><a href="#">时间</a></li><li><a href="#">豆品</a></li></ul><ul class="right"><li><a href="#">下载豆瓣客户端</a></li><li><a href="#">登录/注册</a></li></ul></header><!-- 头部完 --><!-- 内容区域 --><div class="dbMain "><!-- 内容导航 --><section class="mainHead"><div class="mainHead_search "><a href="#" class="text">豆瓣读书</a><div class="search"><input type="text" placeholder="书名、作者、ISBN"><span class="iconfont icon-search"></span></div></div><div class="mainHead_nav wrapper"><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="#"><i class="iconfont icon-cart-full "></i>购物车</a></li></ul><a href="#" class="img" ><img src="https://img3.doubanio.com/dae/accounts/resources/3e96b44/book/assets/annual_2021.png" alt=""></a></div></section><!-- 内容导航完 --><!-- 新书速递 --><section class="newBooks wrapper"><ul class="newBooks_nav"><li><h3>新书速递</h3></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="#">绘本漫画</a></li><li><a href="#">更多<i class="iconfont icon-shuangyou_double-right"></i></a></li></ul><ul class="newBooks_content"><li><a href="#"><img src="./images/1.jpg" alt=""></a><p><a href="#">不原谅也没关系：复杂性创伤后压力综合征自我疗愈圣经</a></p><span>[美]皮特•沃克</span></li><li><a href="#"><img src="./images/1.jpg" alt=""></a><p><a href="#">不原谅也没关系：复杂性创伤后压力综合征自我疗愈圣经</a></p><span>[美]皮特•沃克</span></li><li><a href="#"><img src="./images/1.jpg" alt=""></a><p><a href="#">不原谅也没关系：复杂性创伤后压力综合征自我疗愈圣经</a></p><span>[美]皮特•沃克</span></li><li><a href="#"><img src="./images/1.jpg" alt=""></a><p><a href="#">不原谅也没关系：复杂性创伤后压力综合征自我疗愈圣经</a></p><span>[美]皮特•沃克</span></li><li><a href="#"><img src="./images/1.jpg" alt=""></a><p><a href="#">不原谅也没关系：复杂性创伤后压力综合征自我疗愈圣经</a></p><span>[美]皮特•沃克</span></li><li><a href="#"><img src="./images/1.jpg" alt=""></a><p><a href="#">不原谅也没关系：复杂性创伤后压力综合征自我疗愈圣经</a></p><span>[美]皮特•沃克</span></li><li><a href="#"><img src="./images/1.jpg" alt=""></a><p><a href="#">不原谅也没关系：复杂性创伤后压力综合征自我疗愈圣经</a></p><span>[美]皮特•沃克</span></li><li><a href="#"><img src="./images/1.jpg" alt=""></a><p><a href="#">不原谅也没关系：复杂性创伤后压力综合征自我疗愈圣经</a></p><span>[美]皮特•沃克</span></li><li><a href="#"><img src="./images/1.jpg" alt=""></a><p><a href="#">不原谅也没关系：复杂性创伤后压力综合征自我疗愈圣经</a></p><span>[美]皮特•沃克</span></li><li><a href="#"><img src="./images/1.jpg" alt=""></a><p><a href="#">不原谅也没关系：复杂性创伤后压力综合征自我疗愈圣经</a></p><span>[美]皮特•沃克</span></li></ul><div class="newBooks_footer"><span class="iconfont icon-arrow-left-bold"></span><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></ul><span class="iconfont icon-arrow-right-bold"></span></div></section><!-- 新书速递完 --><!-- 图书资讯 --><section class="message wrapper"><div class="message_header"><h3>图书资讯</h3><div class="right"><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul><span class="iconfont icon-arrow-left-bold"></span><span class="iconfont icon-arrow-right-bold"></span></div></div><div class="message_content"><ul><li><a href="#">那些不经意间收集的T恤故事，和根本连载不完的T恤们——《村上T》新书后记</a></li><li><a href="#">文治图书</a></li><li><a href="#">POPEYE杂志专访村上春树；采访者：野村训市。 ——最开始穿T恤的契机是什么呢？ “我开始穿T恤已经是很久以前的事了，不过在我十几岁的时候，身边还根本没有穿T恤的文化。只有类似于汗衫、内衣之类的东西，上面没...</a></li></ul><a href="#" class="img"><img src="./images/2.webp" alt=""></a></div></section><!-- 图书资讯完 --><!-- 最受关注图书榜 --><section class="focus wrapper"><ul class="focus_nav"><li><h3>最受关注图书榜</h3></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="#">更多<i class="iconfont icon-shuangyou_double-right"></i></a></li></ul><div class="focus_content"><div class="content"><span class="left"><a href="#"><img src="./images/3.jpg" alt=""></a></span> <ul><li><a href="#">始于极简: 女性主义往复书简</a></li><li><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i>9.3</li><li>作者：[日] 上野千鹤子 / [日] 铃木凉美</li><li><span>有电子书</span></li></ul> </div><div class="content"><span class="left"><a href="#"><img src="./images/3.jpg" alt=""></a></span> <ul><li><a href="#">始于极简: 女性主义往复书简</a></li><li><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i>9.3</li><li>作者：[日] 上野千鹤子 / [日] 铃木凉美</li><li><span>有电子书</span></li></ul> </div><div class="content"><span class="left"><a href="#"><img src="./images/3.jpg" alt=""></a></span> <ul><li><a href="#">始于极简: 女性主义往复书简</a></li><li><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i>9.3</li><li>作者：[日] 上野千鹤子 / [日] 铃木凉美</li><li><span>有电子书</span></li></ul> </div><div class="content"><span class="left"><a href="#"><img src="./images/3.jpg" alt=""></a></span> <ul><li><a href="#">始于极简: 女性主义往复书简</a></li><li><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i>9.3</li><li>作者：[日] 上野千鹤子 / [日] 铃木凉美</li><li><span>有电子书</span></li></ul> </div><div class="content"><span class="left"><a href="#"><img src="./images/3.jpg" alt=""></a></span> <ul><li><a href="#">始于极简: 女性主义往复书简</a></li><li><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i>9.3</li><li>作者：[日] 上野千鹤子 / [日] 铃木凉美</li><li><span>有电子书</span></li></ul> </div><div class="content"><span class="left"><a href="#"><img src="./images/3.jpg" alt=""></a></span> <ul><li><a href="#">始于极简: 女性主义往复书简</a></li><li><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i>9.3</li><li>作者：[日] 上野千鹤子 / [日] 铃木凉美</li><li><span>有电子书</span></li></ul> </div><div class="content"><span class="left"><a href="#"><img src="./images/3.jpg" alt=""></a></span> <ul><li><a href="#">始于极简: 女性主义往复书简</a></li><li><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i>9.3</li><li>作者：[日] 上野千鹤子 / [日] 铃木凉美</li><li><span>有电子书</span></li></ul> </div><div class="content"><span class="left"><a href="#"><img src="./images/3.jpg" alt=""></a></span> <ul><li><a href="#">始于极简: 女性主义往复书简</a></li><li><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i>9.3</li><li>作者：[日] 上野千鹤子 / [日] 铃木凉美</li><li><span>有电子书</span></li></ul> </div></div></section><!-- 最受关注图书榜完 --><!-- 豆瓣书店 --><section class="bookstore wrapper"><div class="bookstore_head"><h3>豆瓣书店</h3><a href="#">查看全部<i class="iconfont icon-shuangyou_double-right"></i></a></div><div class="bookstore_content"><div class="content"><a href="#" class="img"><img src="./images/5.png" alt=""></a><p><a href="#">索福克勒斯悲剧集</a></p><span>￥ 126.00</span></div><div class="content"><a href="#" class="img"><img src="./images/3.png" alt=""></a><p><a href="#">奈良美智：始于空无一物的世界</a></p><span>￥ 188.00</span></div><div class="content"><a href="#" class="img"><img src="./images/3.png" alt=""></a><p><a href="#">奈良美智：始于空无一物的世界</a></p><span>￥ 188.00</span></div><div class="content"><a href="#" class="img"><img src="./images/3.png" alt=""></a><p><a href="#">奈良美智：始于空无一物的世界</a></p><span>￥ 188.00</span></div><div class="content"><a href="#" class="img"><img src="./images/3.png" alt=""></a><p><a href="#">奈良美智：始于空无一物的世界</a></p><span>￥ 188.00</span></div></div></section><!-- 豆瓣书店完 --><!-- 电子图书 --><section class="electronic wrapper"><div class="ele_head"><h3>电子图书</h3><a href="#">查看全部<i class="iconfont icon-shuangyou_double-right"></i></a></div><div class="ele_content_head"><span>热门电子图书</span><a href="#">更多<i class="iconfont icon-shuangyou_double-right"></i></a></div><div class="ele_content"><div class="content"><a href="#" class="img"><img src="./images/6.jpg" alt=""></a><p><a href="#">下班后开始新的一天</a></p><span>￥ 19.99</span></div><div class="content"><a href="#" class="img"><img src="./images/6.jpg" alt=""></a><p><a href="#">下班后开始新的一天</a></p><span>￥ 19.99</span></div><div class="content"><a href="#" class="img"><img src="./images/6.jpg" alt=""></a><p><a href="#">下班后开始新的一天</a></p><span>￥ 19.99</span></div><div class="content"><a href="#" class="img"><img src="./images/6.jpg" alt=""></a><p><a href="#">下班后开始新的一天</a></p><span>￥ 19.99</span></div><div class="content"><a href="#" class="img"><img src="./images/6.jpg" alt=""></a><p><a href="#">下班后开始新的一天</a></p><span>￥ 19.99</span></div><div class="content"><a href="#" class="img"><img src="./images/6.jpg" alt=""></a><p><a href="#">下班后开始新的一天</a></p><span>￥ 19.99</span></div><div class="content"><a href="#" class="img"><img src="./images/6.jpg" alt=""></a><p><a href="#">下班后开始新的一天</a></p><span>￥ 19.99</span></div><div class="content"><a href="#" class="img"><img src="./images/6.jpg" alt=""></a><p><a href="#">下班后开始新的一天</a></p><span>￥ 19.99</span></div><div class="content"><a href="#" class="img"><img src="./images/6.jpg" alt=""></a><p><a href="#">下班后开始新的一天</a></p><span>￥ 19.99</span></div><div class="content"><a href="#" class="img"><img src="./images/6.jpg" alt=""></a><p><a href="#">下班后开始新的一天</a></p><span>￥ 19.99</span></div></div></section><!-- 电子图书完 --><!-- 最受欢迎的书评 --><section class="review wrapper"><div class="review_head"><h3>最受欢迎的书评</h3><a href="#">更多热门书评<i class="iconfont icon-shuangyou_double-right"></i></a><a href="#">最新书评<i class="iconfont icon-shuangyou_double-right"></i></a></div><div class="review_content"><div class="content"><div class="left"><img src="./images/7.jpg" alt=""></div><div class="right"><ul><li><a href="#">通透的人生才对得起经历的悠悠岁月</a></li><li><a href="#">想飞的鱼</a><span>评论</span><a href="#">《时间是良药》</a><span><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i></span></li><li><span>姥姥离开我已经将近十年了，直到现在，我还记得她曾经说过的话。虽然小时候，在我看来，没有任何感受，有时候还觉得骇人听闻，但是，现在，随着自己年岁增长，渐渐领悟到之前姥姥说的朴素的话，是非常有哲理且富...</span><a href="#">(全文)</a></li></ul></div></div><div class="content"><div class="left"><img src="./images/7.jpg" alt=""></div><div class="right"><ul><li><a href="#">通透的人生才对得起经历的悠悠岁月</a></li><li><a href="#">想飞的鱼</a><span>评论</span><a href="#">《时间是良药》</a><span><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i></span></li><li><span>姥姥离开我已经将近十年了，直到现在，我还记得她曾经说过的话。虽然小时候，在我看来，没有任何感受，有时候还觉得骇人听闻，但是，现在，随着自己年岁增长，渐渐领悟到之前姥姥说的朴素的话，是非常有哲理且富...</span><a href="#">(全文)</a></li></ul></div></div><div class="content"><div class="left"><img src="./images/7.jpg" alt=""></div><div class="right"><ul><li><a href="#">通透的人生才对得起经历的悠悠岁月</a></li><li><a href="#">想飞的鱼</a><span>评论</span><a href="#">《时间是良药》</a><span><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i></span></li><li><span>姥姥离开我已经将近十年了，直到现在，我还记得她曾经说过的话。虽然小时候，在我看来，没有任何感受，有时候还觉得骇人听闻，但是，现在，随着自己年岁增长，渐渐领悟到之前姥姥说的朴素的话，是非常有哲理且富...</span><a href="#">(全文)</a></li></ul></div></div><div class="content"><div class="left"><img src="./images/7.jpg" alt=""></div><div class="right"><ul><li><a href="#">通透的人生才对得起经历的悠悠岁月</a></li><li><a href="#">想飞的鱼</a><span>评论</span><a href="#">《时间是良药》</a><span><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i></span></li><li><span>姥姥离开我已经将近十年了，直到现在，我还记得她曾经说过的话。虽然小时候，在我看来，没有任何感受，有时候还觉得骇人听闻，但是，现在，随着自己年岁增长，渐渐领悟到之前姥姥说的朴素的话，是非常有哲理且富...</span><a href="#">(全文)</a></li></ul></div></div><div class="content"><div class="left"><img src="./images/7.jpg" alt=""></div><div class="right"><ul><li><a href="#">通透的人生才对得起经历的悠悠岁月</a></li><li><a href="#">想飞的鱼</a><span>评论</span><a href="#">《时间是良药》</a><span><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i></span></li><li><span>姥姥离开我已经将近十年了，直到现在，我还记得她曾经说过的话。虽然小时候，在我看来，没有任何感受，有时候还觉得骇人听闻，但是，现在，随着自己年岁增长，渐渐领悟到之前姥姥说的朴素的话，是非常有哲理且富...</span><a href="#">(全文)</a></li></ul></div></div></div></section><!-- 最受欢迎的书评完 --><!-- 侧边栏 --><aside><!-- 广告1 --><div class="aside_ad1"> <a href="#"><img src="" alt=""></a><span>谷歌提供的广告</span></div> <!-- 广告1完 --><!-- 热门标签 --><div class="aside_hot"> <div class="aside_hot_head"><span>热门标签</span><a href="#">所有热门标签<i class="iconfont icon-shuangyou_double-right"></i></a></div><div class="iterature"><p>文学</p><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><a href="#">更多<i class="iconfont icon-shuangyou_double-right"></i></a></li></ul></div><div class="popular"><p>流行</p><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><a href="#">更多<i class="iconfont icon-shuangyou_double-right"></i></a></li></ul></div><div class="culture"><p>文化</p><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><a href="#">更多<i class="iconfont icon-shuangyou_double-right"></i></a></li></ul></div><div class="life"><p>生活</p><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><a href="#">更多<i class="iconfont icon-shuangyou_double-right"></i></a></li></ul></div><div class="economic"><p>经管</p><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><a href="#">商业</a></li><li><a href="#">更多<i class="iconfont icon-shuangyou_double-right"></i></a></li></ul></div><div class="technology"><p>科技</p><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="#">更多<i class="iconfont icon-shuangyou_double-right"></i></a></li></ul></div></div><!-- 热门标签完 --><!-- 畅销图书榜 --><div class="aside_sale"><h3>畅销图书榜</h3><ul><li class=""><span>1.</span><div><a href="#">人鱼陷落</a><p>麟潜</p></div><span class="shop"><a href="#" >去购买</a></span></li><li><span>2.</span><div><a href="#">人鱼陷落</a><p>麟潜</p></div><span class="shop"><a href="#" >去购买</a></span></li><li><span>3.</span><div><a href="#">人鱼陷落</a><p>麟潜</p></div><span class="shop"><a href="#" >去购买</a></span></li><li><span>4.</span><div><a href="#">人鱼陷落</a><p>麟潜</p></div><span class="shop"><a href="#" >去购买</a></span></li><li><span>5.</span><div><a href="#">人鱼陷落</a><p>麟潜</p></div><span class="shop"><a href="#" >去购买</a></span></li><li><span>6.</span><div><a href="#">人鱼陷落</a><p>麟潜</p></div><span class="shop"><a href="#" >去购买</a></span></li><li><span>7.</span><div><a href="#">人鱼陷落</a><p>麟潜</p></div><span class="shop"><a href="#" >去购买</a></span></li><li><span>8.</span><div><a href="#">人鱼陷落</a><p>麟潜</p></div><span class="shop"><a href="#" >去购买</a></span></li><li><span>9.</span><div><a href="#">人鱼陷落</a><p>麟潜</p></div><span class="shop"><a href="#" >去购买</a></span></li><li><span>10.</span><div><a href="#">人鱼陷落</a><p>麟潜</p></div><span class="shop"><a href="#" >去购买</a></span></li></ul></div><!-- 畅销图书榜完 --><!-- 豆瓣图书250 --><div class="aside_books"> <div class="aside_books_head"><span>豆瓣图书250</span><a href="#">更多<i class="iconfont icon-shuangyou_double-right"></i></a></div><div class="content"><div><a href="#"><img src="./images/8.jpg" alt=""></a><p><a href="#">顾城的诗</a></p></div><div><a href="#"><img src="./images/9.jpg" alt=""></a><p><a href="#">不存在的骑士</a></p><span>有电子书</span></div><div><a href="#"><img src="./images/10.jpg" alt=""></a><p><a href="#">海风中失落的血色馈赠</a></p></div><div><a href="#"><img src="./images/8.jpg" alt=""></a><p><a href="#">顾城的诗</a></p></div><div><a href="#"><img src="./images/9.jpg" alt=""></a><p><a href="#">不存在的骑士</a></p><span>有电子书</span></div><div><a href="#"><img src="./images/10.jpg" alt=""></a><p><a href="#">海风中失落的血色馈赠</a></p></div><div><a href="#"><img src="./images/8.jpg" alt=""></a><p><a href="#">顾城的诗</a></p></div><div><a href="#"><img src="./images/9.jpg" alt=""></a><p><a href="#">不存在的骑士</a></p><span>有电子书</span></div><div><a href="#"><img src="./images/10.jpg" alt=""></a><p><a href="#">海风中失落的血色馈赠</a></p></div></div></div><!-- 豆瓣图书250完 --><!-- 联系我们 --><div class="aside_contact"><div class="aside_contact_head">联系我们</div><div class="content">合作联系: book@douban.com</div></div><!-- 联系我们完 --><!-- 关注我们 --><div class="aside_focus"><div class="aside_focus_head">关注我们</div><ul><li><img src="./images/11.jpg" alt=""><p><a href="#">豆瓣小站</a></p></li><li><img src="./images/11.jpg" alt=""><p><a href="#">豆瓣小站</a></p></li><li><img src="./images/11.jpg" alt=""><p><a href="#">豆瓣小站</a></p></li></ul></div><!-- 关注我们完 --><!-- 广告2 --><div class="aside_ad2 "><div class="left"><a href="#"><img src="./images/12.jpg" alt=""></a></div><ul><li><a href="#">豆瓣豆品 | 豆瓣初阶礼盒2023上线啦</a></li><li>豆瓣豆品</li></ul><span>广告</span></div><!-- 广告2完 --></aside><!-- 侧边栏完 --></div><!-- 内容区域完 --><!-- 底部 --><footer class="footer wrapper"><span>© 2022-2023 mteee.icu, all rights reserved 汉中小m科技有限公司</span><span><a href="#">关于豆瓣</a><a href="#">在豆瓣工作</a><a href="#">联系我们</a><a href="#">法律声明</a><a href="#">帮助中心</a><a href="#">图书馆合作</a><a href="#">移动应用</a><a href="#">豆瓣广告</a></span></footer><!-- 底部完 --></body>
</html>css实现代码
/* 清除内外边距 */
* {margin: 0;padding: 0;
}/* 清除ol, ul默认样式 */
ol,
ul {list-style: none;
}/* 清除a链接下划线 */
a {text-decoration: none;
}/* 版心 */
.wrapper {margin: 0 250px;text-align: left;
}/* <!-- 头部 --> */
header {height: 28px;line-height: 28px;text-align: center;background-color: #545652;
}
header ul.left {float: left;
}
header ul.right {float: right;
}
header ul li {display: inline-block;cursor: pointer;
}
header ul li a {display: inline-block;/* margin: 0 10px; */width: 48px;color: #d5d5d5;font-size: 12px;
}
header ul.right li:first-child a {width: 100px;
}
header ul.right li:last-child a {width: 75px;
}
header ul li a:hover {color: #f6f3f3;
}/* <!-- 内容导航 --> */
section.mainHead {clear: both;background-color: rgb(246, 246, 241);
}
section.mainHead div.mainHead_search {position: relative;padding-left: 250px;height: 75px;line-height: 75px;border-bottom: 1px solid #dbddda;
}
section.mainHead div.mainHead_search a {padding: 0;color: #614e3c;font-size: 25px;font-weight: 600;
}
section.mainHead div.mainHead_search .search {position: relative;display: inline-block;vertical-align: top;
}
section.mainHead div.mainHead_search .search input {margin-left: 50px;padding-left: 10px;width: 500px;height: 30px;border: 0;outline: none; /* 去掉获取焦点时的边框*/box-shadow: 0 1px 5px 1px #8c8d8a;
}
section.mainHead div.mainHead_search .search span {position: absolute;top: 24px;right: 0;width: 37px;height: 30px;line-height: 31px;text-align: center;font-size: 22px;color: #adafab;background-color: rgb(226, 231, 230);
}
section.mainHead a.img {position: absolute;bottom: 0;right: 0;
}
section.mainHead div.mainHead_nav a.img img {width: 180px;
}section.mainHead div.mainHead_nav {position: relative;height: 40px;/* background-color: rgb(137, 137, 85); */
}
section.mainHead div.mainHead_nav ul li {float: left;margin-right: 20px;line-height: 40px;
}
section.mainHead div.mainHead_nav ul li a {color: #614e3c;
}
section.mainHead div.mainHead_nav ul li a:hover {color: #f9f8f6;background-color: rgb(88, 86, 66);
}/* 新书速递 */
section.newBooks {margin-top: 20px;width: 675px;text-align: center;/* background-color: rgb(253, 253, 241); */
}
section.newBooks ul.newBooks_nav,
section.focus ul.focus_nav {clear: both;height: 30px;line-height: 30px;border-bottom: 1px solid rgb(212, 210, 210);
}
section.newBooks ul.newBooks_nav li,
section.focus ul.focus_nav li {float: left;margin-right: 8px;
}
section.newBooks ul.newBooks_nav li a,
section.focus ul.focus_nav li a {font-size: 13px;color: #cac9c9;
}
section.newBooks ul.newBooks_nav li:nth-child(2) a {color: #292928;
}
section.newBooks ul.newBooks_nav li:last-child,
section.focus ul.focus_nav li:last-child {float: right;margin-right: 0;
}
section.newBooks ul.newBooks_nav li:last-child a,
section.review div.review_content div.right ul li a {color: #368cb0;
}
section.newBooks ul.newBooks_nav li:last-child a:hover,
section.newBooks ul.newBooks_content li p a:hover,
section.focus ul.focus_nav li a:hover,
section.focus div.focus_content div.content ul li a:hover,
section.bookstore div.bookstore_head a:hover,
section.bookstore div.bookstore_content div.content p a:hover,
section.electronic div.ele_head a:hover,
section.electronic div.ele_content_head a:hover,
section.electronic div.ele_content div.content p a:hover,
section.review div.review_head a:hover,
section.review div.review_content div.right ul li a:hover,
footer.footer span a:hover,
aside div.aside_hot div.aside_hot_head a:hover,
aside div.aside_sale ul li div a:hover,
aside div.aside_books div.content div p a:hover,
aside div.aside_focus ul li p a:hover {color: #f3f5f8;background-color: rgb(69, 94, 152);
}
section.newBooks ul.newBooks_content {clear: both;
}
section.newBooks ul.newBooks_content li {float: left;margin: 15px 25px 15px 0;width: 115px;text-align: left;
}
section.newBooks ul.newBooks_content li:nth-child(5n) {margin-right: 0;
}
section.newBooks ul.newBooks_content li a img {width: 100%;
}
section.newBooks ul.newBooks_content li p {font-size: 14px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
section.newBooks ul.newBooks_content li span {font-size: 13px;
}
section.newBooks div.newBooks_footer {clear: both;/* width: 200px; */height: 40px;line-height: 40px;margin-top: 30px;/* background-color: rgb(195, 130, 130); */
}
section.newBooks div.newBooks_footer span,
section.message div.message_header span {display: inline-block;width: 20px;height: 20px;line-height: 20px;text-align: center;border-radius: 100%;color: #dddbdb;background-color: rgb(173, 171, 171);
}
section.newBooks div.newBooks_footer span:hover,
section.message div.message_header span:hover {background-color: #fff;
}
section.newBooks div.newBooks_footer ul,
section.message div.message_header ul {display: inline-block;/* text-align: center; */
}
section.newBooks div.newBooks_footer ul li,
section.message div.message_header ul li {display: inline-block;
}
section.newBooks div.newBooks_footer ul li a,
section.message div.message_header ul li a {display: inline-block;margin: 0 2px;width: 6px;height: 6px;border-radius: 100%;background-color: rgb(209, 206, 206);
}/* 图书资讯 */
section.message,
section.focus {margin-top: 60px;width: 675px;/* height: 300px; *//* background-color: rgb(254, 253, 239); */
}
section.message div.message_header {position: relative;
}
section.message div.message_header div.right {position: absolute;right: 0;top: 0;
}
section.message div.message_content {position: relative;margin-top: 20px;padding: 20px 30px;width: 100%;border: 1px solid #ecece8;/* background-color: #fff; */box-sizing: border-box;
}
section.message div.message_content ul {width: 80%;font-size: 15px;
}
section.message div.message_content ul li {margin-bottom: 8px;
}
section.message div.message_content ul li:first-child a {color: #429fc7;font-size: 15px;
}
section.message div.message_content ul li:nth-child(2) a {font-size: 13px;color: #8c8d8a;
}
section.message div.message_content ul li:last-child a {color: rgb(87, 87, 86);font-size: 14px;
}
section.message div.message_content a.img {display: block;position: absolute;top: 50px;right: 30px;width: 100px;
}
section.message div.message_content a img {width: 100%;
}/* 最受关注图书榜 */
section.focus {height: 600px;
}
section.focus ul.focus_nav li a {color: #368cb0;
}
section.focus div.focus_content div.content {float: left;position: relative;margin: 10px 0;width: 50%;/* background-color: rgb(239, 207, 207); */
}
section.focus div.focus_content div span.left {display: inline-block;width: 80px;
}
section.focus div.focus_content ul {display: inline-block;position: absolute;top: 0;left: 95px;font-size: 13px;
}
section.focus div.focus_content ul li {margin-bottom: 4px;
}
section.focus div.focus_content ul li a {font-size: 15px;color: #368cb0;
}
section.focus div.focus_content ul li i.iconfont,
section.review div.review_content div.right ul li span i.iconfont {color: #f5c33b;font-size: 13px;
}
section.focus div.focus_content ul li:last-child span {padding: 0 2px;color: #e9ecef;background-color: rgb(174, 170, 170);
}
section.focus div.focus_content div.content span.left a img {width: 100%;
}section.bookstore,
section.electronic,
section.review {margin-top: 60px;width: 675px;
}
section.bookstore div.bookstore_head,
section.electronic div.ele_head,
section.review div.review_head {margin-bottom: 10px;line-height: 40px;border-bottom: 1px solid rgb(212, 210, 210);
}
section.bookstore div.bookstore_head h3,
section.electronic div.ele_head h3,
section.review div.review_head h3 {display: inline;margin-right: 10px;
}
section.bookstore div.bookstore_head a,
section.bookstore div.bookstore_content div.content p a,
section.electronic div.ele_head a,
section.electronic div.ele_content_head a,
section.electronic div.ele_content div.content p a,
section.review div.review_head a,
footer.footer span a,
aside div.aside_hot_head a,
aside div.aside_hot ul a,
aside div.aside_sale ul li div a,
aside div.aside_books div.content div a {color: #368cb0;font-size: 13px;
}
section.bookstore div.bookstore_content {display: flex;justify-content: space-between; /* 主轴对齐方式 */font-size: 13px;
}section.bookstore div.bookstore_content div.content {width: 106px;margin-top: 15px;
}
section.bookstore div.bookstore_content div.content a.img img,
section.electronic div.ele_content div.content a.img img {width: 118px;
}
section.bookstore div.bookstore_content div.content p,
section.electronic div.ele_content div.content p {margin: 5px 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}/* 电子图书 */
section.electronic div.ele_content {display: flex;flex-wrap: wrap;justify-content: space-between; /* 主轴对齐方式 */align-content: space-between; /* 多轴对齐方式 */font-size: 13px;
}
section.electronic div.ele_content_head a {margin-left: 10px;font-size: 15px;
}
section.electronic div.ele_content div.content {margin-top: 15px;
}/* 最受欢迎的书评 */
section.review div.review_head a {margin-right: 15px;
}section.review div.review_content div.content {position: relative;padding: 30px 0;border-bottom: 1px solid rgb(212, 210, 210);
}
section.review div.review_content div.content:last-child {border-bottom: 0;
}
section.review div.review_content div.left {position: absolute;top: 20px;left: 0;
}
section.review div.review_content div.left img {width: 80px;
}
section.review div.review_content div.right {width: 500px;margin-left: 120px;
}
section.review div.review_content div.right ul li {margin-bottom: 6px;font-size: 13px;
}
section.review div.review_content div.right ul li:first-child {font-size: 15px;
}
section.review div.review_content div.right ul li:nth-child(2) span,
section.review div.review_content div.right ul li:nth-child(2) a {color: #838380;
}div.dbMain {position: relative;
}/* 侧边栏 */
aside {position: absolute;top: 170px;right: 250px;width: 300px;/* background-color: rgb(249, 202, 202); */
}
/* 广告1 */
aside div.aside_ad1 {position: relative;height: 250px;background-color: rgba(248, 236, 236, 0.495);
}
aside div.aside_ad1 span,
aside div.aside_ad2 span {position: absolute;bottom: 0;right: 0;padding: 4px;color: #fef9f9;font-size: 12px;background-color: #b6b7b3;
}
/* 热门标签 */
aside div.aside_hot,
aside div.aside_sale,
aside div.aside_books,
aside div.aside_contact,
aside div.aside_focus,
aside div.aside_ad2 {margin-top: 30px;/* background-color: rgb(251, 229, 229); */
}
aside div.aside_hot_head,
aside div.aside_books_head {height: 30px;line-height: 30px;border-bottom: 1px solid #e0e0df;
}
aside div.aside_hot_head span,
aside div.aside_books_head span {font-weight: 700;margin-right: 15px;
}
/* 热门标签--文学 */
aside div.aside_hot div.iterature,
aside div.aside_hot div.popular,
aside div.aside_hot div.culture,
aside div.aside_hot div.life,
aside div.aside_hot div.economic,
aside div.aside_hot div.technology {margin-top: 10px;padding-bottom: 3px;font-size: 13px;border-bottom: 1px dashed #d0d1d0;
}
aside div.aside_hot div p {margin-bottom: 3px;
}
aside div.aside_hot div.iterature li,
aside div.aside_hot div.popular li,
aside div.aside_hot div.culture li,
aside div.aside_hot div.life li,
aside div.aside_hot div.economic li,
aside div.aside_hot div.technology li {display: inline-block;margin: 2px 3px 5px 0;
}
aside div.aside_hot div.iterature li:last-child a,
aside div.aside_hot div.popular li:last-child a,
aside div.aside_hot div.culture li:last-child a,
aside div.aside_hot div.life li:last-child a,
aside div.aside_hot div.economic li:last-child a,
aside div.aside_hot div.technology li:last-child a {color: #b4b4b3;
}
aside div.aside_hot div.iterature li a,
aside div.aside_hot div.popular li a,
aside div.aside_hot div.culture li a,
aside div.aside_hot div.life li a,
aside div.aside_hot div.economic li a,
aside div.aside_hot div.technology li a {padding: 2px 10px;background-color: #f1f1f1;
}
aside div.aside_hot div.iterature li a:hover,
aside div.aside_hot div.popular li a:hover,
aside div.aside_hot div.culture li a:hover,
aside div.aside_hot div.life li a:hover,
aside div.aside_hot div.economic li a:hover,
aside div.aside_hot div.technology li a:hover {background-color: rgb(233, 240, 244);
}
/* 畅销图书榜 */
aside div.aside_sale h3 {height: 40px;line-height: 40px;border-bottom: 1px solid #e0e0df;
}
aside div.aside_sale ul li {position: relative;padding: 7px 0;font-size: 14px;border-bottom: 1px dashed #d3d3d3;
}
aside div.aside_sale ul li div {display: inline-block;vertical-align: top;
}
aside div.aside_sale ul li div a {font-size: 14px;
}
aside div.aside_sale ul li div p {margin-top: 5px;font-size: 13px;color: #919291;
}
aside div.aside_sale ul li span.shop {position: absolute;top: 15px;right: 5px;padding: 4px 7px;font-size: 13px;background-color: #f1f1ee;
}
aside div.aside_sale ul li span.shop a {color: #969696;
}
aside div.aside_sale ul li:hover {background-color: rgb(247, 249, 239);
}
aside div.aside_sale ul li span.shop:hover {border: 1px solid #f5f5b9;
}
/* 250 */
aside div.aside_books div.content {display: flex;flex-wrap: wrap;justify-content: space-between; /* 主轴对齐方式 */align-content: space-between; /* 多轴对齐方式 */text-align: center;font-size: 13px;
}
aside div.aside_books div.content div {display: inline-block;width: 85px;margin-top: 20px;
}
aside div.aside_books div.content div p {margin: 2px 0;
}
aside div.aside_books div.content div span {padding: 1px 2px;color: #feffff;background-color: rgb(206, 207, 208);
}
aside div.aside_books div.content div a img {width: 85px;height: 118px;
}
/* 联系我们 */
aside div.aside_contact div.aside_contact_head,
aside div.aside_focus div.aside_focus_head {height: 30px;line-height: 30px;font-weight: 800;font-size: 14px;border-bottom: 1px solid #d5d5d4;
}
aside div.aside_contact div.content {margin-top: 20px;
}
/* 关注我们 */
aside div.aside_focus ul li {display: inline-block;margin: 5px;text-align: center;
}
aside div.aside_focus ul li p a {font-size: 12px;color: #368cb0;
}
/* 广告2 */
aside div.aside_ad2 {height: 100px;padding: 10px;background-color: rgb(243, 241, 241);box-sizing: border-box;
}
aside div.aside_ad2 div.left {float: left;
}
aside div.aside_ad2 div.left a img {width: 96px;margin-right: 10px;
}
aside div.aside_ad2 ul li a {color: #368cb0;
}
aside div.aside_ad2 ul li {margin-bottom: 8px;color: #adafab;font-size: 12px;
}/* 脚部 */
footer.footer {margin-top: 80px;height: 30px;line-height: 30px;font-size: 13px;color: #959694;border-top: 1px dashed #969696;
}
footer.footer span a {float: right;margin-left: 10px;
}
总结:
1. 写网页html结构时, 应先考虑好布局, 每一小块使用哪种盒子,以及盒子的嵌套关系, 避免不必要的嵌套结构
2. 使用见名知义的类名, 方便后续css选择器的书写
3. 不同选择器实现相同样式, 可写在一起, 选择器间使用逗号隔开, 可减少代码
4. 虽然使用组合式写出来的选择器很长, 但是找起来很方便
题外话:
做了一下db电影和db读书来练练手, 其实movie那个是因为随便找导航做, 结果交作业的时候发现,大家都是book的, 就重新做了一下book啦( emmm,超级喜欢movie, 花里胡哨的很合老夫的心意ahhhh)
官方提示改进文章质量了, 是不是因为字太少了, 说点废话凑凑字叭```
朋友们快帮点点赞, 收藏, 刷刷阅读量呀呀呀呀```
审核好多次哭唧唧---
CSS篇-dbMovies和dbBooks小网页相关推荐
- 【前端学习一】【网页设计】利用HTML和CSS制作了一个小网页.
前言 最近在学习前端,光看不练是空谈,利用课下时间以及课上时间做了一个小网页,其中利用到了HTML和CSS.网页非常简单,功能也非常少,但还是出现了许多错误,有一些妥协性,而且目前从制作中还遗留了许多 ...
- 程序员过中秋丨用代码制作一个祝福小网页(html+css)
大家好,我是陈橘又青,兰经香风满,松窗夜月圆!都说我们程序员过节最没仪式感,再过两周就是中秋节了,今天我们就来制作一个简单的中秋祝福小网页,祝愿看到的所有人好运安康!(附上完整源码,需要的小伙伴自取即 ...
- a标签去除下划线css_数据分析师所需的编程技能 : CSS篇
Html篇里提到过css是啥,CSS样式是表现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片.边框等.所有这些用来改变内容外观的东西称之为表现. 1.一个CSS样式示例: CSS全称 ...
- java程序员 css_好程序员Web前端分享前端CSS篇
今天好程序员跟大家分享的文章是CSS篇.Web前端技术由html.css和javascript三大部分构成,而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很 ...
- 互联网公司2014前端笔试面试题：HTML/CSS篇
Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto ...
- 前端基础知识总结---CSS篇
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出! 目录 1.介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的? 2.CSS 选 ...
- 《微信小程序-基础篇》初识微信小程序
大家好,好久不见了,前段时间各种原因分享不稳定,后面一段时间内参与了主站的原力计划,请麻烦各位支持一下,万分感谢- 本系列将从零开始介绍微信小程序的开发,介绍完基础以后会实际同步开发一个微信小程序的项 ...
- 【干货分享】前端面试知识点锦集01（HTML+CSS篇）—— 附答案
1. 浏览器页面有哪三层构成,分别是什么,作用是什么? 参考答案 构成:结构层.表示层.行为层 分别是:HTML.CSS.JavaScript 作用:HTML实现页面结构,CSS完成页面的表现与风格, ...
- 前端面试题汇总CSS篇
转载自:https://www.cnblogs.com/zhangshuda/p/8465043.html 前端面试题 ----css篇 1.css盒模型有哪些及区别content-box borde ...
最新文章
- linux端口对外开放
- 创造思维方法训练_数学思维方法训练课程：每日一题11.24
- 【快报】基于K2 BPM的新一代协同办公门户实践交流会
- 使用js实现思维导图
- *-mapper.xml配置文件
- LATEX采坑+Win10字体采坑
- 未来教育计算机二级office评分有问题,未来教育计算机二级-未来教育计算机二级msoffice题库评分 – 手机爱问...
- 教你：找回已失效的B站视频＋批量下载B站收藏夹视频
- 植物病虫害识别方法主要研究思路
- justinmind破解方法
- mysql profiling sending data_Mysql一次Sending data占用大量时间的深入分析优化案例
- Python（高级FTP作业）
- WPF 文件、文件夹操作
- 学python为何不好找工作呢？
- win10任务栏WIFI小图标不见了--解决办法
- 华为发生工商变更，瞄准5G车联网大蛋糕！（附产业重要数据下载）
- 第十四届蓝桥杯大赛软件赛省赛 C/C++ 大学 B 组
- Xen超级调用详细实现
- c语言printf snm,vc++实现SNMP信息刺探程序
- python——使用API