<!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;
100%;
}
.ui.borderless.text.menu{
1000px;
margin:0 auto;
}
.ui.borderless.text.menu > .item{
color: rgb(50, 148, 122)
}
.ui.icon.input{
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;
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;
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{
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="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="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="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="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="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="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="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="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="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>
