search

博客列表 >1227仿m.php.cn首页

1227仿m.php.cn首页

Admin
Admin原创
2019年12月29日 23:25:58964浏览


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" type="text/css" href="css/public-reset.css">
  7.     <link rel="stylesheet" type="text/css" href="font/iconfont.css">
  8.     <link rel="stylesheet" type="text/css" href="css/main.css">
  9. </head>
  10. <body>
  11.     <div class="container">
  12.         <header class="nav-head">
  13.             <a href="https://m.php.cn" class="myself">
  14.                 <img src="images/user_avatar.jpg" width="23" height="23">
  15.             </a>
  16.             <a href="https://m.php.cn">
  17.                 <img src="images/logo.png" width="94" height="45">
  18.             </a>
  19.             <span class="iconfont icon-liebiao"></span>
  20.         </header>
  21.         <main>
  22.             <header>
  23.                 <a href="#"><img src="images/6.png" width="100%" height="100%"></a>
  24.             </header>
  25.             <nav>
  26.                 <ul>
  27.                     <li>
  28.                         <a href="#">
  29.                             <img src="images/html.png" alt="">
  30.                             <span>偷懒的字</span>
  31.                         </a>
  32.                     </li>
  33.                     <li>
  34.                         <a href="#">
  35.                             <img src="images/JavaScript.png" alt="">
  36.                             <span>偷懒的字</span>
  37.                         </a>
  38.                     </li>
  39.                     <li>
  40.                         <a href="#">
  41.                             <img src="images/code.png" alt="">
  42.                             <span>偷懒的字</span>
  43.                         </a>
  44.                     </li>
  45.                     <li>
  46.                         <a href="#">
  47.                             <img src="images/sql.png" alt="">
  48.                             <span>偷懒的字</span>
  49.                         </a>
  50.                     </li>
  51.                 </ul>
  52.                 <ul>
  53.                     <li>
  54.                         <a href="#">
  55.                             <img src="images/app.png" alt="">
  56.                             <span>偷懒的字</span>
  57.                         </a>
  58.                     </li>
  59.                     <li>
  60.                         <a href="#">
  61.                             <img src="images/manual.png" alt="">
  62.                             <span>偷懒的字</span>
  63.                         </a>
  64.                     </li>
  65.                     <li>
  66.                         <a href="#">
  67.                             <img src="images/tool2.png" alt="">
  68.                             <span>偷懒的字</span>
  69.                         </a>
  70.                     </li>
  71.                     <li>
  72.                         <a href="#">
  73.                             <img src="images/live.png" alt="">
  74.                             <span>偷懒的字</span>
  75.                         </a>
  76.                     </li>
  77.                 </ul>
  78.             </nav>
  79.             <section class="recommend">
  80.                 <h3>推荐课程</h3>
  81.                 <article class="">
  82.                     <a href="#"><img src="images/5d242759adb88970.jpg"></a>
  83.                     <a href="#"><img src="images/5d2426f409839992.jpg"></a>
  84.                 </article>
  85.                 <article>
  86.                     <section>
  87.                         <a href="#"><img src="images/5d2941e265889366.jpg"></a>
  88.                         <section>
  89.                             <a href="#">CI框架30分钟极速入门</a>
  90.                             <span><i class="tip">中级</i>3000次播放</span>
  91.                             <div style="height: 20.8px;"></div>
  92.                         </section>
  93.                     </section>
  94.                     <section>
  95.                         <a href="#"><img src="images/5aa23f0ded921649.jpg"></a>
  96.                         <section>
  97.                             <a href="#">2018前端入门_HTML5</a>
  98.                             <span><i class="tip">中级</i>3000次播放</span>
  99.                             <div style="height: 20.8px;"></div>
  100.                         </section>
  101.                     </section>
  102.                 </article>
  103.             </section>
  104.             <section class="newcommend">
  105.                 <h3>最新更新</h3>
  106.                 <article>
  107.                     <section>
  108.                         <a href="#"><img src="images/5d2941e265889366.jpg"></a>
  109.                         <section>
  110.                             <a href="#">CI框架30分钟极速入门</a>
  111.                             <span>这里是一段说明</span>
  112.                             <span><i class="tip">中级</i>3000次播放</span>
  113.                         </section>
  114.                     </section>
  115.                     <section>
  116.                         <a href="#"><img src="images/5aa23f0ded921649.jpg"></a>
  117.                         <section>
  118.                             <a href="#">2018前端入门_HTML5</a>
  119.                             <span>这里是一段说明</span>
  120.                             <span><i class="tip">中级</i>3000次播放</span>
  121.                         </section>
  122.                     </section>
  123.                 </article>
  124.             </section>
  125.         </main>
  126.         <footer>
  127.             <a href="#">
  128.                 <i class="iconfont icon-shouyeshouye"></i>
  129.                 <span>首页</span>
  130.             </a>
  131.             <a href="#">
  132.                 <i class="iconfont icon-icon_yulan"></i>
  133.                 <span>视频</span>
  134.             </a>
  135.             <a href="#">
  136.                 <i class="iconfont icon-xiaoxitongzhi"></i>
  137.                 <span>社区</span>
  138.             </a>
  139.             <a href="#">
  140.                 <i class="iconfont icon-huiyuan2"></i>
  141.                 <span>我的</span>
  142.             </a>
  143.         </footer>
  144.     </div>
  145. </body>
  146. </html>
  1. body{
  2.     overflow-x: hidden;
  3. }
  4. footer{
  5.     width: 100%;
  6.     max-width: 960px;
  7.     height: 50px;
  8.     position: fixed;
  9.     bottom: 0;
  10.     background: rgb(238, 238, 238);
  11.     display: flex;
  12. }
  13. footer>a{
  14.     flex: auto;
  15.     display: flex;
  16.     flex-direction: column;
  17.     justify-content: center;
  18.     align-items: center;
  19. }
  20. footer>a>i{
  21.     color: #888888;
  22.     font-size: 24px !important;
  23. }
  24. .container{
  25.     width: 100vw;
  26.     height: 100vh;
  27.     min-width: 320px;
  28.     max-width: 960px;
  29.     margin:auto;
  30.     position: relative;
  31. }
  32. .container > .nav-head{
  33.     position: fixed;
  34.     width: 100%;
  35.     max-width: 960px;
  36.     height: 50px;
  37.     padding: 0 15px;
  38.     box-sizing: border-box;
  39.     background: rgb(45, 53, 60);
  40.     display: flex;
  41.     justify-content: space-between;
  42.     align-items: center;
  43. }
  44. .container > .nav-head img{
  45.     display: block;
  46. }
  47. .container > .nav-head > .myself img{
  48.     border-radius: 50%;
  49. }
  50. .container > .nav-head > span{
  51.     font-size: 26px;
  52.     color: white;
  53. }
  54. main{
  55.     width: 100%;
  56.     max-width:960px;
  57.     display: flex;
  58.     flex-direction: column;
  59.     overflow: auto;
  60.     margin-bottom: 50px;
  61. }
  62. main > header{
  63.     margin-top: 50px;
  64.     height: 200px;
  65. } 
  66. main > header > img{
  67.     display: block;
  68. }
  69. main nav{
  70.     display: flex;
  71.     flex-direction: column;
  72. }
  73. main nav ul{
  74.     display: flex;
  75.     background: white;
  76. }
  77. main nav ul li{
  78.     margin-top: 1.5vh;
  79.     flex:auto;
  80. }
  81. main nav ul li a{
  82.     display: flex;
  83.     flex-direction: column;
  84.     align-items: center;
  85. }
  86. main nav ul li a img{
  87.     width: 56px;
  88. }
  89. main nav ul li a span{
  90.     margin-top: 1vh;
  91.     font-size: 16px;
  92.     font-weight: bold;
  93.     color: #888888;
  94. }
  95. main > .recommend,
  96. main > .newcommend{
  97.     margin-top: 2vh;    
  98.     display: flex;
  99.     flex-direction: column;
  100. }
  101. main > .recommend > h3,
  102. main > .newcommend > h3
  103. {
  104.     color: #888888;
  105.     padding: 10px;
  106. }
  107. main > .recommend article:first-of-type{
  108.     padding: 0 10px;
  109.     box-sizing: border-box;
  110.     display: flex;
  111. }
  112. main > .recommend article:first-of-type a{
  113.     margin: 5px;
  114.     flex:auto;
  115. }
  116. main > .recommend article:first-of-type a img{
  117.     width: 100%;
  118.     height: 90px;
  119. }
  120. main > .recommend article:last-of-type,
  121. main > .newcommend article
  122. {
  123.     display: flex;
  124.     flex-direction: column;
  125. }
  126. main > .recommend article:last-of-type > section,
  127. main > .newcommend article > section
  128. {
  129.     padding: 10px;
  130.     margin-top: 1vh;
  131.     box-sizing: border-box;
  132.     background: white;
  133.     display: flex;
  134. }
  135. main > .recommend article:last-of-type > section > a,
  136. main > .newcommend article > section > a
  137. {
  138.     flex: 1 1 30%;
  139. }
  140. main > .recommend article:last-of-type > section > a > img,
  141. main > .newcommend article > section > a >img{
  142.     width: 100%;
  143.     height: 80px;
  144. }
  145. main > .recommend article:last-of-type > section > section,
  146. main > .newcommend article > section > section
  147. {
  148.     margin-left: 1vw;
  149.     flex: 1 1 70%;
  150.     display: flex;
  151.     flex-direction: column;
  152.     justify-content: space-between;
  153. }
  154. main > .recommend article:last-of-type > section > section a,
  155. main > .newcommend article > section > section a
  156. {
  157.     font-size: 16px;
  158.     color:#888888;    
  159. }
  160. main > .recommend article:last-of-type > section > section .tip,
  161. main > .newcommend article > section > section .tip
  162. {
  163.     padding:2px;
  164.     color: white;
  165.     background: black;
  166.     border-radius: 5px;
  167.     font-style: normal;
  168.     font-size: 12px;
  169. }
  170. main > .newcommend article > section > section span{
  171.     font-size: 16px;
  172.     color: #888888;
  173. }
  174. main > .newcommend article > section > section span:last-of-type{
  175.     display: flex;
  176.     justify-content: space-between;
  177. }

这次作业写的时候H5标签的用法可能不是非常正确，也算是一次尝试哈！
还有就是grid布局的作业确实难。没瞅明白，有些地方用grid布局明显就是麻烦了。
那个作业还得再拖一拖（写不来…..）我再研究研究怎么写，说起来grid布局也就这么点东西，但是就是用起来感觉有问题怪怪的！

上一条：flex布局实践(12月26)下一条：《CSS基础》2019-12-20作业笔记
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多