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” > </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” > </div> </div> <!– 发布时间 –> <p>1小时前，来自 热门精选</p> </div> </div> <!– 重复样式内容2 –> <div class=”cont”> <!– 图片 –> <div> <img src=”../img/img4.jpg” > </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” > </div> </div> <!– 发布时间 –> <p>1小时前，来自 热门精选</p> </div> </div> <!– 重复样式内容3 –> <div class=”cont”> <!– 图片 –> <div> <img src=”../img/img4.jpg” > </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” > </div> –> </div> <!– 发布时间 –> <p>1小时前，来自 热门精选</p> </div> </div> <!– 重复样式内容4 –> <div class=”cont”> <!– 图片 –> <div> <img src=”../img/img4.jpg” > </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” > </div> </div> <!– 发布时间 –> <p>1小时前，来自 热门精选</p> </div> </div> <!– 最后一个内容栏 –> <div class=”cont”> <!– 图片 –> <div> <img src=”../img/img4.jpg” > </div> <!– 右侧 –> <div> <!– 顶部署名 –> <div> <p>Lorem</p> </div> <!– 下部内容 –> <div class=”minCont”> <!– 三行文字 –> <div class=”wid”> <div class=”fourImg”> <img src=”../img/img3.jpg” > <img src=”../img/img3.jpg” > <img src=”../img/img3.jpg” > <img src=”../img/img3.jpg” > </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” ></a></div> <div><p><a href=”#”>>申请创建小站</a></p></div> <div><a href=”#”><img src=”../img/erweima.png” ></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” ></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” ></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” ></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; width: 15px; height: 15px; position: absolute; bottom: 29px; right: 260px; } /* 内容左侧 */ article{ width: 950px; margin: auto; margin-top: 50px; overflow: hidden; } article i{ display: inline-block; background-image: url(“../img/icon1.png”); width: 15px; height: 15px; } article>div:first-child{ width: 604px; float: left; } /* icon标签 */ .icon_1{ width: 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{ width: 600px; } /* 重复内容样式 */ .cont{ width: 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); width: 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; width: 384px; } .minCont>div:last-child>img{ width: 107px; height: 60px; float: right; } button{ font-size: 12px; width: 55px; height: 22px; margin: 16px 15px 0 0; } button>i{ display: inline-block; background-image: url(“../img/icon2.png”); width: 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{width: 100% !important;} .fourImg>img{ width: 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; width: 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{ width: 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{ width: 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{ width: 120px; height: 80px; } /* 页脚 */ footer{ width: 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);}