这次仿写的是一个本地人才网的移动端主页
先看运行效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>筑人才</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/html.css">
</head>
<body>
<!-- 头部 -->
<header>
<div class="top">
<a href=""><img src="img\logo.png" alt=""></a>
<div class=""><span>搜索职位/公司</span></div>
</div>
</header>
<!-- 主体 -->
<main>
<!-- 轮播图 -->
<div class="imge">
<img src="img\20994512782.PNG" alt="">
</div>
<!-- 分类标签 -->
<div class="zhao">
<ul>
<li>
<img src="img\15682759641578.png" alt="">
<a href="">全职招聘</a>
</li>
<li>
<img src="img\15687207581122.png" alt="">
<a href="">人才库</a>
</li>
<li>
<img src="img\15687017503530.png" alt="">
<a href="">赏金职位</a>
</li>
<li>
<img src="img\15687017359771.png" alt="">
<a href="">兼职</a>
</li>
</ul>
<div>
<img src="img\home_icon_notice.png" alt="">
<span>筑人才2022秋季校招开始!</span>
</div>
</div>
<!-- 简历职位 -->
<div class="jian">
<div class="jianli">
<img src="img\15697407992768.png" alt="">
<a href=""><span>发布简历</span><span class="xiao">找喜欢的工作</span></a>
</div>
<div class="zhiwei">
<img src="img\15687203789457.png" alt="">
<a href=""><span>发布职位</span><span class="xiao">招优秀人才</span></a>
</div>
</div>
<!-- 名企招聘 -->
<div class="ming">
<a href=""><span>名企招聘</span><span>更多></span></a>
<div class="dan">
<div>
<img src="img\16555424129608.jpg" alt="">
<a href=""><span>上海朗光</span><span class="xiao">招聘五人</span></a>
</div>
<div>
<img src="img\15848059193535.png" alt="">
<a href=""><span>CSGEC</span><span class="xiao">招聘五人</span></a>
</div>
<div>
<img src="img\15936108875922.png" alt="">
<a href=""><span>六瑞消防</span><span class="xiao">招聘八人</span></a>
</div>
<div>
<img src="img\15845398422191.jpg" alt="">
<a href=""><span>东亚实业</span><span class="xiao">招聘七人</span></a>
</div>
</div>
</div>
<!-- 招聘分类 -->
<div class="lei">
<a href="">最新</a>
<a href="">紧急</a>
<a href="">推荐</a>
<a href="">附近</a>
</div>
<!-- 招聘细则 -->
<div class="xize">
<div class="xizeze">
<a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
<a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
<a href="" class="fuli">
<span>法定节假日</span>
<span>周末双休</span>
<span>五险一金</span>
<span>包吃包住</span>
</a>
<a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
</div>
</div>
<div class="xize">
<div class="xizeze">
<a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
<a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
<a href="" class="fuli">
<span>法定节假日</span>
<span>周末双休</span>
<span>五险一金</span>
<span>包吃包住</span>
</a>
<a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
</div>
</div>
<div class="xize">
<div class="xizeze">
<a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
<a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
<a href="" class="fuli">
<span>法定节假日</span>
<span>周末双休</span>
<span>五险一金</span>
<span>包吃包住</span>
</a>
<a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
</div>
</div>
<div class="xize">
<div class="xizeze">
<a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
<a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
<a href="" class="fuli">
<span>法定节假日</span>
<span>周末双休</span>
<span>五险一金</span>
<span>包吃包住</span>
</a>
<a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
</div>
</div>
<div class="xize">
<div class="xizeze">
<a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
<a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
<a href="" class="fuli">
<span>法定节假日</span>
<span>周末双休</span>
<span>五险一金</span>
<span>包吃包住</span>
</a>
<a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
</div>
</div>
<div class="xize">
<div class="xizeze">
<a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
<a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
<a href="" class="fuli">
<span>法定节假日</span>
<span>周末双休</span>
<span>五险一金</span>
<span>包吃包住</span>
</a>
<a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
</div>
</div>
<div class="xize">
<div class="xizeze">
<a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
<a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
<a href="" class="fuli">
<span>法定节假日</span>
<span>周末双休</span>
<span>五险一金</span>
<span>包吃包住</span>
</a>
<a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
</div>
</div>
<div class="xize">
<div class="xizeze">
<a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
<a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
<a href="" class="fuli">
<span>法定节假日</span>
<span>周末双休</span>
<span>五险一金</span>
<span>包吃包住</span>
</a>
<a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
</div>
</div>
<div class="xize">
<div class="xizeze">
<a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
<a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
<a href="" class="fuli">
<span>法定节假日</span>
<span>周末双休</span>
<span>五险一金</span>
<span>包吃包住</span>
</a>
<a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
</div>
</div>
<div class="xize">
<div class="xizeze">
<a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
<a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
<a href="" class="fuli">
<span>法定节假日</span>
<span>周末双休</span>
<span>五险一金</span>
<span>包吃包住</span>
</a>
<a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
</div>
</div>
<div class="xize">
<div class="xizeze">
<a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
<a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
<a href="" class="fuli">
<span>法定节假日</span>
<span>周末双休</span>
<span>五险一金</span>
<span>包吃包住</span>
</a>
<a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
</div>
</div>
<div class="xize">
<div class="xizeze">
<a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
<a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
<a href="" class="fuli">
<span>法定节假日</span>
<span>周末双休</span>
<span>五险一金</span>
<span>包吃包住</span>
</a>
<a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
</div>
</div>
<div class="xize">
<div class="xizeze">
<a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
<a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
<a href="" class="fuli">
<span>法定节假日</span>
<span>周末双休</span>
<span>五险一金</span>
<span>包吃包住</span>
</a>
<a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
</div>
</div>
<div class="xize">
<div class="xizeze">
<a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
<a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
<a href="" class="fuli">
<span>法定节假日</span>
<span>周末双休</span>
<span>五险一金</span>
<span>包吃包住</span>
</a>
<a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
</div>
</div>
<div class="xize">
<div class="xizeze">
<a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
<a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
<a href="" class="fuli">
<span>法定节假日</span>
<span>周末双休</span>
<span>五险一金</span>
<span>包吃包住</span>
</a>
<a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
</div>
</div>
<!-- 结尾 -->
<div class="jiewei">
<a href="">查看更多</a>
</div>
<!-- 链接 -->
<div class="lianjie">
<a href="">联系我们</a>
<a href="">|</a>
<a href="">下载APP</a>
<a href="">|</a>
<a href="">意见反馈</a>
<a href="">|</a>
<a href="">关于我们</a>
</div>
</main>
<!-- 页尾 -->
<footer>
<div class="foot">
<ul>
<li>
<img src="img\tab_icon_home_s.png" alt="">
<a href="">首页</a>
</li>
<li>
<img src="img\tab_icon_position_n.png" alt="">
<a href="">职位</a>
</li>
<li class=>
<img src="img\home_icon_release_default.png" alt="">
<a href="">发布</a>
</li>
<li>
<img src="img\tab_icon_news_n.png" alt="">
<a href="">消息</a>
</li>
<li>
<img src="img\tab_icon_me_n.png" alt="">
<a href="">我的</a>
</li>
</ul>
</div>
</footer>
</body>
</html>
CSS代码
/* ---------头部搜索框------------- */
body header .top{
height: 0.9rem;
background-color: #ffffff;
display: grid;
grid-template-rows: repeat(2 ,1fr);
place-content: center;
padding: 10px 0 5px 0 ;
}
body header .top img{
width: 1.8rem;
margin: 0 0 0 0.9rem;
}
body header .top div{
background-color:#f2f2f2;
height: 0.38rem;
border-radius:20px 20px;
font-size: 0.15rem;
padding: 0.07rem 0 0px 0.12rem;
width: 3.5rem;
}
body header .top div span{
color: #999;
}
/* ------------主页面--------------- */
body main .imge img{
margin: 0.1rem 0.15rem;
border-radius: 10px 10px;
width: 3.5rem;
}
/* ------导航-------- */
body main .zhao {
display: grid;
grid-template-rows: 0.8rem 0.5rem;
background-color: #ffffff;
margin: 0 0.15rem;
border-radius: 10px 10px;
padding: 0.1px;
}
body main .zhao ul{
display: flex;
flex-flow: row nowrap;
place-content: center;
}
body main img{
width: 40%;
}
body main .zhao ul li {
display: grid;
grid-template-rows: 0.5rem 0.3rem;
place-items: center;
}
body main .zhao div{
display: grid;
grid-template-columns: 0.5rem 1fr;
place-items: center left;
margin: 0 0 0 0.12rem;
}
body main .zhao div img{
width: 0.3rem;
}
body main .zhao div span{
color: #999;
font-size: 0.1rem;
}
/* --------------发布简历------------- */
body main .jian img{
width: 0.4rem;
border-radius: 50%;
margin: 0.1rem;
}
body main .jian{
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 20px;
margin: 0.1rem 0.15rem;
}
body main .jian div{
display: flex;
place-content: left;
background-color: #ffffff;
border-radius: 10px 10px;
padding: 5px;
}
body main .jian div a{
display: grid;
grid-template-rows: repeat(2,1fr);
place-items: left center;
gap: 0.01rem;
}
body main .jian div a .xiao{
color: #999;
font-size: 0.12rem;
}
/* -------------名企招聘------------- */
body main .ming img{
width: 0.5rem;
margin: 0.1rem;
}
body main .ming .zhao a{
display: grid;
grid-template-rows: repeat(2,1fr);
place-items: left center;
gap: 0.01rem;
}
body main .ming{
display: grid;
grid-template-rows: 0.2rem 1.5rem;
background-color: #ffffff;
margin: 0.1rem 0.15rem;
border-radius: 10px 10px;
padding: 0.1rem;
gap: 0.1rem;
}
body main .ming .dan {
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(2,1fr);
gap: 0.1rem;
}
body main .ming > a{
display:flex;
place-content: space-between;
}
body main .ming .dan>div {
display: flex;
flex-flow: row nowrap;
background-color: #f2f2f2;
}
body main .ming .dan div a{
display: grid;
grid-template-rows: repeat(2,1fr);
place-items: center;
}
body main .ming .dan div a .xiao{
color: #999;
font-size: 0.12rem;
}
/* -----------招聘分类---------------- */
body main .lei{
margin: 0 0.15rem;
display: flex;
place-content: space-evenly;
}
/* -----------招聘细则------------ */
body main .xize{
background-color: #ffffff;
margin: 0.1rem 0.15rem;
border-radius: 10px 10px;
padding: 0.1rem;
}
body main .xize .xizeze{
display: grid;
grid-template-rows: repeat(4,1fr);
place-content: left center;
}
body main .xize .xizeze .zhiwei{
display: flex;
place-content: space-between;
}
body main .xize .xizeze .zhiwei .red{
color: red;
font-size: larger;
}
body main .xize .xizeze .yaoqiu{
color: #999;
font-size: 0.12rem;
}
body main .xize .xizeze .fuli span{
color: #666;
font-size: 0.13rem;
background-color: #f6f6f6;
padding: 0.03rem;
}
body main .xize .xizeze .dizhi span {
color: #666;
font-size: 0.12rem;
}
body main .xize .xizeze .dizhi{
display: flex;
flex-flow: row nowrap;
place-content: space-between;
margin-top: 0.1rem;
}
/* ------------结尾-------------- */
body main .jiewei {
background-color: #ffffff;
margin: 0.1rem 0.15rem;
border-radius: 10px 10px;
padding: 0.1rem;
display: flex;
place-content: center;
}
/* ------------链接------------- */
body main .lianjie{
margin: 0.3rem 0.15rem;
display: flex;
place-content: space-evenly;
}
/* --------------页尾----------- */
/* 固定定位 */
body footer .foot{
width: 1fr;
height:70px;
background-color: #ffffff;
padding: 10px 0 5px 0 ;
position: fixed;
left: 0;
bottom: 0;
right: 0;
box-shadow: 4px 0px 10px rgba(7, 17, 27, 0.3);
}
body footer .foot ul{
display: grid;
grid-template-columns: repeat(5,1fr);
place-items: center;
}
body footer .foot ul li {
display: flex;
flex-flow: column nowrap;
place-items: center;
}
body footer .foot img{
width: 0.2rem;
}