html
</head>
<body>
<!-- 头部 -->
<header class="header1">
<!-- 左侧 -->
<div>
<a href="#">豆瓣</a>
<a href="#">读书</a>
<a href="#">电影</a>
<a href="#">音乐</a>
<a href="#">同城</a>
<a href="#">小组</a>
<a href="#">阅读</a>
<a href="#">FM</a>
<a href="#">东西</a>
<a href="#">市集</a>
<a href="#">更多</a>
</div>
<!-- 右侧 -->
<div>
<a href="#">下载豆瓣客户端</a>
<a href="#">提醒</a>
<a href="#">豆邮</a>
</div>
</header>
<header class="header2">
<!-- 左侧 -->
<div><img src="../img/logo.png"></div>
<!-- 中间 -->
<div>
<a href="#">首页</a>
<a href="#">我的豆瓣</a>
<a href="#">浏览发现</a>
<a href="#">移动应用</a>
<a href="#">游戏</a>
<a href="#">线上活动</a>
</div>
<!-- 右侧 -->
<div>
<a href="#"><i></i></a>
<input type="text" placeholder="搜索你感兴趣的人">
</div>
</header>
<!-- 内容 -->
<article>
<!-- 左侧 -->
<div>
<!-- icon标签 -->
<div class="icon_1">
<a href="#"><i></i>说句话</a>
<a href="#"><i></i>发照片</a>
<a href="#"><i></i>推荐网页</a>
<a href="#"><i></i>写日记</a>
<a href="#"><i></i>发布东西</a>
<a href="#"><i></i>首页设置</a>
</div>
<!-- input -->
<div class="icon_2">
<input type="text" placeholder="分享生活点滴...">
<a href="#"><i></i></a>
<a href="#"><i></i></a>
</div>
<!-- 重复样式内容1 -->
<div class="cont">
<!-- 图片 -->
<div>
<img src="../img/img4.jpg" alt="">
</div>
<!-- 右侧 -->
<div>
<!-- 顶部署名 -->
<div>
<p>Lorem</p>
</div>
<!-- 下部内容 -->
<div class="minCont">
<!-- 三行文字 -->
<div>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa voluptatibus quis laboriosam magnam magni id consequuntur odio incidunt accusamus suscipit aliquam debitis, quasi eius necessitatibus soluta labore sapiente aspernatur? Obcaecati?</p>
<button><i></i>喜欢</button>
</div>
<!-- 图片 -->
<div>
<img src="../img/img3.jpg" alt="">
</div>
</div>
<!-- 发布时间 -->
<p>1小时前，来自 热门精选</p>
</div>
</div>
<!-- 重复样式内容2 -->
<div class="cont">
<!-- 图片 -->
<div>
<img src="../img/img4.jpg" alt="">
</div>
<!-- 右侧 -->
<div>
<!-- 顶部署名 -->
<div>
<p>Lorem</p>
</div>
<!-- 下部内容 -->
<div class="minCont">
<!-- 三行文字 -->
<div>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa voluptatibus quis laboriosam magnam magni id consequuntur odio incidunt accusamus suscipit aliquam debitis, quasi eius necessitatibus soluta labore sapiente aspernatur? Obcaecati?</p>
<button><i></i>喜欢</button>
</div>
<!-- 图片 -->
<div>
<img src="../img/img3.jpg" alt="">
</div>
</div>
<!-- 发布时间 -->
<p>1小时前，来自 热门精选</p>
</div>
</div>
<!-- 重复样式内容3 -->
<div class="cont">
<!-- 图片 -->
<div>
<img src="../img/img4.jpg" alt="">
</div>
<!-- 右侧 -->
<div>
<!-- 顶部署名 -->
<div>
<p>Lorem</p>
</div>
<!-- 下部内容 -->
<div class="minCont">
<!-- 三行文字 -->
<div class="wid">
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa voluptatibus quis laboriosam magnam magni id consequuntur odio incidunt accusamus suscipit aliquam debitis, quasi eius necessitatibus soluta labore sapiente aspernatur? Obcaecati?</p>
<button><i></i>喜欢</button>
</div>
<!-- 图片 -->
<!-- <div>
<img src="../img/img3.jpg" alt="">
</div> -->
</div>
<!-- 发布时间 -->
<p>1小时前，来自 热门精选</p>
</div>
</div>
<!-- 重复样式内容4 -->
<div class="cont">
<!-- 图片 -->
<div>
<img src="../img/img4.jpg" alt="">
</div>
<!-- 右侧 -->
<div>
<!-- 顶部署名 -->
<div>
<p>Lorem</p>
</div>
<!-- 下部内容 -->
<div class="minCont">
<!-- 三行文字 -->
<div>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa voluptatibus quis laboriosam magnam magni id consequuntur odio incidunt accusamus suscipit aliquam debitis, quasi eius necessitatibus soluta labore sapiente aspernatur? Obcaecati?</p>
<button class="button_1"><i></i>喜欢</button>
<span>标签：</span>
<a href="#">人文</a>
<a href="#">摄影</a>
<a href="#">成长</a>
<a href="#">教育</a>
<a href="#">儿童</a>
</div>
<!-- 图片 -->
<div>
<img src="../img/img3.jpg" alt="">
</div>
</div>
<!-- 发布时间 -->
<p>1小时前，来自 热门精选</p>
</div>
</div>
<!-- 最后一个内容栏 -->
<div class="cont">
<!-- 图片 -->
<div>
<img src="../img/img4.jpg" alt="">
</div>
<!-- 右侧 -->
<div>
<!-- 顶部署名 -->
<div>
<p>Lorem</p>
</div>
<!-- 下部内容 -->
<div class="minCont">
<!-- 三行文字 -->
<div class="wid">
<div class="fourImg">
<img src="../img/img3.jpg" alt="">
<img src="../img/img3.jpg" alt="">
<img src="../img/img3.jpg" alt="">
<img src="../img/img3.jpg" alt="">
</div>
<h2>Lorem ipsum dolor sit.</h2>
<button class="button_1"><i></i>喜欢</button>
<span>标签：</span>
<a href="#">人文</a>
<a href="#">摄影</a>
<a href="#">成长</a>
<a href="#">教育</a>
<a href="#">儿童</a>
</div>
</div>
<!-- 发布时间 -->
<p>1小时前，来自 热门精选</p>
</div>
</div>
<!-- 翻页 -->
<div class="bottoms">
<a class="fanYe" href="#"><前页</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">...</a>
<a class="fanYe" href="#">后页></a>
</div>
</div>
<!-- 右侧 -->
<div>
<!-- 豆瓣正在发生 -->
<div class="con-left-1">
<h3>豆瓣正在发生</h3>
<p><a href="#">Lorem ipsum dolor sit.</a></p>
<p><a href="#">ipsum dolor sit.</a></p>
</div>
<div><a href="#"><img src="../img/img5.jpg" alt=""></a></div>
<div><p><a href="#">>申请创建小站</a></p></div>
<div><a href="#"><img src="../img/erweima.png" alt=""></a></div>
<!-- 活动热门 -->
<div class="join">
<h3 class="sameH3">热门活动.....<span>（</span><a href="#">换一个</a><span>）</span></h3>
<a href="#"><p>给我看看你们美好工作台吧~</p></a>
<p>时间：2019.3.16</p>
<p>参加：30人参加</p>
</div>
<div><a href="#"><p>>更多上线活动</p></a></div>
<!-- 一拍一 -->
<div class="play">
<h3 class="sameH3">豆瓣一拍一.....<span>（</span><a href="#">更多</a><span>）</span></h3>
<!-- 图1 -->
<div class="pic">
<div><a href="#"><img src="../img/img5.jpg" alt=""></a></div>
<div>
<p><a href="#">很高兴遇见你</a></p>
<p>城市：厦门</p>
<p>价格：2400</p>
</div>
</div>
<!-- 图2 -->
<div></div>
<div class="pic">
<div><a href="#"><img src="../img/img5.jpg" alt=""></a></div>
<div>
<p><a href="#">很高兴遇见你</a></p>
<p>城市：厦门</p>
<p>价格：2400</p>
</div>
</div>
</div>
<div><a href="#"><p>>已开放17个城市</p></a></div>
<di><a href="#"><img src="../img/img1.jpg" alt=""></a></di>
</div>
</article>
<!-- 页脚 -->
<footer>
<div><p>©2015-2019</p></div>
<div>
<p><a href="#">关于豆瓣</a></p>
<p><a href="#">在豆瓣工作</a></p>
<p><a href="#">联系我们</a></p>
<p><a href="#">免责声明</a></p>
<p><a href="#">帮助中心</a></p>
<p><a href="#">移动应用</a></p>
<p><a href="#">豆瓣广告</a></p>
</div>
</footer>
</body>
</html>
css
p,h2{
margin: 0;
}
a{
text-decoration: none;
}
/* 头部 */
/* 导航栏1 */
.header1{
height: 28px;
background-color: rgb(84, 86, 82);
}
.header1>div>a{
color: rgb(210, 210, 210);
float: left;
font-size: 12px;
margin-left: 24px;
line-height: 28px;
}
.header1>div>a:first-child{margin-left: 24px;}
.header1>div:last-child>a{float:right;}
.header1>div:last-child>a:first-child{margin-right:177px;}
/* 导航栏2 */
.header2{
height: 74px;
background-color: rgb(237, 344, 237);
position: relative;
}
.header2>div{
float: left;
line-height: 74px;
}
.header2>div:first-child{
margin-left:238px;
}
.header2>div:nth-child(2)>a{
font-size: 16px;
color: rgb(0, 119, 34);
margin-left: 24px;
}
.header2>div:nth-child(2)>a:first-child{
margin-left: 27px;
}
.header2>div:nth-child(3){
margin: 0 237px 0 34px;
}
.header2 input::-webkit-input-placeholder{
height: 30px;
font-size: 12px;
color: rgb(129, 129, 129);
padding-left: 5px;
}
.header2 i{
display: inline-block;
background-image: url("../img/icon1.png");
background-position:-2px -8px;
15px;
height: 15px;
position: absolute;
bottom: 29px;
right: 260px;
}
/* 内容左侧 */
article{
950px;
margin: auto;
margin-top: 50px;
overflow: hidden;
}
article i{
display: inline-block;
background-image: url("../img/icon1.png");
15px;
height: 15px;
}
article>div:first-child{
604px;
float: left;
}
/* icon标签 */
.icon_1{
100%;
margin-bottom: 8px;
}
.icon_1>a{
font-size: 14px;
color: rgb(68, 126, 173);
margin-right:20px;
}
.icon_1>a:last-child{
color: rgb(170, 170, 170);
margin-left: 50px;
}
.icon_1>a>i{
background-position: -2px -8px;
margin-right: 4px;
position: relative;
top:2px;
}
.icon_1>a:first-child>i{
background-position: -2px -99px;
}
.icon_1>a:nth-child(4)>i{
background-position: -2px -129px;
}
.icon_1>a:nth-child(5)>i{
background-position: -2px -159px;
}
.icon_1>a:nth-child(6)>i{
background-position: -2px -69px;
}
.icon_2{
position: relative;
margin-bottom: 24px;
}
.icon_2>a>i{
position: absolute;
background-position: -2px -8px;
display: inline;
bottom: 5px;
background-image: url("../img/icon1.png");
}
.icon_2>a:nth-child(2)>i{
right: 15px;
background-position: -2px -39px;
}
.icon_2>a:last-child>i{
right: 35px;
background-position: -2px -69px;
}
article>div>div:nth-child(2)>input::-webkit-input-placeholder{
height: 30px;
font-size: 14px;
color:rgb(170, 170, 170);
padding-left:5px;
}
article>div>div:nth-child(2)>input{
600px;
}
/* 重复内容样式 */
.cont{
100%;
overflow: hidden;
}
.cont h2{
color: rgb(68, 126, 173);
font-size: 14px;
}
.cont p{
font-size: 12px;
color: rgb(85, 85, 85);
}
.cont>div{
float: left;
}
.cont>div:last-child{
border-bottom: 1px solid rgb(229, 229, 229);
512px;
margin:0 0 12px 20px;
}
.cont>div:last-child>div:first-child{
margin-bottom: 10px;
}
.cont>div:last-child>p:last-child{
margin-left: 10px;
}
.minCont{
overflow: hidden;
background-color: rgb(249, 249, 249);
padding: 16px 10px;
box-sizing: border-box;
margin-bottom: 10px;
}
.minCont>div:first-child{
float: left;
384px;
}
.minCont>div:last-child>img{
107px;
height: 60px;
float: right;
}
button{
font-size: 12px;
55px;
height: 22px;
margin: 16px 15px 0 0;
}
button>i{
display: inline-block;
background-image: url("../img/icon2.png");
12px;
height: 12px;
background-position: 0 -20px;
margin-right: 3px;
position: relative;
top: 1px;
}
.cont>div:last-child>p{
color: rgb(213, 213, 213);
margin-bottom: 26px;
}
.wid{ 100% !important;}
.fourImg>img{
117px;
height: 117px;
}
.minCont>div>span{
color: rgb(213, 213, 213);
font-size: 12px;
padding: 0 0 0 15px;
border-left: 2px solid rgb(213, 213, 213);
}
.minCont>div>a{
color: rgb(213, 213, 213);
font-size: 12px;
margin-right: 10px;
}
/* 翻页 */
.bottoms{
font-size: 12px;
384px;
margin: auto;
margin-bottom: 63px;
}
.bottoms>a{
color: rgb(68, 126, 173);
margin-right: 5px;
padding: 0 6px;
}
.bottoms>a:hover{
background-color: rgb(131, 191, 115);
color: white;
}
.bottoms>a:first-child{
font-size: 14px;
color: rgb(170, 170, 170);
padding: 0;
}
.bottoms>a:first-child:hover{background-color: transparent;}
.bottoms>a:last-child{
font-size: 14px;
color: rgb(170, 170, 170);
padding: 0;
}
.bottoms>a:last-child:hover{background-color: transparent;}
/* 内容右侧 */
article>div:last-child a,p{
font-size: 12px;
color: rgb(68, 126, 173);
}
article>div:last-child h3{
font-size: 16px;
color: rgb(0, 119, 34);
}
article>div:last-child{
250px;
float: right;
}
article>div:last-child>div{
margin-bottom: 30px;
}
article>div:last-child>div:first-child{
background-color: rgb(242, 247, 246);
padding: 20px 18px;
line-height: 2;
}
article>div:last-child>div:first-child>h3{
margin: 0;
}
article>div:last-child>div:nth-child(4)>a>img{
100%;
}
.sameH3>span{
font-size: 12px;
color: black;
}
.sameH3 >a{
font-size: 12px;
color: rgb(68, 126, 173);
}
.join>p:nth-child(3){
color: rgb(153, 153, 153);
}
.join>p:nth-child(4){
color: rgb(153, 153, 153);
margin-bottom: 16px;
}
.pic{
overflow: hidden;
margin-bottom: 10px;
}
.pic>div{
float: left;
}
.pic>div:last-child{
margin-left: 15px;
line-height: 1.5;
}
.pic>div:last-child>p:nth-child(2){color: rgb(153, 153, 153);}
.pic>div:last-child>p:nth-child(3){color: rgb(153, 153, 153);}
.pic>div>a>img{
120px;
height: 80px;
}
/* 页脚 */
footer{
950px;
height: 44px;
overflow: hidden;
margin: auto;
border-top:1px dashed rgb(221, 221, 221);
}
footer>div{line-height: 44px;}
footer>div:first-child{float: left;}
footer>div:first-child>p{color:rgb(153, 153, 153);}
footer>div:last-child{float: right;}
footer>div:last-child>p{
float: left;
margin-right: 15px;
}
footer>div:last-child>p>a{color: rgb(68, 126, 173);}