仿PC端小红书主页

最新推荐文章于 2024-03-19 12:13:36 发布

前端劲夫

最新推荐文章于 2024-03-19 12:13:36 发布

阅读量1.4k

点赞数 1

文章标签： html css javascript

本文链接：https://blog.csdn.net/wudi11294/article/details/130772621

版权

前端基础阶段

用原生的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;

	background-color: white;
	/* border: 2px solid red; */

}

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

	background-color: white;
	/* 	border: 2px solid red; */
}

#an {
	margin-left: 30px;
	margin-top: 5px;
	vertical-align: -5px;

}

#ap {
	margin-left: 30px;
	margin-top: 5px;
	vertical-align: -5px;
}

#foot {
	width: 1300px;
	height: 40px;
	/* border: 2px solid red; */
	position: absolute;
	top: 600px;

	text-align: center;
}

#u2 li {
	color: white;
	/* 去掉样式 */
	list-style: none;
	float: left;
	margin-left: 200px;
	box-sizing: border-box;
}

#bottom {
	width: 1200px;
	height: 100px;

	position: absolute;
	left: 100px;
	bottom: 10px;
}

span {
	display: flex;
	flex-direction: column;
	/* text-align: center; */
	justify-content: space-between;
	color: grey;
	align-items: center;
	width: 100%;
	font-size: 12px;
	line-height: 1px;

}

#country {
	width: 18px;
	height: 18px;
}

.f_android {

	position: absolute;
	left: 820px;
	top: 420px;
}

.f_apple {

	position: absolute;
	left: 650px;
	top: 420px;

}

#code_apple img {
	width: 150px;
	height: 150px;

}

#code_android img {
	width: 150px;
	height: 150px;

}

#code_apple {
	display: none;
}

#code_android {
	display: none;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!-- 图标 -->
		<link rel="shortcut icon" href="https://www.xiaohongshu.com/favicon.ico">
		<title>小红书_标记我的生活</title>
		<link rel="stylesheet" href="../css/小红书.css" type="text/css">
	</head>
		<body>
		<video id="bg_video" src="../video/背景视频.mp4" autoplay loop muted></video>
		<!-- logo -->
		<img id="logo" src="../img/loge1.jpg" alt="">
		<!-- 标题 -->
		<ul id="u1">
			<li> <a href="#">首页</a></li>
			<li> <a href="../html/zhuye.html">社区精选</a></li>
			<li>业务合作</li>
			<li>创作服务者</li>
			<li> <a href="https://www.xiaohongshu.com/protocols/news">新闻中心</a></li>
			<li> <a href="https://www.xiaohongshu.com/protocols/about">关于我们</a></li>
			<li>社会责任</li>
			<li> <a href="https://job.xiaohongshu.com/">加入我们</a></li>
			<li><a href="../html/login.html">登录</a></li>


		</ul>
		<!-- 手机视频 -->
		<div id="iphone">
			<video id="iphone_bg" src="../video/手机视频.mp4" autoplay loop muted></video>

		</div>
		<div id="content">
			<img width="143px " height="50px" id="xhs"
				src="https://ci.xiaohongshu.com/83074709-0d05-4d1c-9d38-24a8e910d914" alt="">
			<br>
			标记我的生活
		</div>


		<div class="f_apple">
			<!-- 鼠标移入时触发onmouseover   鼠标移出时触发onmouseout -->
			<div id="apple" onmouseover="changecode(1)" onmouseout="changecode(2)">
				<img id="ap" src="../img/iphone (1).png" alt="">iOS版
			</div>
			<!-- apple 二维码 -->
			<div id="code_apple">
				<img src="../img/0b84da4e-3984-4603-a2f2-72a806e5494d.png" alt="">
			</div>
		</div>



		<div class="f_android">
			<div id="android" onmouseover="changecode(3)" onmouseout="changecode(4)">
				<img id="an" src="../img/android.png" alt="">Android版
			</div>
			<div id="code_android">
				<img src="../img/0b84da4e-3984-4603-a2f2-72a806e5494d (1).png" alt="">
			</div>


		</div>
		<div id="foot">
			<ul id="u2">
				<li> <a href="https://www.xiaohongshu.com/terms">用户协议</a></li>
				<li><a href="https://www.xiaohongshu.com/privacy">隐私政策</a></li>
				<li> <a href="https://www.xiaohongshu.com/content_dispute">侵权投诉指引</a></li>
				<li> <a href="https://www.xiaohongshu.com/protocols/community-rule">社区规范</a></li>
			</ul>
		</div>
		<div id="bottom">
			<span>
				<p>
					沪ICP备 13030189号 Copyright © 2014-2022 行吟信息科技（上海）有限公司
					| 地址：上海市黄浦区马当路388号C座
					| 电话：021-64224530
					| 自营经营者信息
					| 2022 沪公网安备 31010102002533号
					<img id="country" src="https://ci.xiaohongshu.com/b0b2023e-bf3c-4994-9b67-cb8758739684" alt="">
				</p>
			</span>
			<span>
				<p>网络文化经营许可证：沪网文［2021］1545-113号
					|
					增值电信业务经营许可证：沪B2-20150021
					|
					<img src="../img/网购分析.png" alt="">网购(订餐)大家评
				</p>
			</span>
			<span>
				<p>医疗器械经营许可证：沪嘉食药监械经营许20187006号
					|
					医疗器械网络交易服务第三方平台备案:（沪）网械平台备字[2019]第00006号
					|
					互联网药品信息服务资格证书：(沪)-经营性-2018-0011</p>
			</span>
			<span>
				<p>违法不良信息举报电话：(027) 8700 3878
					|
					上海市互联网举报中心
					|
					网上有害信息举报专区</p>
			</span>
		</div>
<script src="../js/小红书.js" type="text/javascript"></script>
	</body>
</html>

页面中的大部分照片用的是绝对路径可以直接引用，但是背景视频和手机框里面的视频则需要自己备用，修改路径需要完整项目的私