发现小红书的首页挺好看,于是花了点时间手撕出来,没有页面跳转噢~
(字体图标和图片自己另外找,这里就不分享了)
效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./static/icon-font/iconfont.css">
</head>
<body>
<div class="container type_center">
<div class="head_content">
<div class="left">
<a href="#">
<img src="./static/images/xhs-logo.png" alt="" style="width: 80px;">
</a>
</div>
<div class="middle">
<div class="search_box">
<input class="search_input" type="text" placeholder="请输入搜索内容">
<i class="iconfont icon-sousuo serch_btn"></i>
</div>
</div>
<div class="right">创作中心 业务合作</div>
</div>
<div class="main_content">
<div class="main_left">
<a class="item item_active" href="#">
<i class="iconfont icon-52shouye-1"></i>
<span>发现</span>
</a>
<a class="item" href="#">
<i class="iconfont icon-xinjianwenjianjia"></i>
<span>发布</span>
</a>
<a class="item" href="#">
<i class="iconfont icon-tongzhi"></i>
<span>通知</span>
</a>
<input type="button" value="登录" class="login">
</div>
<div class="main_right">
<div class="nav_box">
<a class="nav_item nav_item_active" href="">推荐</a>
<a class="nav_item" href="">穿搭</a>
<a class="nav_item" href="">美食</a>
<a class="nav_item" href="">彩妆</a>
<a class="nav_item" href="">影视</a>
<a class="nav_item" href="">职场</a>
<a class="nav_item" href="">情感</a>
<a class="nav_item" href="">家居</a>
<a class="nav_item" href="">游戏</a>
<a class="nav_item" href="">旅行</a>
<a class="nav_item" href="">健身</a>
</div>
<div class="main_box">
<a class="item_box" href="#">
<div class="mask_item">
<img class="imgs" src="./static//images//ikun.png" alt="">
<div class="mask"></div>
</div>
<div class="desc">奇奇怪怪啊哈哈哈哈哈哈哈哈哈哈哈哈</div>
</a>
<a class="item_box" href="#">
<div class="mask_item">
<img class="imgs" src="./static//images//ikun.png" alt="">
<div class="mask"></div>
</div>
<div class="desc">奇奇怪怪啊哈哈哈哈哈哈哈哈哈哈哈哈</div>
</a>
<a class="item_box" href="#">
<div class="mask_item">
<img class="imgs" src="./static//images//ikun.png" alt="">
<div class="mask"></div>
</div>
<div class="desc">奇奇怪怪啊哈哈哈哈哈哈哈哈哈哈哈哈</div>
</a>
<a class="item_box" href="#">
<div class="mask_item">
<img class="imgs" src="./static//images//ikun.png" alt="">
<div class="mask"></div>
</div>
<div class="desc">奇奇怪怪啊哈哈哈哈哈哈哈哈哈哈哈哈</div>
</a>
<a class="item_box" href="#">
<div class="mask_item">
<img class="imgs" src="./static//images//ikun.png" alt="">
<div class="mask"></div>
</div>
<div class="desc">奇奇怪怪啊哈哈哈哈哈哈哈哈哈哈哈哈</div>
</a>
<a class="item_box" href="#">
<div class="mask_item">
<img class="imgs" src="./static//images//ikun.png" alt="">
<div class="mask"></div>
</div>
<div class="desc">奇奇怪怪啊哈哈哈哈哈哈哈哈哈哈哈哈</div>
</a>
<a class="item_box" href="#">
<div class="mask_item">
<img class="imgs" src="./static//images//ikun.png" alt="">
<div class="mask"></div>
</div>
<div class="desc">奇奇怪怪啊哈哈哈哈哈哈哈哈哈哈哈哈</div>
</a>
<a class="item_box" href="#">
<div class="mask_item">
<img class="imgs" src="./static//images//ikun.png" alt="">
<div class="mask"></div>
</div>
<div class="desc">奇奇怪怪啊哈哈哈哈哈哈哈哈哈哈哈哈</div>
</a>
<a class="item_box" href="#">
<div class="mask_item">
<img class="imgs" src="./static//images//ikun.png" alt="">
<div class="mask"></div>
</div>
<div class="desc">奇奇怪怪啊哈哈哈哈哈哈哈哈哈哈哈哈</div>
</a>
<a class="item_box" href="#">
<div class="mask_item">
<img class="imgs" src="./static//images//ikun.png" alt="">
<div class="mask"></div>
</div>
<div class="desc">奇奇怪怪啊哈哈哈哈哈哈哈哈哈哈哈哈</div>
</a>
<a class="item_box" href="#">
<div class="mask_item">
<img class="imgs" src="./static//images//ikun.png" alt="">
<div class="mask"></div>
</div>
<div class="desc">奇奇怪怪啊哈哈哈哈哈哈哈哈哈哈哈哈</div>
</a>
<a class="item_box" href="#">
<div class="mask_item">
<img class="imgs" src="./static//images//ikun.png" alt="">
<div class="mask"></div>
</div>
<div class="desc">奇奇怪怪啊哈哈哈哈哈哈哈哈哈哈哈哈</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
<style>
* {
background-color: #ffffff;
}
.type_center {
width: 90%;
margin: 0 auto;
}
.container {
padding: 10px 0;
}
.container .head_content {
display: flex;
justify-content: space-between;
}
.search_box {
display: flex;
align-items: center;
background-color: #f7f7f7;
border-radius: 30px;
width: 500px;
}
.search_input {
flex: 1;
border: none;
padding: 10px 8px;
background-color: #f7f7f7;
border-radius: 30px;
}
.serch_btn {
cursor: pointer;
padding: 10px;
background-color: #f7f7f7;
border-radius: 0 30px 30px 0;
}
.main_content {
margin-top: 10px;
}
.main_content .main_left {
float: left;
width: 280px;
}
.main_content .main_left .item {
display: block;
text-decoration: none;
/* 去掉下划线 */
color: inherit;
/* 继承父元素的颜色 */
/* background-color: transparent; */
/* 背景色透明 */
/* 其他你想要重置的样式 */
padding: 8px 4px;
margin: 4px 0;
font-size: 18px;
font-weight: 700;
}
.main_content .main_left .item:hover{
background-color: #f7f7f7;
border-radius: 30px;
}
.item_active {
background-color: #f7f7f7;
border-radius: 30px;
}
.main_right {
float: left;
margin-left: 30px;
height: 85vh;
overflow-y: scroll;
}
.main_right::-webkit-scrollbar {
display: none;
}
.nav_box {
display: flex;
align-items: center;
}
.nav_item {
text-decoration: none;
color: inherit;
margin: 0 6px;
padding: 4px 20px;
border-radius: 30px;
}
.nav_item:hover{
background-color: #f7f7f7;
border-radius: 30px;
}
.nav_item_active {
font-weight: 700;
background-color: #f7f7f7;
}
.login {
border: none;
width: 100%;
padding: 16px 0;
background-color: #ff2e4d;
color: #ffffff;
border-radius: 30px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.main_box {
display: flex;
margin-top: 20px;
width: 1300px;
flex-wrap: wrap;
/* background-color: #e26363; */
}
.item_box {
display: inline;
width: 240px;
height: 320px;
margin: 10px;
text-align: center;
text-decoration: none;
color: inherit;
margin-bottom: 28px;
}
.mask_item {
position: relative;
}
.mask {
position: absolute;
top: 0;
left: 0;
z-index: 66;
width: 236px;
height: 300px;
border-radius: 20px;
background-color: rgba(0,0,0,0);
transition: all 0.3s;
}
.mask:hover {
background-color: rgba(0,0,0,0.2);
}
.imgs {
position: relative;
width: 236px;
height: 300px;
border-radius: 20px;
display: inline-block;
}
.desc {
width: 200px;
text-align: start;
padding: 0 20px;
}
</style>