仿PC端小红书主页

前端基础阶段

用原生的html和css来写页面是几乎每个初学前端的人第一次接触前端做的事，写出一个好看的前端页面也能让你成就感爆棚，小红书界面用视频做背景看起来高大上其实也是非常简单的几句代码能搞定的具体的如下

小红书页面详情

 仿小红书页面,用纯原生的html+css描写的，精美小红书首页,就首页一个页面,里面包括html.css以及图片资源文件

 下面提供html和css样式代码

html {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow-y: hidden;
}

#bg_video {
	width: 100%;
	height: 100%;
	/* 视频拉伸 */
	object-fit: cover;
	position: absolute;
	z-index: -99;
}

#logo {
	position: absolute;
	left: 100px;
	top: 50px;

}

#u1 li {
	color: white;
	/* 去掉样式 */
	list-style: none;
	float: left;
	margin-left: 70px;

}

#u1 {
	min-width: 1000px;
	position: absolute;
	right: 100px;
	top: 30px;

}


a {
	text-decoration: none;
	color: white;
}

#iphone {
	/* 160 364 */

	width: 200px;
	height: 380px;
	/* border: 2px solid red; */
	background-image: url("https://ci.xiaohongshu.com/3ca6607e-d4a5-4cb9-b455-a746713d8283");
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	left: 400px;
	top: 150px;

}

#iphone_bg {
	width: 190px;
	height: 360px;
	position: absolute;
	top: 10px;
	z-index: -50;
}

#content {
	min-width: 500px;
	font-size: 48px;
	color: white;
	position: absolute;
	top: 250px;
	left: 650px;
}

#android {
	width: 150px;
	height: 40px;
	border-radius: 40px;

	backgrou