search

博客列表 >仿写一个首页

仿写一个首页

三九三伏
三九三伏原创
2022年07月18日 09:41:17319浏览

1. html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8.     <link rel="stylesheet" href="static/css/reset.css">
  9.     <link rel="stylesheet" href="icon-font.css">
  10.     <link rel="stylesheet" href="static/css/style.css">
  11. </head>
  12. <body>
  13.     <!-- 页眉 -->
  14.     <header>
  15.         <!-- 顶部 -->
  16.         <div class="top">
  17.             <div class="content">
  18.                 <!-- 左边：顶部文字 -->
  19.                 <div class="title">php中文网-程序员梦开始的地方</div>
  20.                 <!-- 右边：用户信息 -->
  21.                 <div class="right">
  22.                     <a href="" class="iconfont icon-tixingtianchong"></a>
  23.                     <a href=""><img src="static/img/ET.jpg" alt="" ></a>
  24.                 </div>
  25.             </div>
  26.         </div>
  27.         <!-- 导航 -->
  28.         <div class="navs">
  29.             <div class="content">
  30.                 <a href="" class="logo"><img src="php.png" alt=""></a>
  31.                 <nav>
  32.                     <a href="" class="active">首页</a>
  33.                     <a href="">视频教程</a>
  34.                     <a href="">学习路径</a>
  35.                     <a href="">php培训</a>
  36.                     <a href="">资源下载</a>
  37.                 </nav>
  38.                 <div class="search">
  39.                     <input type="search" placeholder="输入关键字">
  40.                     <span class="iconfont icon-fangdajing1"></span>
  41.                 </div>
  42.             </div>
  43.         </div>
  44.     </header>
  45.     <!-- 主体 -->
  46.     <main>
  47.         <div class="grid">
  49.             <div class="r1c1">
  50.                     <a href="">php开发</a>
  51.                     <a href="">大前端</a>
  52.                     <a href="">后端开发</a>
  53.                     <a href="">数据库</a>
  54.                     <a href="">移动端</a>
  55.                     <a href="">运维开发</a>
  56.                     <a href="">UI设计</a>
  57.                     <a href="">计算机基础</a>
  58.             </div>
  59.             <div class="r1c2">
  60.                 <a href=""><img src="static/img/xszbb.png" alt=""></a>
  61.                 <!-- <a href=""><img src="static/img/kqhz.jpg" alt=""></a>
  62.                 <a href=""><img src="static/img/appsxl.jpg" alt=""></a>
  63.                 <a href=""><img src="static/img/mtjbydd.jpg" alt=""></a> -->
  64.             </div>
  65.             <div class="r1c3">
  66.                 <div class="r1c3top">
  67.                     <div class="toptop">
  68.                         <a href=""><img src="static/img/ET.jpg" alt=""></a>
  69.                         <strong>Mr xxx</strong>
  70.                         <div>
  71.                             <em>P豆<span>18</span></em>    
  72.                         </div>
  73.                     </div>
  74.                     <a class="xuexi" href="" >我的学习</a>
  75.                 </div>
  76.                 <div class="r1c3bottom">
  77.                     <div class="b1">
  78.                         <strong>问答社区</strong>
  79.                         <span>答疑</span>
  80.                     </div>
  81.                     <div class="b2">
  82.                         <strong>头条</strong>
  83.                         <span>头条内容</span>
  84.                     </div>
  85.                     <div class="b3">
  86.                         <strong>福利</strong>
  87.                         <span>福利内容</span>
  88.                     </div>
  89.                     <div class="b4">
  90.                         <strong>新班</strong>
  91.                         <span>新班内容</span>
  92.                     </div>
  93.                     <div class="b5">
  94.                         <strong>招募</strong>
  95.                         <span>招募内容</span>
  96.                     </div>
  97.                     <div class="b6">
  98.                         <strong>公告</strong>
  99.                         <span>公告内容</span>
  100.                     </div>
  101.                 </div>
  102.             </div>
  105.             <div class="r2c1">
  106.                 <div class="desc">
  107.                     <div class="title">学习路径</div>
  108.                     <span>全部7个&gt;</span>
  109.                 </div>
  110.                 <ul class="detail">
  111.                     <li onclick="">
  112.                         <img src="static/img/dgjj.png" alt="">
  113.                         <a href="">独孤九剑</a>
  114.                         <span>9门课程</span>
  115.                     </li>
  116.                     <li onclick="">
  117.                         <img src="static/img/ynxj.png" alt="">
  118.                         <a href="">玉女心经</a>
  119.                         <span>5门课程</span>
  120.                     </li>
  121.                     <li onclick="">
  122.                         <img src="static/img/tlbb.png" alt="">
  123.                         <a href="">天龙八部</a>
  124.                         <span>3门课程</span>
  125.                     </li>
  126.                     <li onclick="">
  127.                         <img src="static/img/phpkjkf.png" alt="">
  128.                         <a href="">自学指南</a>
  129.                         <span>19门课程</span>
  130.                     </li>
  131.                     <li onclick="">
  132.                         <img src="static/img/phpksrm.png" alt="">
  133.                         <a href="">趣味闯关</a>
  134.                         <span>22门课程</span>
  135.                     </li>
  136.                     <!-- <li onclick="">
  137.                         <img src="static/img/web.png" alt="">
  138.                         <a href="">入门课程</a>
  139.                         <span>22门课程</span>
  140.                     </li>
  141.                     <li onclick="">
  142.                         <img src="static/img/phpsz.png" alt="">
  143.                         <a href="">PHP直播班</a>
  144.                         <span>三个阶段</span>
  145.                     </li> -->
  147.                 </ul>
  148.             </div>
  149.             <div class="r2c2">
  150.                 <div class="r2c2left">
  151.                     <a href=""><img src="php.png" alt=""></a>
  152.                     <span>官方公众号</span>
  153.                 </div>
  154.                 <div class="r2c2right">
  155.                     <a href=""><img src="php.png" alt=""></a>
  156.                     <span>官方QQ群</span>
  157.                 </div>
  158.             </div>  
  159.         </div>
  160.     </main>
  161. </body>
  162. </html>

2. style.css代码

  1. body{
  2.     background-color: #f3f5f7;
  3. }
  5. header .top{
  6.     width: 100vw;
  7.     height: 40px;
  8.     background-color: #343434;
  9.     color: #aaa;
  10. }
  12. header .top .content{
  13.     width: 1200px;
  14.     display: grid;
  15.     grid-template-columns: 400px  100px;
  16.     place-content: space-between;
  17.     place-items: center start;
  18.     grid-auto-rows: 40px;
  19.     margin: auto;
  20. }
  22. header .top .content .right .iconfont{
  23.     color: #eee;
  24.     font-size:larger;
  25. }
  27. header .top .content .right>a>img{
  28.     width: 50%;
  29.     border-radius: 50%;
  30. }
  32. header .top .content .right{
  33.     display: grid;
  34.     grid-template-columns: repeat(2,1fr);
  35.     place-items: center start;
  36. }
  38. header .top .title{
  39.     font-size: larger;
  40.     font-weight: bold;
  41. }
  43. header .navs{
  44.     width: 100vw;
  45.     height: 90px;
  46.     background-color:  #fff;
  47.     box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  48. }
  50. header .navs .content{
  51.     width: 1200px;
  52.     display: grid;
  53.     grid-template-columns: 140px 1fr 200px;
  54.     margin:auto;
  55.     gap:10px;
  56.     grid-auto-rows:90px;
  57.     place-items: center start;
  58. }
  60. header .navs .content nav{
  61.     display: flex;
  62. }
  64. header .navs .content nav a{
  65.     padding: 0 10px;
  66. }
  68. header .navs .content nav a:hover,
  69. header .navs .content nav a.active{
  70.     font-weight: bold;
  71.     color: red;
  72. }
  74. header .navs .content img{
  75.     width: 100%;
  76.     height: 90px;
  77.     box-shadow: 0 5px 5px rgba(1,0,0,0.8);
  78. }
  80. header .navs .content .search{
  81.     display: flex;
  82. }
  84. header .navs .content .search input[type="search"]{
  85.     width: 200px;
  86.     height: 36px;
  87.     border: none;
  88.     background-color: #f0f0f0;
  89.     outline: none;
  90.     border-radius: 10px;
  91.     padding-left: 15%;
  92. }
  94. header .navs .content .search .icon-fangdajing1{
  95.     font-size:20px;
  96.     color: #ccc;
  97.     position: relative;
  98.     left: -40px;
  99.     top: 8px;
  100. }
  102. header .navs .content .search .icon-fangdajing1:hover{
  103.     cursor: pointer;
  104.     color: #0f0f0f;
  105. }
  107. main{
  108.     /* 浏览器默认16px字体有点大 */
  109.     font-size: 14px;
  110. }
  112. main .grid{
  113.     /* 调试用的定位色 */
  114.     /* background-color: lightcyan; */
  115.     display: grid;
  116.     grid-template-columns: 160px 810px 190px;
  117.     grid-template-rows: 400px 80px;
  118.     gap: 20px;
  119.     place-content: center;
  120.     margin: 20px 0;
  121. }
  123. main .grid> *{
  124.     background-color: #ffffff;
  125.     border-radius: 5px;
  126. }
  128. main .grid .r2c1{
  129.     grid-column: span 2;
  130. }
  132. main .grid .r1c1{
  133.     padding: 20px 0px;
  134.     display: grid;
  135.     place-items: center;
  136. }
  138. main .grid .r1c1>a{
  139.     padding: 10px 20px;
  140. }
  142. main .grid .r1c1>a:hover{
  143.     color: red;
  144.     border-radius: 10px;
  145.     background-color: rgb(250, 223, 270);
  146. }
  148. main .grid .r1c2 img{
  149.     width: 100%;
  150.     border-radius: 10px;
  151. }
  153. main .grid .r2c1{
  154.     display: grid;
  155.     grid-template-columns: 100px 1fr;
  156. }
  158. main .grid .r2c1 .desc{
  159.     padding: 16px 0;
  160.     display: grid;
  161.     place-items: center;
  162. }
  164. main .grid .r2c1 .desc span{
  165.     font-size: 12px;
  166.     color: #999;
  167. }
  169. main .grid .r2c1 .detail{
  170.     display: flex;
  171.     place-items: center;
  172.     place-content: space-between;
  173.     padding 20px 0;
  174. }
  176. main .grid .r2c1 .detail li{
  177.     display: grid;
  178.     grid-template-columns: 36px 85px;
  179.     grid-template-columns: repeat(2,36);
  180.     gap: 0 10px;
  181.     place-items: center start;
  182. }
  184. main .grid .r2c1 .detail li img{
  185.     width:100%;
  186.     grid-row: span 2;
  187. }
  189. main .grid .r2r1 .detail li a{
  190.     font-size: 14px;
  191. }
  193. main .grid .r2c1 .detail li a:hover{
  194.     color: red;
  195. }
  197. main .grid .r2c1 .detail li span{
  198.     font-size: 12px;
  199.     color: #999;
  200. }
  202. main .grid .r1c3{
  203.     display: grid;
  204.     grid-template-rows: 200px 200px;
  205.     padding: 2px;
  206. }
  208. main .grid .r1c3 .r1c3top{
  209.     display: grid;
  210.     grid-template-rows: 100px 100px;
  211.     /* gap 10px 0; */
  212.     place-content: space-between;
  213.     place-items: center start;
  214.     border-bottom: 1px solid #eee;
  215. }
  217. main .grid .r1c3 .r1c3top .toptop{
  218.     display: grid;
  219.     grid-template-columns: 60px 110px;
  220.     gap: 0px 10px;
  221.     place-content: space-between;
  222.     place-items: center;
  224. }
  226. main .grid .r1c3 .r1c3top .toptop a{
  227.     grid-row: span 2;
  228. }
  230. main .grid .r1c3 .r1c3top .toptop img{
  231.     width: 100%;
  232.     border-radius: 100px;
  233. }
  235. main .grid .r1c3 .r1c3top .xuexi{
  236.     place-content: top center;
  237.     /* place-items: center; */
  238.     margin-bottom: 100px;
  239.     width: 90%;
  240.     height: 35%;
  241.     background-color: red;
  242.     border-radius: 10px;
  243.     text-align: center ;
  244.     padding-top: 10px;
  245.     color: #fff;
  246.     font-weight: bold;
  248. }
  250. main .grid .r1c3 .r1c3bottom{
  252.     padding: 10px;
  253.     display: grid;
  255.     grid-template-rows: 30px 30px 30px 30px 30px 30px;
  256.     gap: 1px 0;
  257. }
  259. main .grid .r1c3 .r1c3bottom div{
  260.     display: grid;
  261.     grid-template-columns: 80px 80px;
  262. }
  264. main .grid .r1c3 .r1c3bottom div span{
  265.     color: #999;
  266. }
  268. main .grid .r2c2{
  269.     display:grid;
  270.     grid-template-columns: 90px 90px;
  271.     place-content: space-between;
  273. }
  275. main .grid .r2c2 div{
  276.     display: grid;
  277.     grid-template-rows: 40px 40px;
  278.     place-items: center;
  279. }
  281. main .grid .r2c2 div img{
  282.     align-items: center;
  283.     padding: 10px;
  284.     width: 40px;
  285.     height: 40px;
  286. }

3. reset.css代码

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  7. a{
  8.     text-decoration: none;
  9.     color: #555;
  10. }
  12. body{
  13.     background-color: rgb(243.245,247);
  14. }
  16. li{
  17.     list-style: none;
  18. }

4. icon-font.css代码

  1. @font-face {
  2.     /*引入的字体，可在阿里自行下载。*/
  3.     font-family: "iconfont"; /* Project id 3205780 */
  4.     src: url(./font_3205780_7eqow85axa.woff2) format('woff2'),
  5.          url(./font_3205780_7eqow85axa.woff) format('woff'),
  6.          url(./font_3205780_7eqow85axa.ttf) format('truetype');
  7.   }
  9.   .iconfont {
  10.     font-family: "iconfont" !important;
  11.     font-size: 16px;
  12.     font-style: normal;
  13.     -webkit-font-smoothing: antialiased;
  14.     -moz-osx-font-smoothing: grayscale;
  15.   }
  17.   .icon-tixingtianchong:before {
  18.     content: "\e695";
  19.   }
  21.   .icon-fangdajing1:before {
  22.     content: "\e609";
  23.   }
  25.   .icon-fangdajing:before {
  26.     content: "\e60c";
  27.   }
  29.   .icon-gouwuche:before {
  30.     content: "\e899";
  31.   }
  33.   .icon-wodetaobao:before {
  34.     content: "\e61b";
  35.   }
  37.   .icon-rmb:before {
  38.     content: "\e6b0";
  39.   }
  41.   .icon-xiantiao-:before {
  42.     content: "\e600";
  43.   }
  45.   .icon-aixin:before {
  46.     content: "\e6ec";
  47.   }
  49.   .icon-shejiaotubiao-08:before {
  50.     content: "\e641";
  51.   }
  53.   .icon-shejiaotubiao-44:before {
  54.     content: "\e648";
  55.   }

5. 效果展示


感觉仿的还可以，自己偷偷开心下，不过代码肯定不够精简，希望后面可以通过学习优化。

上一条：APP开发有哪些编程语言下一条：实例演示移动端布局原理
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多