search

博客列表 >m.php.cn网站的首页布局(Flex实现-12月27日作业)+PHP培训十期线上班

m.php.cn网站的首页布局(Flex实现-12月27日作业)+PHP培训十期线上班

弃
弃原创
2019年12月29日 19:22:38633浏览

首页布局效果展示(点击查看自己服务器上的展示效果)

html代码展示

  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="/public/static/font/iconfont.css">
  8.     <link rel="stylesheet" href="../css/mphp.css">
  9.     <title>php中文网移动端首页</title>
  10. </head>
  11. <body>
  12.     <header>
  13.         <a href="">
  14.             <img src="../static/images/img1.jpg" alt="头像">
  15.         </a>
  17.         <img src="../static/images/logo.png" alt="logo">
  19.         <em class="iconfont icon-huiyuan2"></em>
  20.     </header>
  22.     <div class="banner">
  23.         <img src="../static/images/img1.jpg" alt="">
  24.     </div>
  26.     <nav>
  27.         <ul>
  28.             <li>
  29.                 <a href="">
  30.                     <img src="../static/images/img1.jpg" alt="">
  31.                     <span>我是名字</span>
  32.                 </a>
  33.             </li>
  34.             <li>
  35.                 <a href="">
  36.                     <img src="../static/images/img1.jpg" alt="">
  37.                     <span>我是名字</span>
  38.                 </a>
  39.             </li>
  40.             <li>
  41.                 <a href="">
  42.                     <img src="../static/images/img1.jpg" alt="">
  43.                     <span>我是名字</span>
  44.                 </a>
  45.             </li>
  46.             <li>
  47.                 <a href="">
  48.                     <img src="../static/images/img1.jpg" alt="">
  49.                     <span>我是名字</span>
  50.                 </a>
  51.             </li>
  53.         </ul>
  54.         <ul>
  55.             <li>
  56.                 <a href="">
  57.                     <img src="../static/images/img1.jpg" alt="">
  58.                     <span>我是名字</span>
  59.                 </a>
  60.             </li>
  61.             <li>
  62.                 <a href="">
  63.                     <img src="../static/images/img1.jpg" alt="">
  64.                     <span>我是名字</span>
  65.                 </a>
  66.             </li>
  67.             <li>
  68.                 <a href="">
  69.                     <img src="../static/images/img1.jpg" alt="">
  70.                     <span>我是名字</span>
  71.                 </a>
  72.             </li>
  73.             <li>
  74.                 <a href="">
  75.                     <img src="../static/images/img1.jpg" alt="">
  76.                     <span>我是名字</span>
  77.                 </a>
  78.             </li>
  80.         </ul>
  81.     </nav>
  83.     <main>
  84.         <div class="decomment">
  85.             <h3>推荐课程</h3>
  86.             <div>
  87.                 <a href=""><img src="../static/images/img1.jpg" alt=""></a>
  88.                 <a href=""><img src="../static/images/img1.jpg" alt=""></a>
  89.             </div>
  90.             <ul>
  91.                 <li>
  92.                     <a href="">
  93.                         <img src="../static/images/img1.jpg" alt="">
  94.                     </a>
  95.                     <div>
  96.                         <span>ci框架30分钟极速入门</span>
  97.                         <span><i>中级</i>555555</span>
  98.                     </div>
  99.                 </li>
  100.                 <li>
  101.                     <a href="">
  102.                         <img src="../static/images/img1.jpg" alt="">
  103.                     </a>
  104.                     <div>
  105.                         <span>ci框架30分钟极速入门</span>
  106.                         <span><i>中级</i>555555</span>
  107.                     </div>
  108.                 </li>
  109.             </ul>
  110.         </div>
  111.         <div class="latest">
  112.             <h3>最新更新</h3>
  113.             <ul>
  114.                 <li>
  115.                     <a href="">
  116.                         <img src="../static/images/img1.jpg" alt="">
  117.                     </a>
  118.                     <div>
  119.                         <span>ci框架30分钟极速入门</span>
  120.                         <span> 这里是介绍</span>
  121.                         <span><i>中级</i>555555</span>
  122.                     </div>
  123.                 </li>
  124.                 <li>
  125.                     <a href="">
  126.                         <img src="../static/images/img1.jpg" alt="">
  127.                     </a>
  128.                     <div>
  129.                         <span>ci框架30分钟极速入门</span>
  130.                         <span> 这里是介绍</span>
  131.                         <span><i>中级</i>555555</span>
  132.                     </div>
  133.                 </li>
  134.                 <li>
  135.                     <a href="">
  136.                         <img src="../static/images/img1.jpg" alt="">
  137.                     </a>
  138.                     <div>
  139.                         <span>ci框架30分钟极速入门</span>
  140.                         <span> 这里是介绍</span>
  141.                         <span><i>中级</i>555555</span>
  142.                     </div>
  143.                 </li>
  144.             </ul>
  145.         </div>
  146.         <div class="article">
  147.             <h3>最新文章</h3>
  148.             <ul>
  149.                 <li>
  150.                     <div>
  151.                         <a href="">
  152.                             <span>好多酱油好多酱油</span>
  153.                         </a>
  154.                         <span>发布时间</span>
  155.                     </div>
  156.                     <a href="">
  157.                         <img src="../static/images/img1.jpg" alt="">
  158.                     </a>
  159.                 </li>
  160.                 <li>
  161.                     <div>
  162.                         <a href="">
  163.                             <span>好多酱油好多酱油</span>
  164.                         </a>
  165.                         <span>发布时间</span>
  166.                     </div>
  167.                     <a href="">
  168.                         <img src="../static/images/img1.jpg" alt="">
  169.                     </a>
  170.                 </li>
  171.                 <li>
  172.                     <div>
  173.                         <a href="">
  174.                             <span>好多酱油好多酱油</span>
  175.                         </a>
  176.                         <span>发布时间</span>
  177.                     </div>
  178.                     <a href="">
  179.                         <img src="../static/images/img1.jpg" alt="">
  180.                     </a>
  181.                 </li>
  182.             </ul>
  183.             <button>
  184.                 更多内容
  185.             </button>
  186.         </div>
  187.         <div class="bowen">
  188.             <h3>博文列表</h3>
  189.             <ul>
  190.                 <li>
  191.                     <a href="">好好多酱油好多酱油多酱油好多酱油</a>
  192.                     <span>xxxx-xx-xx</span>
  193.                 </li>
  194.                 <li>
  195.                     <a href="">好好多酱油好多酱油多酱油好多酱油</a>
  196.                     <span>xxxx-xx-xx</span>
  197.                 </li>
  198.                 <li>
  199.                     <a href="">好好多酱油好多酱油多酱油好多酱油</a>
  200.                     <span>xxxx-xx-xx</span>
  201.                 </li> <li>
  202.                     <a href="">好好多酱油好多酱油多酱油好多酱油</a>
  203.                     <span>xxxx-xx-xx</span>
  204.                 </li>
  205.             </ul>
  206.             <button>
  207.                 更多内容
  208.             </button>
  209.         </div>
  211.         <div class="bowen">
  212.             <h3>博文列表</h3>
  213.             <ul>
  214.                 <li>
  215.                     <a href="">好好多酱油好多酱油多酱油好多酱油</a>
  216.                     <span>xxxx-xx-xx</span>
  217.                 </li>
  218.                 <li>
  219.                     <a href="">好好多酱油好多酱油多酱油好多酱油</a>
  220.                     <span>xxxx-xx-xx</span>
  221.                 </li>
  222.                 <li>
  223.                     <a href="">好好多酱油好多酱油多酱油好多酱油</a>
  224.                     <span>xxxx-xx-xx</span>
  225.                 </li> <li>
  226.                     <a href="">好好多酱油好多酱油多酱油好多酱油</a>
  227.                     <span>xxxx-xx-xx</span>
  228.                 </li>
  229.             </ul>
  230.             <button class="button">
  231.                 更多内容
  232.             </button>
  233.         </div>
  234.     </main>
  236.     <footer>
  237.         <a href="">
  238.             <em class="iconfont icon-icon_fabu"></em>
  239.             <span>首页</span>
  240.         </a>
  241.         <a href="">
  242.             <em class="iconfont icon-icon_fabu"></em>
  243.             <span>首页</span>
  244.         </a>
  245.         <a href="">
  246.             <em class="iconfont icon-icon_fabu"></em>
  247.             <span>首页</span>
  248.         </a>
  249.         <a href="">
  250.             <em class="iconfont icon-icon_fabu"></em>
  251.             <span>首页</span>
  252.         </a>
  253.     </footer>
  254. </body>
  255. </html>

css展示效果

  1. body,footer{
  2.     min-width: 360px;
  3.     max-width: 768px;
  4.     margin: 0 auto;
  5.     background-color: #edeff0;
  6.     position: relative;
  7.     color: gray;
  8. }
  9. body{
  10.     border: 1px solid rgb(231, 224, 224);
  11.     box-sizing: border-box;
  12. }
  14. img{
  15.     width: 100%;
  16. }
  17. ul,li{
  18.     margin: 0;
  19.     padding: 0;
  20. }
  21. li{
  22.     list-style: none;
  23. }
  24. a{
  25.     text-decoration: none;
  26.     color: gray;
  27. }
  29. header{
  30.     position: fixed;
  31.     top: 0;
  32.     width: 100%;
  33.     max-width: 768px;
  34.     height: 42px;
  35.     background-color: black;
  36.     display: flex;
  37.     flex-flow: row nowrap;
  38.     justify-content: space-between;
  39.     align-items: center;
  40. }
  42. header > a > img,
  43. header > em{
  44.     width: 26px;
  45.     height: 26px;
  46.     margin: 7px;
  47. }
  49. header > img{
  50.     width: 94px;
  51. }
  53. header > a > img{
  54.     border-radius: 50%;
  55. }
  57. .banner{
  58.     display: flex;
  59.     padding-top: 42px;
  60.     height: 200px;
  61. }
  63. /* 导航区 */
  64. nav{
  65.     display: flex;
  66.     height: 170px;
  67.     flex-flow: column nowrap;
  68.     background-color: #fff;
  69.     padding: 5px;
  70. }
  72. nav > ul{
  73.     flex: 1;
  74.     display: flex;
  75.     flex-flow: row nowrap;
  76.     justify-content: space-around;
  77.     align-items: center;
  78. }
  80. nav > ul > li > a{
  81.     display: flex;
  82.     flex-direction: column;
  83.     align-items: center;
  84.     font-weight: 550;
  85.     color: #888;
  86. }
  88. nav > ul > li > a > img{
  89.     margin: 5px;
  90. }
  92. nav img{
  93.     width: 45px;
  94.     height: 49px;
  95.     border-radius: 30%;
  96. }
  98. /* main */
  100. main{
  101.     display: flex;
  102.     flex-direction: column;
  103.     margin-top: 10px;
  104.     padding: 5px;
  105. }
  106. main > .decomment{
  107.     display: flex;
  108.     flex-direction: column;
  109. }
  111. h3{
  112.     font-size: 18px;
  113.     font-weight: bold;
  114.     padding-left: 10px;
  115. }
  117. main > .decomment > div{
  118.     display: flex;
  119. }
  120. main > .decomment > div > a{
  121.     flex-grow: 1;
  122.     margin: 0 7px;
  123. }
  125. main > .decomment > div img{
  126.     height: 90px;
  127. }
  129. main > .decomment > ul{
  130.     display: flex;
  131.     flex-direction: column;
  132.     margin-top: 10px;
  133. }
  135. main > .decomment > ul li{
  136.     display: flex;
  137.     background-color: #fff;
  138.     margin: 0 7px 10px 7px;
  139.     padding: 6px 0 4px 5px;
  140. }
  142. main > .decomment > ul li img{
  143.     height: 80px;
  144. }
  146. main > .decomment > ul li > div{
  147.     display: flex;
  148.     flex-direction: column;
  149.     margin-left: 10px;
  150.     flex-grow: 1;
  151. }
  153. main > .decomment > ul li > div >span:first-of-type{
  154.     font-size: 16.5px;
  155.     font-weight: 400;
  156.     color: #888
  157. }
  159. main > .decomment > ul li > div >span:last-child{
  160.     margin-top: 10px;
  161.     font-size: 12px;
  162. }
  164. main > .decomment > ul li > div >span:last-child > i{
  165.     background-color: #595757;
  166.     font-size: 10px;
  167.     border-radius: 20%;
  168.     color: seashell;
  169.     padding: 3px;
  170. }
  172. /* latest */
  174. main > .latest > div{
  175.     display: flex;
  176. }
  177. main > .latest > div > a{
  178.     flex-grow: 1;
  179.     margin: 0 7px;
  180. }
  182. main > .latest > div img{
  183.     height: 90px;
  184. }
  186. main > .latest > ul{
  187.     display: flex;
  188.     flex-direction: column;
  189.     margin-top: 10px;
  190. }
  192. main > .latest > ul li{
  193.     display: flex;
  194.     background-color: #fff;
  195.     margin: 0 7px 10px 7px;
  196.     padding: 6px 0 4px 5px;
  197. }
  199. main > .latest > ul li img{
  200.     height: 80px;
  201. }
  203. main > .latest > ul li > div{
  204.     display: flex;
  205.     flex-direction: column;
  206.     margin-left: 10px;
  207.     flex-grow: 1;
  208.     justify-content: space-between;
  209.     padding-right: 20px;
  210. }
  212. main > .latest > ul li > div >span{
  213.     flex-grow: 1;
  214. }
  215. main > .latest > ul li > div >span:first-of-type{
  216.     font-size: 16.5px;
  217.     font-weight: 400;
  218.     color: #888
  219. }
  221. main > .latest > ul li > div >span:nth-of-type(2){
  222.     margin-top: -4px;
  223.     font-size: 12px;
  224. }
  226. main > .latest > ul li > div >span:last-child{
  227.     display: flex;
  228.     line-height: 100%;
  229.     font-size: 12px;
  230.     justify-content: space-between;
  231.     margin-bottom: 3px;
  232.     align-items: center;
  233. }
  235. main > .latest > ul li > div >span:last-child > i{
  236.     background-color: #595757;
  237.     font-size: 10px;
  238.     border-radius: 20%;
  239.     color: seashell;
  240.     padding: 3px;
  241. }
  243. /* article */
  244. main > .article,
  245. main > .article > ul{
  246.     display: flex;
  247.     flex-direction: column;
  248. }
  250. main > .article > ul li{
  251.     display: flex;
  252.     background-color: #fff;
  253.     margin: 0 7px 10px 7px;
  254.     padding: 6px 5px 4px 5px;
  255. }
  257. main > .article > ul li > div{
  258.     flex-grow: 1;
  259.     margin-right: 10px;
  260.     display: flex;
  261.     flex-direction: column;
  262. }
  264. main > .article > ul li > div > a{
  265.     margin-bottom: 10px;
  266. }
  267. main > .article > ul li > div > a > span{
  268.     font-size: 14px;
  269.     font-weight: bolder;
  270. }
  272. main > .article > ul li > div > span{
  273.     font-size: 12px;
  274. }
  277. main > .article > ul img{
  278.     height: 65px;
  279. }
  281. main > .article > button{
  282.     border: none;
  283.     color: black;
  284.     padding: 10px 0;
  285.     background-color: #fff;
  286.     margin: 0 7px;
  287.     margin-bottom: 10px;
  288. }
  290. /* bowen */
  292. main > .bowen{
  294.     display: flex;
  295.     flex-direction: column;
  296. }
  297. main > .bowen > ul{
  298.     display: flex;
  299.     flex-direction: column;
  300.     margin: 0 7px;
  301. }
  303. main > .bowen > ul > li{
  304.     display: flex;
  305.     background-color: #fff;
  306.     padding: 10px 10px 8px;
  307.     margin-bottom: 10px;
  308.     justify-content: space-between;
  309. }
  311. main > .bowen > ul > li a{
  312.     font-size: 14px;
  313.     font-weight: bold;
  314. }
  315. main > .bowen > ul > li > span{
  316.     font-size: 12px;
  317. }
  318. main > .bowen > button{
  319.     border: none;
  320.     color: black;
  321.     padding: 10px 0;
  322.     background-color: #fff;
  323.     margin: 0 7px;
  324.     margin-bottom: 10px;
  325. }
  326. .bowen:last-child{
  327.     padding-bottom: 51px;
  328. }
  329. /* footer */
  330. footer{
  331.     display: flex;
  332.     justify-content: space-around;
  333.     height: 51px;
  334.     border-top: 1px solid burlywood;
  335.     align-items: center;
  336.     position: fixed;
  337.     bottom: 0;
  338.     width: 100%;
  339.     max-width: 768px;
  340. }
  342. footer > a{
  343.     display: flex;
  344.     flex-direction: column;
  345.     align-items: center;
  346. }
  347. footer > a > em{
  348.     font-size: 14px;
  349. }
  350. footer > a > span{
  351.     font-size: 14px;
  352.     margin-top: 2px;
  353. }

总结

在没有看老师讲的之前，自己动手试了做了一下,结果心有余力不足。 总结一下几点：
首先理清DOM结构
理清DOM结构之后，css设置一些全局配置，给后续做铺垫
参照m.php.cn 上DOM的结构尺寸进行布局
看了一遍视频，理清思路，虽然写的有点吃力，但是还好出来一个样子。（附上一个链接：我的作品）
还请老师指点一下不足、和错误。 下次改正！

上一条：flex项目属性及页面组件开发思路（12.25前端开发学习作业）下一条：12月23日_jQuery文档处理、筛选、属性和效果
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多