静态页面复习--用semantic UI仿写豆瓣主页

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>豆瓣</title><link rel="stylesheet" href="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="#" 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="#" 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="#" 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="#" 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="#" 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="#" 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="#" 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="#" 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="#" 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="#" style="margin-left:20px;">2</a><a href="#" style="margin-left:20px;">3</a><a href="#" style="margin-left:20px;">4</a><a href="#" style="margin-left:20px;">5</a><a href="#" style="margin-left:20px;">6</a><a href="#" style="margin-left:20px;">7</a><a href="#" style="margin-left:20px;">8</a><a href="#" style="margin-left:20px;">9</a><a href="#" style="margin-left:20px;">...</a><a href="#" style="margin-left:20px;">272</a><a href="#" 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" alt="" /></div><a href="#" style="margin-left:10px;">四川旅行攻略/四川青旅义工旅行</a><p style="margin-left:58px;margin-top:10px;font-size:13px;">12399个宅员<a href="#" 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" alt="" /></div><a href="#" style="margin-left:10px;">上海租房@女生合租 QQ小窝31836...</a><p style="margin-left:58px;margin-top:10px;font-size:13px;">12054个成员<a href="#" 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" alt="" /></div><a href="#" style="margin-left:10px;">我能遇见你，已经很不可思议</a><p style="margin-left:58px;margin-top:10px;font-size:13px;">119459个遇见<a href="#" 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" alt="" /></div><a href="#" style="margin-left:10px;">广州白云租房（推荐度★★★★★）</a><p style="margin-left:58px;margin-top:10px;font-size:13px;">15029个【五星级用户】★★★★★<a href="#" 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" alt="" /></div><a href="#" style="margin-left:10px;">上海租房@女生合租 QQ小窝31836...</a><p style="margin-left:58px;margin-top:10px;font-size:13px;">12054个成员<a href="#" 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" alt="" /></div><a href="#" style="margin-left:10px;">我能遇见你，已经很不可思议</a><p style="margin-left:58px;margin-top:10px;font-size:13px;">119459个遇见<a href="#" 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" alt="" /></div><a href="#" style="margin-left:10px;">广州白云租房（推荐度★★★★★）</a><p style="margin-left:58px;margin-top:10px;font-size:13px;">15029个【五星级用户】★★★★★<a href="#" 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" alt="" /></div><a href="#" style="margin-left:10px;">我能遇见你，已经很不可思议</a><p style="margin-left:58px;margin-top:10px;font-size:13px;">119459个遇见<a href="#" 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" alt="" /></div><a href="#" style="margin-left:10px;">广州白云租房（推荐度★★★★★）</a><p style="margin-left:58px;margin-top:10px;font-size:13px;">15029个【五星级用户】★★★★★<a href="#" 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%;" alt="" /></div></div></div><div class="bottom"><span style="color:grey;">© 2005－2017 douban.com, all rights reserved 北京豆网科技有限公司</span><span style="float:right;"><a href="#" >关于豆瓣 · </a><a href="#" >在豆瓣工作 · </a><a href="#" >联系我们 · </a><a href="#" >免责声明 · </a><a href="#" >帮助中心 · </a><a href="#" >移动应用 · </a><a href="#" >豆瓣广告 · </a></span></div></div></body>
</html>

转载于:https://www.cnblogs.com/xyxpython/p/6696683.html

静态页面复习--用semantic UI仿写豆瓣主页相关推荐

微信小程序仿写豆瓣评分我的页面
微信小程序仿写豆瓣评分我的页面搭建豆瓣评分我的页面,先在pages文件夹下创建pages,得到4个文件,在这4文件中来实现界面的搭建; 原文链接 1.头部header模块的搭建头部模块的搭建比较简 ...
UI仿写 - 收藏集 - 掘金
Android 仿今日头条的开源项目 - Android - 掘金起因看到众多大神纷纷有了自己的开源项目,于是自己琢磨着也想做一个开源项目来学习下,因为每次无聊必刷的app就是今日头条,评论简直比 ...
淘宝-静态页面编写(2)--给淘宝写个头吧
标题首先我们看到html页面的头部: 技术点: 我们需要在标题内写入相关文字 <title>淘宝网 - 淘!我喜欢</title> 并且在左侧插入图标 <!--图片楼下 ...
微信小程序从无到有（仿写豆瓣评分小程序）
目录标题写在前面页面顶部搜索栏主页搜索栏搜索详情页首页板块电影评分请求网络数据查看更多页面详情页设计评论页设计项目文件整体结构运行效果演示项目总结写在前面前段时间跟着某 ...
20230621----重返学习-仿QQ音乐播放器-静态页面的免费部署-vue2
day-096-ninety-six-20230621-仿QQ音乐播放器-静态页面的免费部署-vue2 仿QQ音乐播放器 audio音频标签 audio标签 <audio src="i ...
HTML简单静态页面的编写
文章目录前言一.头部标签的编写 1.顶部的前半部分 2.顶部的后半部分二.中间标签的编写 1.中间部分二.底部标签的编写 1.底部前半部分 2.底部后半部分总结前言接下来的内容是,利用H ...
仿写安利中国纯静态页面
一.前言学习html+css中,目前阶段为静态页面的编写. 二.html页面代码这里面主要是div标签的使用和嵌套,ul和li无序列表的使用,img的插入. <!DOCTYPE html&g ...
仿猫眼官网静态页面（纯HTML）
仿猫眼官网静态页面(纯HTML) 准备工作正文 HTML CSS 小结准备工作用到的图片如下,具体可以去官网下面截取(这里就不上传图片了,供参考) 界面效果正文 HTML <!DOCTY ...
仿淘宝电商官网静态页面（HTML+CSS+JS）+ 常见布局解析，学会如果做是关键！
仿淘宝电商官网静态页面作为一个前端开发,布局+样式已经成为了必备的技能,你做得好是应该的,做的不好可以原谅,但当你意识到不足时,补足它这是我刚"入坑"的时候写的Demo,因为当 ...

静态页面复习--用semantic UI仿写豆瓣主页

静态页面复习--用semantic UI仿写豆瓣主页相关推荐

最新文章

热门文章