html+css制作豆瓣读书页面 |
您所在的位置：网站首页 › 豆瓣阅读网页版充值 › html+css制作豆瓣读书页面 |
html+css制作豆瓣读书页面
|
效果所下图所示：
1.第一层导航栏，我使用ul写的 这部分写在body-->header-->div1中（分不清在哪里的，看文章末尾的完整代码） 豆瓣 读书 电影 音乐 同城 小组 阅读 FM 时间 豆品 下载豆瓣客户端 登录/注册2.豆瓣读书搜索框 这部分写在body-->header-->div2中 豆瓣读书3.购书单导航栏 这部分写在body-->header-->div2中的div.bdds下面 购书单 电子图书 豆瓣书店 2021年度榜单 2021书影音报告 购物车4.新书速递导航栏 这部分写在body-->section 新书速递 全部 文学 小说 历史文化 社会纪实 科学新知 艺术设计 商业经管 绘本漫画 更多>>5.两排书以及下面的图书资讯 如何引入图片可以看我主页里的《使用html简单仿写一个静态的绝地求生官网首页》 使用html简单仿写一个静态的绝地求生官网首页_guaishou♂xxx的博客-CSDN博客引入动图的标签就不能用img了，要使用,并且设置了：自动播放，静音播放，循环播放，即：autoplay， muted ，loop。5.首先我们先编辑官网的导航栏部分 ，写在header标签里的nav自命名标签中。将你下载好的图片，拖入上面建好的image文件夹中。这是我以前写的一个静态网页，算一个html入门的简单的教程。1.首先在vscode新建一个文件夹，点击如图所示，点击蓝笔圈起的图标（左边的是新建文件）也是将动态图保存到image里，红圈部分就是我们要用的动图，后缀是.mp4。 
我看见无数的她 张莉
长安的荔枝 xxx
和魂 吴伟明
柠檬炸弹 基次郎
数字抑郁时代 sala 
我看见无数的她 张莉
长安的荔枝 xxx
和魂 吴伟明
柠檬炸弹 基次郎
数字抑郁时代 sala 图书资讯那些不经意间收集的T恤故事，和根本连载不完的T恤们——《村上T》新书后记 文治图书POPEYE杂志专访村上春树；采访者：野村训市。 ——最开始穿T恤的契机是什么呢？ “我开始穿T恤已经是很久以前的事了，不过在我十几岁的时候，身边还根本没有穿T恤的文化。 只有类似于汗衫、内衣之类的东西，上面没... 最受关注图书榜 全部 文学 小说 历史文化 社会纪实 科学新知 艺术设计 影视戏剧 更多>>
柠檬炸弹 作者：基次郎
和魂汉神 作者：吴伟明
柠檬炸弹 作者：基次郎
和魂汉神 作者：吴伟明
和魂汉神 作者：吴伟明
柠檬炸弹 作者：基次郎
和魂汉神 作者：吴伟明
柠檬炸弹 作者：基次郎
和魂汉神 作者：吴伟明
和魂汉神 作者：吴伟明 6.右侧的热门标签我使用的浮动定位 float: right; 存在问题：缩小窗口这整个div会乱跑。 热门标签 所有热门标签» 文学 小说 随笔 日本文学 散文 诗歌 童话 名著 港台 更多» 流行 漫画 推理 绘本 科幻 青春 言情 奇幻 武侠 更多» 流行 漫画 推理 绘本 科幻 青春 言情 奇幻 武侠 更多» 流行 漫画 推理 绘本 科幻 青春 言情 奇幻 武侠 更多» 流行 漫画 推理 绘本 科幻 青春 言情 奇幻 武侠 更多» 流行 漫画 推理 绘本 科幻 青春 言情 奇幻 武侠 更多»7.畅销图书榜 畅销图书榜 钝感力[日]渡边淳一 尘埃落定[日]渡边淳一 生死疲劳[日]渡边淳一 科普绘本[日]渡边淳一 小聪明豆[日]渡边淳一 张嘉骅少年读[日]渡边淳一 苏东坡传[日]渡边淳一 瓦尔登湖[日]渡边淳一 关注我们 豆瓣小站 微博 微信
完整代码： 豆瓣读书2.0 /* 通用选择器 */ * { 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; } 豆瓣 读书 电影 音乐 同城 小组 阅读 FM 时间 豆品 下载豆瓣客户端 登录/注册 豆瓣读书 购书单 电子图书 豆瓣书店 2021年度榜单 2021书影音报告 购物车 新书速递 全部 文学 小说 历史文化 社会纪实 科学新知 艺术设计 商业经管 绘本漫画 更多>>
我看见无数的她 张莉
长安的荔枝 xxx
和魂 吴伟明
柠檬炸弹 基次郎
数字抑郁时代 sala
我看见无数的她 张莉
长安的荔枝 xxx
和魂 吴伟明
柠檬炸弹 基次郎
数字抑郁时代 sala 图书资讯那些不经意间收集的T恤故事，和根本连载不完的T恤们——《村上T》新书后记 文治图书POPEYE杂志专访村上春树；采访者：野村训市。 ——最开始穿T恤的契机是什么呢？ “我开始穿T恤已经是很久以前的事了，不过在我十几岁的时候，身边还根本没有穿T恤的文化。 只有类似于汗衫、内衣之类的东西，上面没... 最受关注图书榜 全部 文学 小说 历史文化 社会纪实 科学新知 艺术设计 影视戏剧 更多>>
柠檬炸弹 作者：基次郎
和魂汉神 作者：吴伟明
柠檬炸弹 作者：基次郎
和魂汉神 作者：吴伟明
和魂汉神 作者：吴伟明
柠檬炸弹 作者：基次郎
和魂汉神 作者：吴伟明
柠檬炸弹 作者：基次郎
和魂汉神 作者：吴伟明
和魂汉神 作者：吴伟明 热门标签 所有热门标签» 文学 小说 随笔 日本文学 散文 诗歌 童话 名著 港台 更多» 流行 漫画 推理 绘本 科幻 青春 言情 奇幻 武侠 更多» 流行 漫画 推理 绘本 科幻 青春 言情 奇幻 武侠 更多» 流行 漫画 推理 绘本 科幻 青春 言情 奇幻 武侠 更多» 流行 漫画 推理 绘本 科幻 青春 言情 奇幻 武侠 更多» 流行 漫画 推理 绘本 科幻 青春 言情 奇幻 武侠 更多» 畅销图书榜 钝感力[日]渡边淳一 尘埃落定[日]渡边淳一 生死疲劳[日]渡边淳一 科普绘本[日]渡边淳一 小聪明豆[日]渡边淳一 张嘉骅少年读[日]渡边淳一 苏东坡传[日]渡边淳一 瓦尔登湖[日]渡边淳一 关注我们 豆瓣小站 微博 微信 |
【本文地址】
今日新闻 |
推荐新闻 |