[JavaScript知识库] flex仿微博布局实战+代码

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> flex仿微博布局实战+代码 -> 正文阅读

[JavaScript知识库]flex仿微博布局实战+代码

效果图：

：

?源代码：

<!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>

素材+代码下载：

flex仿微博布局实战+代码-Javascript文档类资源-CSDN下载flex仿微博布局实战+代码HTML+CSS+FLEX更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/weixin_39570751/85053481