百来行代码复刻小红书静态页面

狗狗显卡

已于 2024-08-03 14:50:10 修改

阅读量44

点赞数 2

文章标签： html5 javascript jquery css

于 2024-08-03 14:48:40 首次发布

本文链接：https://blog.csdn.net/gougouxianka/article/details/140890348

版权

是最终效果，图片在网上随便爬的

这两天哈尔滨下大雨，闲的没事写点东西，这个适合大学生们去交作业，没用什么高深的东西，就div，span和简单的浮动与盒模型。

这是没写文字和图片资源的样子

嘎嘎丑，但是那格式写错能直接看出来

最后是仿造的图片

html部分，没什么东西，写的也不好，看着玩吧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小红叔模仿</title>
		<link rel="stylesheet" type="text/css" href="css/web.css" >
	</head>
	<body>
		<div class="shangbian">
			<div class="sb-zuo"></div>
			
			<div class="sb-you"></div>
			
			<div class="sb-zhong"></div>
		</div>
		<div class="xiabian">
			<div class="zuobian">
				<div class="xb-zb-one">
					<ul>
						<li></li>
						<li></li>
						<li></li>
					</ul>
					
				</div>
				<div class="xb-zb-two">
					
				</div>
				<div class="xb-zb-three">
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
				
			</div>
			<div class="youbian">
				<div class="xb-yb-shang">
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
				<div class="xb-yb-xia">
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
				
			</div>
		</div>
	</body>
</html>

css部分

*{
	padding: 0%;
	margin: 0%;
}
.shangbian{
	background-color: aquamarine;
	width: 100%;
	height: 50px;
	padding: 1px;
	
}
.sb-zuo{
		width: 80px;
		height: 35px;
		background-color: red;
		float: left;
		margin-left: 90px;
		margin-top: 7px;
		border-radius: 40px;
		
	}


.sb-you{
		width: 160px;
		height: 35px;
		background-color: red;
		float: right;
		margin-right: 90px;
		margin-top: 7px;
		
	}
.sb-zhong{
		width: 300px;
		height: 35px;
		background-color: beige;
		margin: 0 auto;
		margin-top: 7px;
		border-radius: 20px;
		
	}
	
	
.xiabian{
	height: 1200px;
	width: 100%;
	background-color:beige;
}	
.zuobian{
	height: 1000px;
	width: 30%;
	background-color: beige;
	float: left;
}
.youbian{
	height: 1000px;
	width:70%;
	background-color: brown;
	float: right;
}

.xb-yb-shang{
	margin-top: 15px;
	width: 100%;
	height: 30px;
	background-color: red;
}
.xb-yb-shang li{
	list-style: none;
	float: left;
	margin-left: 50px;
	background-color:beige;
	width: 50px;
	height: 30px;
}
.xb-yb-xia{
	margin-top: 30px;
	width: 100%;
	height: 925px;
}
.xb-yb-xia li{
	list-style: none;
	border-radius: 25px;
	float: left;
	width: 200px;
	height: 400px;
	margin-left: 20px;
	margin-bottom: 40px;
	background-color:aquamarine;
}

.xb-zb-one{
	margin-top: 20px;
	margin-left: 50px;
	width: 250px;
	height: 160px;
	background-color: aqua;
	
}
.xb-zb-one li{
	list-style: none;
	width: 200px;
	height: 40px;
	background-color: red;
	float: left;
	margin-top: 10px;
	margin-left: 10px;
	
}
.xb-zb-two{
	width: 300px;
	height:50px;
	background-color: red;
	margin-left: 50px;
	border-radius: 25px;
	
	
}
.xb-zb-three{
	width: 250px;
	height: 140px;
	margin-left: 50px;
	background-color: aqua;
}
.xb-zb-three li{
	width: 200px;
	height: 20px;
	background-color: red;
	float: left;
	margin-left: 10px;
	margin-top: 10px;
	list-style: none;
	
	
}