简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >php中文网移动端首页仿写

php中文网移动端首页仿写

brait
brait原创
2019年11月10日 21:07:32566浏览

1.仿写php中文网首页

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link rel="stylesheet" href="static/css/init.css">
  8.     <link rel="stylesheet" href="static/css/style.css">
  9.     <title>Document</title>
  10. </head>
  11. <body>
  12.     <header>
  13.         <img src="static/images/user-pic.jpeg" alt="">
  14.         <img src="static/images/logo.png" alt="">
  15.         <img src="static/images/user-nav.jpg" alt="">
  16.     </header>
  17.     <!-- 轮播图 -->
  18.     <div class="banner">
  19.         <img src="static/images/banner.jpg" alt="">
  20.     </div>
  21.     <!-- 导航 -->
  22.     <nav>
  23.         <ul>
  24.             <li>
  25.                 <a href="">
  26.                     <img src="static/images/html.png" alt="">
  27.                     <span>HTML/CSS</span>
  28.                 </a>
  29.             </li>
  30.             <li>
  31.                 <a href="">
  32.                     <img src="static/images/JavaScript.png" alt="">
  33.                     <span>JavaScript</span>
  34.                 </a>
  35.             </li>
  36.             <li>
  37.                 <a href="">
  38.                     <img src="static/images/code.png" alt="">
  39.                     <span>服务端</span>
  40.                 </a>
  41.             </li>
  42.             <li>
  43.                 <a href="">
  44.                     <img src="static/images/sql.png" alt="">
  45.                         <span>数据库</span>
  46.                 </a>
  47.             </li>
  48.         </ul>
  50.         <ul>
  51.             <li>
  52.                 <a href=""><img src="static/images/app.png" alt="">
  53.                 <span>移动端</span>
  54.                 </a>
  55.             </li>
  56.             <li>
  57.                 <a href="">
  58.                     <img src="static/images/manual.png" alt="">
  59.                     <span>手册</span>
  60.                 </a>
  61.             </li>
  62.             <li>
  63.                 <a href=""><img src="static/images/tool2.png" alt="">
  64.                 <span>工具</span>
  65.                 </a>
  66.             </li>
  67.             <li>
  68.                 <a href="">
  69.                     <img src="static/images/live.png" alt="">
  70.                     <span>直播</span>
  71.                 </a>
  72.             </li>
  73.         </ul>
  74.     </nav>
  75.     <!-- 主体 -->
  76.     <main>
  77.         <!-- 课程推荐 -->
  78.         <article class="recommend">
  79.             <h3>推荐课程</h3>
  80.             <section>
  81.                     <a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
  82.                     <a href=""><img src="static/images/tjkc2.jpg" alt=""></a>
  83.             </section>
  85.             <section>
  86.                 <div>
  87.                     <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
  88.                     <span>
  89.                         <a href="">CI框架30分钟极速入门</a>
  90.                         <span><i>中级</i>49738次播放</span>
  91.                     </span>
  92.                 </div>
  94.                 <div>
  95.                     <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
  96.                     <span>
  97.                         <a href="">CI框架30分钟极速入门</a>
  98.                         <span><i>中级</i>49738次播放</span>
  99.                     </span>
  100.                     </div>
  101.             </section>
  102.         </article>
  104.         <article class="newcourse">
  105.             <h3>最新课程</h3>
  106.             <section>
  107.                         <div>
  108.                             <a href=""><img src="static/images/npic1.png" alt=""></a>
  109.                             <span>
  110.                                 <a href="">CI框架30分钟极速入门</a>
  111.                                 <span><i>中级</i>49738次播放</span>
  112.                             </span>
  113.                         </div>
  115.                         <div>
  116.                             <a href=""><img src="static/images/npic2.png" alt=""></a>
  117.                             <span>
  118.                                 <a href="">CI框架30分钟极速入门</a>
  119.                                 <span><i>中级</i>49738次播放</span>
  120.                             </span>
  121.                         </div>
  122.                         <div>
  123.                             <a href=""><img src="static/images/npic3.png" alt=""></a>
  124.                             <span>
  125.                                 <a href="">CI框架30分钟极速入门</a>
  126.                                 <span><i>中级</i>49738次播放</span>
  127.                                 </span>
  128.                         </div>
  129.             </section>
  130.         </article>
  131.         <!-- 最新文章 -->
  132.         <article class="narticle">
  133.             <h3>最新文章</h3>
  134.             <div>
  135.                 <span>
  136.                     <a href=""><span>PHP如何去除数组中的空值(图文+视频)</span></a>发布时间：2018-10-09
  137.                 </span>
  138.                 <a href=""><img src="static/images/nar1.png" alt=""></a>
  139.             </div>
  140.             <div>
  141.                     <span>
  142.                         <a href=""><span>PHP如何去除数组中的空值(图文+视频)</span></a>发布时间：2018-10-09
  143.                     </span>
  144.                     <a href=""><img src="static/images/nar1.png" alt=""></a>
  145.             </div>
  146.             <div>
  147.                         <span>
  148.                             <a href=""><span>PHP如何去除数组中的空值(图文+视频)</span></a>发布时间：2018-10-09
  149.                         </span>
  150.                         <a href=""><img src="static/images/nar1.png" alt=""></a>
  151.             </div>
  152.             <div>
  153.                 <span>更多内容</span>
  154.             </div>
  156.         </article>
  157.         <!-- 最新博文 -->
  158.         <article class="nblog">
  159.             <h3>最新博文</h3>
  160.             <div>
  161.                 <span><a href="">移动端/手机端去除横向进度条</a>
  162.                     <span>2019-11-08</span>
  163.                 </span>
  164.             </div>
  165.             <div>
  166.                     <span><a href="">移动端/手机端去除横向进度条</a>
  167.                         <span>2019-11-08</span>
  168.                     </span>
  169.             </div>
  170.             <div>
  171.                     <span><a href="">移动端/手机端去除横向进度条</a>
  172.                         <span>2019-11-08</span>
  173.                     </span>
  174.             </div>
  176.             <div>
  177.                 <span>更多内容</span>
  178.             </div>
  179.         </article>
  180.     </main>
  183.     <!-- 底部 -->
  184.     <footer>
  185.         <a href=""><img src="static/font-icon/zhuye.png" alt=""><span>主页</span></a>
  186.     <a href="">
  187.         <img src="static/font-icon/video.png" alt="">
  188.         <span>视频</span>
  189.     </a>
  190.     <a href="">
  191.         <img src="static/font-icon/luntan.png" alt="">
  192.         <span>社区</span>
  193.     </a>
  194.     <a href="">
  195.         <img src="static/font-icon/geren.png" alt="">
  196.         <span>我的</span>
  197.     </a>
  198.     </footer>
  199. </body>
  200. </html>

CSS部分：

  1. /* 头部 */
  2. header{
  3.     position: fixed;
  4.     top:0;
  6.     width:100%;
  7.     height: 42px;
  8.     background-color: #444444;
  9.     color:white;
  11.     min-width: 320px;
  12.     max-width: 768px;
  14.     display: flex;
  15.     justify-content: space-between;
  16.     align-items: center;
  18. }
  20. header > img:first-of-type,
  21. header > img:last-of-type{
  22.     width: 26px;
  23.     height: 26px;
  24.     margin: 5px;
  25. }
  27. header > img:first-of-type{
  28.     border-radius:50% ;
  29. }
  31. header > img{
  32.     width:94px;
  33. }
  35. /* 轮播图 */
  36. div > .banner {
  37.     display: flex;
  38.     height: 200px;
  39. }
  40. /* 导航 */
  41. nav{
  42.     background-color: white;
  43.     display: flex;
  44.     flex-flow:column nowrap;
  45. }
  47. nav img{
  48.     width: 45px;
  49.     height: 49px;
  50. }
  52. nav ul {
  53.     display: flex;
  54. }
  56. nav ul li {
  57.     flex: 1;
  58. }
  60. nav  ul li a {
  61.     display: flex;
  62.     flex-flow: column wrap;
  63.     align-items: center;
  64.     margin:10px;
  65. }
  67. nav ul li a span{
  68.     margin-top: 5px;
  69. }
  71. /* 推荐课程 */
  72. main > .recommend > section:first-of-type{
  74.     display: flex;
  75. }
  77. main > .recommend > section:first-of-type > a {
  78.     margin: 5px;
  79.     flex: 1;
  80. }
  82. main > .recommend > section:first-of-type > a > img{
  83.     height: 90px;
  84. }
  86. main > .recommend > section:last-of-type{
  88.     display: flex;
  89.     flex: 1;
  90.     flex-flow: column nowrap;
  91.     margin: 5px;
  93. }
  95. main > .recommend > section:last-of-type > div  img{
  97.     width: 350px;
  98.     height: 90px;
  99. }
  101. main > .recommend > section:last-of-type > div{
  102.     display: flex;
  103.     margin-bottom: 10px;
  104.     background-color: white;
  105. }
  106. main > .recommend > section:last-of-type > div > span{
  107.     display: flex;
  108.     flex-flow: column wrap;
  109.     margin-top: 5px;
  110.     padding-left: 10px;
  111. }
  113. main > .recommend > section:last-of-type > div > span i{
  114.     font-style: normal;
  115.     background-color: #444444;
  116.     border-radius: 4px;
  117.     padding:0 5px;
  118.     color: white;
  119. }
  120. /* 最新课程 */
  121. main > .newcourse >section {
  122.     display: flex;
  123.     flex-flow: column nowrap;
  124. }
  126. main >.newcourse img{
  127.     width: 350px;
  128.     height: 90px;
  129. }
  131. main > .newcourse  div{
  132.     display: flex;
  133.     margin-bottom: 10px;
  134.     background-color: white;
  135.     padding:10px;
  136. }
  137. main > .newcourse div > span{
  138.     display: flex;
  139.     flex-flow: column wrap;
  140.     margin-top: 5px;
  141.     padding-left: 10px;
  143. }
  145. main > .newcourse div > span i{
  146.     font-style: normal;
  147.     background-color: #444444;
  148.     border-radius: 4px;
  149.     color:white;
  150. }
  152. main > .narticle >div{
  153.     background-color: white;
  154.     display: flex;
  155.     justify-content: space-between;
  156.     margin-bottom: 10px;
  157.     padding: 5px;
  159. }
  161. main > .narticle >div img{
  162.     margin-right: 10px;
  163.     width: 330px;
  164.     height: 70px;
  165.     margin-top: 5px;
  166.     padding-left: 10px;
  167. }
  169. main > .narticle > div > span{
  170.     display: flex;
  171.     flex-flow: column wrap;
  172.     padding-top: 20px;
  173.     padding-left: 20px;
  174. }
  175. main > .narticle >div:last-of-type >span{
  177.     margin:0 auto;
  178.     padding:5px;
  180. }
  181. /* 最新博文 */
  182. main > .nblog >div{
  183.     background-color: white;
  184.     display: flex;
  185.     flex-flow: column nowrap;
  186.     margin-bottom: 10px;
  187.     padding: 5px;
  189. }
  191. main > .nblog >div>span{
  192.     margin-bottom: 10px;
  193.     padding: 10px;
  194.     display: flex;
  195.     justify-content: space-between;
  196.     align-content: center;
  197. }
  198. main > .nblog >div:last-of-type >span{
  199.     margin:0 auto;
  200.     padding:5px;
  201. }
  202. /* 底部 */
  203. footer{
  204.     position: fixed;
  205.     bottom: 0;
  207.     width:100%;
  208.     height: 42px;
  209.     padding: 3px;
  211.     min-width: 320px;
  212.     max-width: 768px;
  214.     display: flex;
  215.     justify-content: space-around;
  216.     align-items: center;
  217. }
  219. footer a img {
  220.     width: 16px;
  221.     height: 16px;
  222.     margin: 5px;
  223. }
  225. footer a {
  226.     display: flex;
  227.     flex-flow: column wrap;
  228.     margin: 3px;
  229. }
  231. body{
  232.     height: 2500px;
  233. }

运行效果：

2.手抄导航区代码

3.总结

学的时候觉得好像都记下来了，真的到了仿写的时候就傻眼了，根本没有思绪。我还是坚持关掉老师的示例代码，速度慢的和刚学打字一样，慢慢的敲。还是那句话，一层层嵌套的盒子只要不搞混，就不会写不出来。

上一条：flex grid 两种布局，一个页面下一条：1、通过artisan和手动创建控制器，并通过设置路由访问 2、通过artisan和手动创建模型，并通过配置数据库实现从表中获取数据 3、在控制器中引用模型，通过模型方法获取数据库中的数据，并输出-2019-11-01
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多