首页 > 代码库 > 静态页面复习--用semantic UI仿写豆瓣主页
静态页面复习--用semantic UI仿写豆瓣主页
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>豆瓣</title> <link rel="stylesheet" href="http://www.mamicode.com/css/semantic.css" media="screen" title="no title" charset="utf-8"> <style type="text/css"> .ui.basic.segment.container.top{ background-color: rgb(200, 228, 221); margin: 0; width:100%; } .ui.borderless.text.menu{ width: 1000px; margin:0 auto; } .ui.borderless.text.menu > .item{ color: rgb(50, 148, 122) } .ui.icon.input{ width: 300px; height: 40px; } .ui.basic.segment.left{ padding-left: 45px; } .ui.basic.segment.leftcontent{ height: 150px; margin-top: 0; padding-top: 0; } .like{ float: left; width: 50px; height:50px; background-color: rgb(226, 161, 86); padding-top:5px; } .like > p{ margin: 0; } .articlecard{ height:200px; padding-left: 70px; } .articlecard > p{ color: rgb(193, 192, 192); margin-top: 10px; padding: 8px; width: 530px; background-color: rgb(237, 242, 244); font-size:12px; } .page{ padding-left: 82px; padding-right: 55px; } .ui.basic.segment.group{ padding: 0; } .ui.image{ width: 50px; height: 50px; float:left; } .bottom{ border-top:grey 1px dashed; } </style> </head> <body> <div class="ui basic borderless inverted grey menu" style="border-radius:0px;height:10px;margin:0;"> <div class="item"> 豆瓣 </div> <div class="item"> 读书 </div> <div class="item"> 电影 </div> <div class="item"> 音乐 </div> <div class="item"> 同城 </div> <div class="item"> 小组 </div> <div class="item"> 阅读 </div> <div class="item"> FM </div> <div class="item"> 东西 </div> <div class="item"> 市集 </div> <div class="item"> 更多 </div> <div class="ui right text menu" style="height:10px;margin-top:0px;margin-right:5px;"> <div class="item"> 下载豆瓣客户端 </div> <div class="item"> 登录 </div> <div class="item"> 注册 </div> </div> </div> <div class="ui basic segment container top" > <div class="ui borderless text menu "> <div class="item"> <h1>豆瓣小组</h1> </div> <div class="item"> 精选 </div> <div class="item"> 文化 </div> <div class="item"> 行摄 </div> <div class="item"> 娱乐 </div> <div class="item"> 时尚 </div> <div class="item"> 生活 </div> <div class="item"> 科技 </div> <div class="right menu"> <div class="ui icon input"> <input type="text" placeholder="小组、话题"> <i class="search icon"></i> </div> </div> </div> </div> <div class="ui basic segment container nav"> <div class="ui borderless text menu"> <div class="item" style="color:black;"> <h2>话题精选</h2> </div> </div> <div class="ui horizontal segments" style="border-radius:0;border:none;box-shadow:none;"> <div class="ui basic segment left"> <div class="ui basic segment leftcontent"> <div class="like"> <p align=center> 14 </p> <p align=center> 喜欢 </p> </div> <div class="articlecard"> <a href="http://www.mamicode.com/#" style="font-size:15px;">关于贤者时间自我gc的糗事~</a> <p> 一晃眼又是好几个月贤者模式了。 记得那天去美容院做精油开背的时候,和美容师妹纸聊天聊得尺度有点大,在听到lz已闲置几个月后,她问,你这样长期闲置容易引起内分泌失调,还会让si处萎缩 ,要不要尝试下她们院里的小仪器... </p> <span>来自凭什么光鲜的时候没有美好性生活小组</span> <span style="color:rgb(212, 212, 212);margin-left:25px;">04-07</span> <div class="ui divider" style="width:530px;"></div> </div> </div> <div class="ui basic segment leftcontent"> <div class="like"> <p align=center> 27 </p> <p align=center> 喜欢 </p> </div> <div class="articlecard"> <a href="http://www.mamicode.com/#" style="font-size:15px;">提名你觉得特别难用的化妆品</a> <p> 天天看各种博主夸,生怕得罪金主爸爸,就没加过说大实话的! 今天大家来吐槽一下,用过的特别难用的产品都有啥?以免大家受骗踩雷白花钱! 我来说几个:fresh的玫瑰保湿精华(完全没保湿力,还贵)、kose雪肌精的防晒霜(... </p> <span>来自我爱化妆品|化妆护肤微信号: d10036小组</span> <span style="color:rgb(212, 212, 212);margin-left:25px;">04-07</span> <div class="ui divider" style="width:530px;"></div> </div> </div> <div class="ui basic segment leftcontent"> <div class="like"> <p align=center> 155 </p> <p align=center> 喜欢 </p> </div> <div class="articlecard"> <a href="http://www.mamicode.com/#" style="font-size:15px;">【脸型与发型最佳搭配】原来我几十年都看错了自己的脸型!</a> <p> 不知道有没有妹子和我一样,一直在研究自己的脸型,去网上翻翻对比图,再对着镜子照自己,一会感觉像圆,一会感觉像椭圆,圆中带点方,方中又带点尖,MD智障! 然后,我把谷歌翻了个遍,... </p> <span>来自形象组|搭配减肥化妆+v:xingxiang365小组</span> <span style="color:rgb(212, 212, 212);margin-left:25px;">04-07</span> <div class="ui divider" style="width:530px;"></div> </div> </div> <div class="ui basic segment leftcontent"> <div class="like"> <p align=center> 21 </p> <p align=center> 喜欢 </p> </div> <div class="articlecard"> <a href="http://www.mamicode.com/#" style="font-size:15px;">【清流贴】聊聊择天记还原书中的那些神器</a> <p> 单纯聊聊择天记中的百器榜神器,拒绝撕x,只撩道具本身还原和神器排名,不聊演员和剧情,防止粉黑毁贴 书粉进 冷兵器迷进 欢迎各路讨论 1、黄纸伞 主人:陈长生(目前),苏离(以前)... </p> <span>来自择天记电视剧小组</span> <span style="color:rgb(212, 212, 212);margin-left:25px;">04-07</span> <div class="ui divider" style="width:530px;"></div> </div> </div> <div class="ui basic segment leftcontent"> <div class="like"> <p align=center> 98 </p> <p align=center> 喜欢 </p> </div> <div class="articlecard"> <a href="http://www.mamicode.com/#" style="font-size:15px;">我的女友最近有点不对劲(完)</a> <p> 犹豫了一番,还是没有发到灵异小组,因为感觉那里全是小说....但是我这件事情就在这两天发生,真实的不能再真实。不知道该怎么办,希望大家能够给我些建议,我实在是有点神经衰弱了。 是这... </p> <span>来自我总觉得自己就是一个傻逼小组</span> <span style="color:rgb(212, 212, 212);margin-left:25px;">04-07</span> <div class="ui divider" style="width:530px;"></div> </div> </div> <div class="ui basic segment leftcontent"> <div class="like"> <p align=center> 27 </p> <p align=center> 喜欢 </p> </div> <div class="articlecard"> <a href="http://www.mamicode.com/#" style="font-size:15px;">提名你觉得特别难用的化妆品</a> <p> 天天看各种博主夸,生怕得罪金主爸爸,就没加过说大实话的! 今天大家来吐槽一下,用过的特别难用的产品都有啥?以免大家受骗踩雷白花钱! 我来说几个:fresh的玫瑰保湿精华(完全没保湿力,还贵)、kose雪肌精的防晒霜(... </p> <span>来自我爱化妆品|化妆护肤微信号: d10036小组</span> <span style="color:rgb(212, 212, 212);margin-left:25px;">04-07</span> <div class="ui divider" style="width:530px;"></div> </div> </div> <div class="ui basic segment leftcontent"> <div class="like"> <p align=center> 155 </p> <p align=center> 喜欢 </p> </div> <div class="articlecard"> <a href="http://www.mamicode.com/#" style="font-size:15px;">【脸型与发型最佳搭配】原来我几十年都看错了自己的脸型!</a> <p> 不知道有没有妹子和我一样,一直在研究自己的脸型,去网上翻翻对比图,再对着镜子照自己,一会感觉像圆,一会感觉像椭圆,圆中带点方,方中又带点尖,MD智障! 然后,我把谷歌翻了个遍,... </p> <span>来自形象组|搭配减肥化妆+v:xingxiang365小组</span> <span style="color:rgb(212, 212, 212);margin-left:25px;">04-07</span> <div class="ui divider" style="width:530px;"></div> </div> </div> <div class="ui basic segment leftcontent"> <div class="like"> <p align=center> 21 </p> <p align=center> 喜欢 </p> </div> <div class="articlecard"> <a href="http://www.mamicode.com/#" style="font-size:15px;">【清流贴】聊聊择天记还原书中的那些神器</a> <p> 单纯聊聊择天记中的百器榜神器,拒绝撕x,只撩道具本身还原和神器排名,不聊演员和剧情,防止粉黑毁贴 书粉进 冷兵器迷进 欢迎各路讨论 1、黄纸伞 主人:陈长生(目前),苏离(以前)... </p> <span>来自择天记电视剧小组</span> <span style="color:rgb(212, 212, 212);margin-left:25px;">04-07</span> <div class="ui divider" style="width:530px;"></div> </div> </div> <div class="ui basic segment leftcontent"> <div class="like"> <p align=center> 98 </p> <p align=center> 喜欢 </p> </div> <div class="articlecard"> <a href="http://www.mamicode.com/#" style="font-size:15px;">我的女友最近有点不对劲(完)</a> <p> 犹豫了一番,还是没有发到灵异小组,因为感觉那里全是小说....但是我这件事情就在这两天发生,真实的不能再真实。不知道该怎么办,希望大家能够给我些建议,我实在是有点神经衰弱了。 是这... </p> <span>来自我总觉得自己就是一个傻逼小组</span> <span style="color:rgb(212, 212, 212);margin-left:25px;">04-07</span> <div class="ui divider" style="width:530px;"></div> </div> </div> <p class="page"> <前页 <span style="margin-left:45px;">1 <a href="http://www.mamicode.com/#" style="margin-left:20px;">2</a><a href="http://www.mamicode.com/#" style="margin-left:20px;">3</a><a href="http://www.mamicode.com/#" style="margin-left:20px;">4</a><a href="http://www.mamicode.com/#" style="margin-left:20px;">5</a><a href="http://www.mamicode.com/#" style="margin-left:20px;">6</a><a href="http://www.mamicode.com/#" style="margin-left:20px;">7</a><a href="http://www.mamicode.com/#" style="margin-left:20px;">8</a><a href="http://www.mamicode.com/#" style="margin-left:20px;">9</a><a href="http://www.mamicode.com/#" style="margin-left:20px;">...</a><a href="http://www.mamicode.com/#" style="margin-left:20px;">272</a><a href="http://www.mamicode.com/#" style="margin-left:20px;">273</a></span> <a style="float:right;">后页></a> </p> </div> <div class="ui basic segment right" style="border:none;box-shadow:none;"> <p style="font-size:14px;"> 值得加入的小组 </p> <div class="ui divider"></div> <div class="ui basic segment group"> <div class="ui image"> <img src="https://img3.doubanio.com/icon/g296240-5.jpg" /> </div> <a href="http://www.mamicode.com/#" style="margin-left:10px;">四川旅行攻略/四川青旅义工旅行</a> <p style="margin-left:58px;margin-top:10px;font-size:13px;">12399个宅员<a href="http://www.mamicode.com/#" style="font-size:13px;margin-left:10px;">+加入小组</a></p> <div class="ui divider"></div> </div> <div class="ui basic segment group"> <div class="ui image"> <img src="https://img1.doubanio.com/icon/g558815-8.jpg" /> </div> <a href="http://www.mamicode.com/#" style="margin-left:10px;">上海租房@女生合租 QQ小窝31836...</a> <p style="margin-left:58px;margin-top:10px;font-size:13px;">12054个成员<a href="http://www.mamicode.com/#" style="font-size:13px;margin-left:10px;">+加入小组</a></p> <div class="ui divider"></div> </div> <div class="ui basic segment group"> <div class="ui image"> <img src="https://img3.doubanio.com/icon/g58423-4.jpg" /> </div> <a href="http://www.mamicode.com/#" style="margin-left:10px;">我能遇见你,已经很不可思议</a> <p style="margin-left:58px;margin-top:10px;font-size:13px;">119459个遇见<a href="http://www.mamicode.com/#" style="font-size:13px;margin-left:10px;">+加入小组</a></p> <div class="ui divider"></div> </div> <div class="ui basic segment group"> <div class="ui image"> <img src="https://img5.doubanio.com/icon/g498618-6.jpg" /> </div> <a href="http://www.mamicode.com/#" style="margin-left:10px;">广州白云租房(推荐度★★★★★)</a> <p style="margin-left:58px;margin-top:10px;font-size:13px;">15029个【五星级用户】★★★★★<a href="http://www.mamicode.com/#" style="font-size:13px;margin-left:10px;">+加入小组</a></p> <div class="ui divider"></div> </div> <div class="ui basic segment group"> <div class="ui image"> <img src="https://img1.doubanio.com/icon/g558815-8.jpg" /> </div> <a href="http://www.mamicode.com/#" style="margin-left:10px;">上海租房@女生合租 QQ小窝31836...</a> <p style="margin-left:58px;margin-top:10px;font-size:13px;">12054个成员<a href="http://www.mamicode.com/#" style="font-size:13px;margin-left:10px;">+加入小组</a></p> <div class="ui divider"></div> </div> <div class="ui basic segment group"> <div class="ui image"> <img src="https://img3.doubanio.com/icon/g58423-4.jpg" /> </div> <a href="http://www.mamicode.com/#" style="margin-left:10px;">我能遇见你,已经很不可思议</a> <p style="margin-left:58px;margin-top:10px;font-size:13px;">119459个遇见<a href="http://www.mamicode.com/#" style="font-size:13px;margin-left:10px;">+加入小组</a></p> <div class="ui divider"></div> </div> <div class="ui basic segment group"> <div class="ui image"> <img src="https://img5.doubanio.com/icon/g498618-6.jpg" /> </div> <a href="http://www.mamicode.com/#" style="margin-left:10px;">广州白云租房(推荐度★★★★★)</a> <p style="margin-left:58px;margin-top:10px;font-size:13px;">15029个【五星级用户】★★★★★<a href="http://www.mamicode.com/#" style="font-size:13px;margin-left:10px;">+加入小组</a></p> <div class="ui divider"></div> </div> <div class="ui basic segment group"> <div class="ui image"> <img src="https://img3.doubanio.com/icon/g58423-4.jpg" /> </div> <a href="http://www.mamicode.com/#" style="margin-left:10px;">我能遇见你,已经很不可思议</a> <p style="margin-left:58px;margin-top:10px;font-size:13px;">119459个遇见<a href="http://www.mamicode.com/#" style="font-size:13px;margin-left:10px;">+加入小组</a></p> <div class="ui divider"></div> </div> <div class="ui basic segment group"> <div class="ui image"> <img src="https://img5.doubanio.com/icon/g498618-6.jpg" /> </div> <a href="http://www.mamicode.com/#" style="margin-left:10px;">广州白云租房(推荐度★★★★★)</a> <p style="margin-left:58px;margin-top:10px;font-size:13px;">15029个【五星级用户】★★★★★<a href="http://www.mamicode.com/#" style="font-size:13px;margin-left:10px;">+加入小组</a></p> <div class="ui divider"></div> </div> <div class=" ad"> <img src="https://img3.doubanio.com/view/dale-online/dale_ad/public/8dbb98b853dfa6a.jpg" width="100%" height="100%;" /> </div> </div> </div> <div class="bottom"> <span style="color:grey;">? 2005-2017 douban.com, all rights reserved 北京豆网科技有限公司</span> <span style="float:right;"><a href="http://www.mamicode.com/#" >关于豆瓣 · </a><a href="http://www.mamicode.com/#" >在豆瓣工作 · </a><a href="http://www.mamicode.com/#" >联系我们 · </a><a href="http://www.mamicode.com/#" >免责声明 · </a><a href="http://www.mamicode.com/#" >帮助中心 · </a><a href="http://www.mamicode.com/#" >移动应用 · </a><a href="http://www.mamicode.com/#" >豆瓣广告 · </a></span> </div> </div> </body> </html>
静态页面复习--用semantic UI仿写豆瓣主页
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。