效果图：
源代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>仿新浪微博 flex布局项目实战</title> <style type="text/css"> .wrap { width: 1500px; margin: 10px auto; display: flex; flex-direction: column; } .wrap .header { height: 55px; width: 100%; display: flex; justify-content:space-between; } .wrap .content { width: 80%; border: 1px solid #ccc; margin: 20px auto; display: flex; } .wrap .content .left{ width: 180px; height: 600px; display: flex; flex-direction: column; } .wrap .content .left .nav { padding: 16px 6px; text-align: center; background: #fff; border-radius:2px; margin: 6px 20px; } .wrap .content .left .nav:hover { cursor: pointer; background: linear-gradient(128deg, #fa2f2f 0%, #ff5b36 90%); } .wrap .content .center{ flex-grow: 1; height: 600px; display: flex; flex-direction: column; } .wrap .content .center .lunbo { width: 100%; } .wrap .content .center .list { height: 250px; } .wrap .content .center .list .item { display: flex; flex-direction: column; } .wrap .content .center .list .item .title { font-size: 14px; } .wrap .content .center .list .item .posts { margin-top: 20px; height: 160px; width: 100%; display: flex; flex-wrap: nowrap; } .wrap .content .center .list .item .posts img { height: 90%; width: 200px; margin-right: 8px; } .wrap .content .center .list .item .footer { display: flex; justify-content: space-between; } .wrap .content .right{ width: 280px; height: 600px; background: orange; display: flex; flex-direction: column; } .wrap .content .left .active { background: linear-gradient(128deg, #fa2f2f 0%, #ff5b36 90%); } .wrap .content .right .login{ width: 100%; } .wrap .content .right .news{ width: 100%; } </style> </head> <body> <div class="wrap"> <div class="header"> <img src="top1.png" /> <img src="top2.png" /> </div> <div class="content"> <div class="left"> <div class='nav active'>热门</div> <div class='nav'>头条</div> <div class='nav'>视频</div> <div class='nav'>新鲜事</div> <div class='nav'>榜单</div> <div class='nav'>搞笑</div> <div class='nav'>社会</div> <div class='nav'>时尚</div> <div class='nav'>电影</div> <div class='nav'>美女</div> <div class='nav'>体育</div> <div class='nav'>动漫</div> </div> <div class="center"> <div> <img class="lunbo" src="lunbo.png" /> </div> <div class="list"> <div class="item"> <div class="title">丁满：我头天上岗一翻抽屉，就发现这份500万现金合同。范伟你为啥要现金？你以为这么黑的剧组会给你</div> <div class="posts"> <img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0p6wyuj20m80m8q4w.jpg" /> <img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0qm06rj20u01hc0xg.jpg" /> <img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0okh0oj20u0140jxi.jpg" /> <img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0rppstj20tz1hc0x2.jpg" /> </div> <div class="footer"> <img src="footer_left.png"> <img src="footer_right.png"> </div> </div> <div class="item"> <div class="title">丁满：我头天上岗一翻抽屉，就发现这份500万现金合同。范伟你为啥要现金？你以为这么黑的剧组会给你</div> <div class="posts"> <img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0p6wyuj20m80m8q4w.jpg" /> <img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0qm06rj20u01hc0xg.jpg" /> <img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0okh0oj20u0140jxi.jpg" /> <img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0rppstj20tz1hc0x2.jpg" /> </div> <div class="footer"> <img src="footer_left.png"> <img src="footer_right.png"> </div> </div> <div class="item"> <div class="title">丁满：我头天上岗一翻抽屉，就发现这份500万现金合同。范伟你为啥要现金？你以为这么黑的剧组会给你</div> <div class="posts"> <img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0p6wyuj20m80m8q4w.jpg" /> <img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0qm06rj20u01hc0xg.jpg" /> <img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0okh0oj20u0140jxi.jpg" /> <img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0rppstj20tz1hc0x2.jpg" /> </div> <div class="footer"> <img src="footer_left.png"> <img src="footer_right.png"> </div> </div> <div class="item"> <div class="title">丁满：我头天上岗一翻抽屉，就发现这份500万现金合同。范伟你为啥要现金？你以为这么黑的剧组会给你</div> <div class="posts"> <img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0p6wyuj20m80m8q4w.jpg" /> <img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0qm06rj20u01hc0xg.jpg" /> <img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0okh0oj20u0140jxi.jpg" /> <img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0rppstj20tz1hc0x2.jpg" /> </div> <div class="footer"> <img src="footer_left.png"> <img src="footer_right.png"> </div> </div> </div> </div> <div class="right"> <img class='login' src="loginBox.png" /> <img class='news' src="news.png"> </div> </div> </div> </body> </html>
