仿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;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;
}

 首页
 社区精选
业务合作
创作服务者
 新闻中心
 关于我们
社会责任
 加入我们
登录

标记我的生活
iOS版
Android版
 用户协议
隐私政策
 侵权投诉指引
 社区规范
沪ICP备 13030189号 Copyright © 2014-2022 行吟信息科技（上海）有限公司| 地址：上海市黄浦区马当路388号C座| 电话：021-64224530| 自营经营者信息| 2022 沪公网安备 31010102002533号
网络文化经营许可证：沪网文［2021］1545-113号|增值电信业务经营许可证：沪B2-20150021|网购(订餐)大家评
医疗器械经营许可证：沪嘉食药监械经营许20187006号|医疗器械网络交易服务第三方平台备案:（沪）网械平台备字[2019]第00006号|互联网药品信息服务资格证书：(沪)-经营性-2018-0011
违法不良信息举报电话：(027) 8700 3878|上海市互联网举报中心|网上有害信息举报专区

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