这次仿写的是一个本地人才网的移动端主页
先看运行效果
<!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;}
