博客列表 >仿写地方人才网站移动端页面

仿写地方人才网站移动端页面

风车
风车原创
2022年07月22日 22:41:55685浏览

这次仿写的是一个本地人才网的移动端主页

先看运行效果

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>筑人才</title>
  8. <link rel="stylesheet" href="css/reset.css">
  9. <link rel="stylesheet" href="css/html.css">
  10. </head>
  11. <body>
  12. <!-- 头部 -->
  13. <header>
  14. <div class="top">
  15. <a href=""><img src="img\logo.png" alt=""></a>
  16. <div class=""><span>搜索职位/公司</span></div>
  17. </div>
  18. </header>
  19. <!-- 主体 -->
  20. <main>
  21. <!-- 轮播图 -->
  22. <div class="imge">
  23. <img src="img\20994512782.PNG" alt="">
  24. </div>
  25. <!-- 分类标签 -->
  26. <div class="zhao">
  27. <ul>
  28. <li>
  29. <img src="img\15682759641578.png" alt="">
  30. <a href="">全职招聘</a>
  31. </li>
  32. <li>
  33. <img src="img\15687207581122.png" alt="">
  34. <a href="">人才库</a>
  35. </li>
  36. <li>
  37. <img src="img\15687017503530.png" alt="">
  38. <a href="">赏金职位</a>
  39. </li>
  40. <li>
  41. <img src="img\15687017359771.png" alt="">
  42. <a href="">兼职</a>
  43. </li>
  44. </ul>
  45. <div>
  46. <img src="img\home_icon_notice.png" alt="">
  47. <span>筑人才2022秋季校招开始!</span>
  48. </div>
  49. </div>
  50. <!-- 简历职位 -->
  51. <div class="jian">
  52. <div class="jianli">
  53. <img src="img\15697407992768.png" alt="">
  54. <a href=""><span>发布简历</span><span class="xiao">找喜欢的工作</span></a>
  55. </div>
  56. <div class="zhiwei">
  57. <img src="img\15687203789457.png" alt="">
  58. <a href=""><span>发布职位</span><span class="xiao">招优秀人才</span></a>
  59. </div>
  60. </div>
  61. <!-- 名企招聘 -->
  62. <div class="ming">
  63. <a href=""><span>名企招聘</span><span>更多></span></a>
  64. <div class="dan">
  65. <div>
  66. <img src="img\16555424129608.jpg" alt="">
  67. <a href=""><span>上海朗光</span><span class="xiao">招聘五人</span></a>
  68. </div>
  69. <div>
  70. <img src="img\15848059193535.png" alt="">
  71. <a href=""><span>CSGEC</span><span class="xiao">招聘五人</span></a>
  72. </div>
  73. <div>
  74. <img src="img\15936108875922.png" alt="">
  75. <a href=""><span>六瑞消防</span><span class="xiao">招聘八人</span></a>
  76. </div>
  77. <div>
  78. <img src="img\15845398422191.jpg" alt="">
  79. <a href=""><span>东亚实业</span><span class="xiao">招聘七人</span></a>
  80. </div>
  81. </div>
  82. </div>
  83. <!-- 招聘分类 -->
  84. <div class="lei">
  85. <a href="">最新</a>
  86. <a href="">紧急</a>
  87. <a href="">推荐</a>
  88. <a href="">附近</a>
  89. </div>
  90. <!-- 招聘细则 -->
  91. <div class="xize">
  92. <div class="xizeze">
  93. <a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
  94. <a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
  95. <a href="" class="fuli">
  96. <span>法定节假日</span>
  97. <span>周末双休</span>
  98. <span>五险一金</span>
  99. <span>包吃包住</span>
  100. </a>
  101. <a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
  102. </div>
  103. </div>
  104. <div class="xize">
  105. <div class="xizeze">
  106. <a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
  107. <a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
  108. <a href="" class="fuli">
  109. <span>法定节假日</span>
  110. <span>周末双休</span>
  111. <span>五险一金</span>
  112. <span>包吃包住</span>
  113. </a>
  114. <a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
  115. </div>
  116. </div>
  117. <div class="xize">
  118. <div class="xizeze">
  119. <a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
  120. <a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
  121. <a href="" class="fuli">
  122. <span>法定节假日</span>
  123. <span>周末双休</span>
  124. <span>五险一金</span>
  125. <span>包吃包住</span>
  126. </a>
  127. <a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
  128. </div>
  129. </div>
  130. <div class="xize">
  131. <div class="xizeze">
  132. <a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
  133. <a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
  134. <a href="" class="fuli">
  135. <span>法定节假日</span>
  136. <span>周末双休</span>
  137. <span>五险一金</span>
  138. <span>包吃包住</span>
  139. </a>
  140. <a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
  141. </div>
  142. </div>
  143. <div class="xize">
  144. <div class="xizeze">
  145. <a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
  146. <a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
  147. <a href="" class="fuli">
  148. <span>法定节假日</span>
  149. <span>周末双休</span>
  150. <span>五险一金</span>
  151. <span>包吃包住</span>
  152. </a>
  153. <a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
  154. </div>
  155. </div>
  156. <div class="xize">
  157. <div class="xizeze">
  158. <a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
  159. <a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
  160. <a href="" class="fuli">
  161. <span>法定节假日</span>
  162. <span>周末双休</span>
  163. <span>五险一金</span>
  164. <span>包吃包住</span>
  165. </a>
  166. <a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
  167. </div>
  168. </div>
  169. <div class="xize">
  170. <div class="xizeze">
  171. <a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
  172. <a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
  173. <a href="" class="fuli">
  174. <span>法定节假日</span>
  175. <span>周末双休</span>
  176. <span>五险一金</span>
  177. <span>包吃包住</span>
  178. </a>
  179. <a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
  180. </div>
  181. </div>
  182. <div class="xize">
  183. <div class="xizeze">
  184. <a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
  185. <a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
  186. <a href="" class="fuli">
  187. <span>法定节假日</span>
  188. <span>周末双休</span>
  189. <span>五险一金</span>
  190. <span>包吃包住</span>
  191. </a>
  192. <a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
  193. </div>
  194. </div>
  195. <div class="xize">
  196. <div class="xizeze">
  197. <a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
  198. <a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
  199. <a href="" class="fuli">
  200. <span>法定节假日</span>
  201. <span>周末双休</span>
  202. <span>五险一金</span>
  203. <span>包吃包住</span>
  204. </a>
  205. <a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
  206. </div>
  207. </div>
  208. <div class="xize">
  209. <div class="xizeze">
  210. <a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
  211. <a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
  212. <a href="" class="fuli">
  213. <span>法定节假日</span>
  214. <span>周末双休</span>
  215. <span>五险一金</span>
  216. <span>包吃包住</span>
  217. </a>
  218. <a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
  219. </div>
  220. </div>
  221. <div class="xize">
  222. <div class="xizeze">
  223. <a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
  224. <a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
  225. <a href="" class="fuli">
  226. <span>法定节假日</span>
  227. <span>周末双休</span>
  228. <span>五险一金</span>
  229. <span>包吃包住</span>
  230. </a>
  231. <a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
  232. </div>
  233. </div>
  234. <div class="xize">
  235. <div class="xizeze">
  236. <a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
  237. <a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
  238. <a href="" class="fuli">
  239. <span>法定节假日</span>
  240. <span>周末双休</span>
  241. <span>五险一金</span>
  242. <span>包吃包住</span>
  243. </a>
  244. <a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
  245. </div>
  246. </div>
  247. <div class="xize">
  248. <div class="xizeze">
  249. <a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
  250. <a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
  251. <a href="" class="fuli">
  252. <span>法定节假日</span>
  253. <span>周末双休</span>
  254. <span>五险一金</span>
  255. <span>包吃包住</span>
  256. </a>
  257. <a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
  258. </div>
  259. </div>
  260. <div class="xize">
  261. <div class="xizeze">
  262. <a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
  263. <a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
  264. <a href="" class="fuli">
  265. <span>法定节假日</span>
  266. <span>周末双休</span>
  267. <span>五险一金</span>
  268. <span>包吃包住</span>
  269. </a>
  270. <a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
  271. </div>
  272. </div>
  273. <div class="xize">
  274. <div class="xizeze">
  275. <a href="" class="zhiwei"><span>暖通项目经理</span><span class="red">10000-15000</span></a>
  276. <a href="" class="yaoqiu">北京 | 本科以上 | 三年以上经验</a>
  277. <a href="" class="fuli">
  278. <span>法定节假日</span>
  279. <span>周末双休</span>
  280. <span>五险一金</span>
  281. <span>包吃包住</span>
  282. </a>
  283. <a href="" class="dizhi"><span>贵州航旭电子科技有限公司</span><span>2022-07-22</span></a>
  284. </div>
  285. </div>
  286. <!-- 结尾 -->
  287. <div class="jiewei">
  288. <a href="">查看更多</a>
  289. </div>
  290. <!-- 链接 -->
  291. <div class="lianjie">
  292. <a href="">联系我们</a>
  293. <a href="">|</a>
  294. <a href="">下载APP</a>
  295. <a href="">|</a>
  296. <a href="">意见反馈</a>
  297. <a href="">|</a>
  298. <a href="">关于我们</a>
  299. </div>
  300. </main>
  301. <!-- 页尾 -->
  302. <footer>
  303. <div class="foot">
  304. <ul>
  305. <li>
  306. <img src="img\tab_icon_home_s.png" alt="">
  307. <a href="">首页</a>
  308. </li>
  309. <li>
  310. <img src="img\tab_icon_position_n.png" alt="">
  311. <a href="">职位</a>
  312. </li>
  313. <li class=>
  314. <img src="img\home_icon_release_default.png" alt="">
  315. <a href="">发布</a>
  316. </li>
  317. <li>
  318. <img src="img\tab_icon_news_n.png" alt="">
  319. <a href="">消息</a>
  320. </li>
  321. <li>
  322. <img src="img\tab_icon_me_n.png" alt="">
  323. <a href="">我的</a>
  324. </li>
  325. </ul>
  326. </div>
  327. </footer>
  328. </body>
  329. </html>

CSS代码

  1. /* ---------头部搜索框------------- */
  2. body header .top{
  3. height: 0.9rem;
  4. background-color: #ffffff;
  5. display: grid;
  6. grid-template-rows: repeat(2 ,1fr);
  7. place-content: center;
  8. padding: 10px 0 5px 0 ;
  9. }
  10. body header .top img{
  11. width: 1.8rem;
  12. margin: 0 0 0 0.9rem;
  13. }
  14. body header .top div{
  15. background-color:#f2f2f2;
  16. height: 0.38rem;
  17. border-radius:20px 20px;
  18. font-size: 0.15rem;
  19. padding: 0.07rem 0 0px 0.12rem;
  20. width: 3.5rem;
  21. }
  22. body header .top div span{
  23. color: #999;
  24. }
  25. /* ------------主页面--------------- */
  26. body main .imge img{
  27. margin: 0.1rem 0.15rem;
  28. border-radius: 10px 10px;
  29. width: 3.5rem;
  30. }
  31. /* ------导航-------- */
  32. body main .zhao {
  33. display: grid;
  34. grid-template-rows: 0.8rem 0.5rem;
  35. background-color: #ffffff;
  36. margin: 0 0.15rem;
  37. border-radius: 10px 10px;
  38. padding: 0.1px;
  39. }
  40. body main .zhao ul{
  41. display: flex;
  42. flex-flow: row nowrap;
  43. place-content: center;
  44. }
  45. body main img{
  46. width: 40%;
  47. }
  48. body main .zhao ul li {
  49. display: grid;
  50. grid-template-rows: 0.5rem 0.3rem;
  51. place-items: center;
  52. }
  53. body main .zhao div{
  54. display: grid;
  55. grid-template-columns: 0.5rem 1fr;
  56. place-items: center left;
  57. margin: 0 0 0 0.12rem;
  58. }
  59. body main .zhao div img{
  60. width: 0.3rem;
  61. }
  62. body main .zhao div span{
  63. color: #999;
  64. font-size: 0.1rem;
  65. }
  66. /* --------------发布简历------------- */
  67. body main .jian img{
  68. width: 0.4rem;
  69. border-radius: 50%;
  70. margin: 0.1rem;
  71. }
  72. body main .jian{
  73. display: grid;
  74. grid-template-columns: repeat(2,1fr);
  75. gap: 20px;
  76. margin: 0.1rem 0.15rem;
  77. }
  78. body main .jian div{
  79. display: flex;
  80. place-content: left;
  81. background-color: #ffffff;
  82. border-radius: 10px 10px;
  83. padding: 5px;
  84. }
  85. body main .jian div a{
  86. display: grid;
  87. grid-template-rows: repeat(2,1fr);
  88. place-items: left center;
  89. gap: 0.01rem;
  90. }
  91. body main .jian div a .xiao{
  92. color: #999;
  93. font-size: 0.12rem;
  94. }
  95. /* -------------名企招聘------------- */
  96. body main .ming img{
  97. width: 0.5rem;
  98. margin: 0.1rem;
  99. }
  100. body main .ming .zhao a{
  101. display: grid;
  102. grid-template-rows: repeat(2,1fr);
  103. place-items: left center;
  104. gap: 0.01rem;
  105. }
  106. body main .ming{
  107. display: grid;
  108. grid-template-rows: 0.2rem 1.5rem;
  109. background-color: #ffffff;
  110. margin: 0.1rem 0.15rem;
  111. border-radius: 10px 10px;
  112. padding: 0.1rem;
  113. gap: 0.1rem;
  114. }
  115. body main .ming .dan {
  116. display: grid;
  117. grid-template-columns: repeat(2,1fr);
  118. grid-template-rows: repeat(2,1fr);
  119. gap: 0.1rem;
  120. }
  121. body main .ming > a{
  122. display:flex;
  123. place-content: space-between;
  124. }
  125. body main .ming .dan>div {
  126. display: flex;
  127. flex-flow: row nowrap;
  128. background-color: #f2f2f2;
  129. }
  130. body main .ming .dan div a{
  131. display: grid;
  132. grid-template-rows: repeat(2,1fr);
  133. place-items: center;
  134. }
  135. body main .ming .dan div a .xiao{
  136. color: #999;
  137. font-size: 0.12rem;
  138. }
  139. /* -----------招聘分类---------------- */
  140. body main .lei{
  141. margin: 0 0.15rem;
  142. display: flex;
  143. place-content: space-evenly;
  144. }
  145. /* -----------招聘细则------------ */
  146. body main .xize{
  147. background-color: #ffffff;
  148. margin: 0.1rem 0.15rem;
  149. border-radius: 10px 10px;
  150. padding: 0.1rem;
  151. }
  152. body main .xize .xizeze{
  153. display: grid;
  154. grid-template-rows: repeat(4,1fr);
  155. place-content: left center;
  156. }
  157. body main .xize .xizeze .zhiwei{
  158. display: flex;
  159. place-content: space-between;
  160. }
  161. body main .xize .xizeze .zhiwei .red{
  162. color: red;
  163. font-size: larger;
  164. }
  165. body main .xize .xizeze .yaoqiu{
  166. color: #999;
  167. font-size: 0.12rem;
  168. }
  169. body main .xize .xizeze .fuli span{
  170. color: #666;
  171. font-size: 0.13rem;
  172. background-color: #f6f6f6;
  173. padding: 0.03rem;
  174. }
  175. body main .xize .xizeze .dizhi span {
  176. color: #666;
  177. font-size: 0.12rem;
  178. }
  179. body main .xize .xizeze .dizhi{
  180. display: flex;
  181. flex-flow: row nowrap;
  182. place-content: space-between;
  183. margin-top: 0.1rem;
  184. }
  185. /* ------------结尾-------------- */
  186. body main .jiewei {
  187. background-color: #ffffff;
  188. margin: 0.1rem 0.15rem;
  189. border-radius: 10px 10px;
  190. padding: 0.1rem;
  191. display: flex;
  192. place-content: center;
  193. }
  194. /* ------------链接------------- */
  195. body main .lianjie{
  196. margin: 0.3rem 0.15rem;
  197. display: flex;
  198. place-content: space-evenly;
  199. }
  200. /* --------------页尾----------- */
  201. /* 固定定位 */
  202. body footer .foot{
  203. width: 1fr;
  204. height:70px;
  205. background-color: #ffffff;
  206. padding: 10px 0 5px 0 ;
  207. position: fixed;
  208. left: 0;
  209. bottom: 0;
  210. right: 0;
  211. box-shadow: 4px 0px 10px rgba(7, 17, 27, 0.3);
  212. }
  213. body footer .foot ul{
  214. display: grid;
  215. grid-template-columns: repeat(5,1fr);
  216. place-items: center;
  217. }
  218. body footer .foot ul li {
  219. display: flex;
  220. flex-flow: column nowrap;
  221. place-items: center;
  222. }
  223. body footer .foot img{
  224. width: 0.2rem;
  225. }
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议