search

博客列表 >CSS基础flex实战php中文网移动端首页-PHP培训十期线上班 学号：510251 12月27日作业

CSS基础flex实战php中文网移动端首页-PHP培训十期线上班 学号：510251 12月27日作业

赵大叔
赵大叔原创
2019年12月31日 17:37:22803浏览

flex项目实战php中文网移动端首页

整体实现思路

整个页面分为：头部header、轮播图banner、导航nav 、主体main、尾部footer五大部份。
1.1 头部header: 用户头像、logo 、用户导航，水平排列

1.2 轮播图banner：可点图片a+img

1.3 导航nav:2个无序列表ul垂直排列。每个ul中4个列表li水平排列。li内是可点击a的1张图片img和图片说明span。

1.4 主体main：
主体main分为：推荐课程recomment、最新更新renew、最新文章article、最新博文blog、最新问答quan五部分垂直排列。

1.5 尾部footer：4个字体图标和说明span水平排列，每个字体图标和说明span垂直排列。

代码

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>php中文网移动端首页</title>
  6.     <link rel="stylesheet" href="static/css/style.css">
  7. </head>
  8. <body>
  9. <header>
  10.     <a href=""><img src="static/images/user-pic1.jpg" alt=""></a>
  11.     <a href=""><img src="static/images/logo.png" alt=""></a>
  12.     <a href=""><img src="static/images/user-nav.jpg" alt=""></a>
  13. </header>
  15. <div class="banner">
  16.     <a href=""><img src="static/images/banner.jpg" alt=""></a>
  17. </div>
  19. <nav>
  20.     <ul>
  21.         <li>
  22.             <a href="">
  23.                 <img src="static/images/html.png" alt="">
  24.                 <span>HTML/CSS</span>
  25.             </a>
  26.         </li>
  27.         <li>
  28.             <a href="">
  29.                 <img src="static/images/JavaScript.png" alt="">
  30.                 <span>JavaScript</span>
  31.             </a>
  32.         </li>
  33.         <li>
  34.             <a href="">
  35.                 <img src="static/images/code.png" alt="">
  36.                 <span>服务器端</span>
  37.             </a>
  38.         </li>
  39.         <li>
  40.             <a href="">
  41.                 <img src="static/images/sql.png" alt="">
  42.                 <span>数据库</span>
  43.             </a>
  44.         </li>
  45.     </ul>
  46. </nav>
  48. <main>
  49.     <article class="recommend">
  50.         <h3>推荐课程</h3>
  51.         <section>
  52.             <a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
  53.             <a href=""><img src="static/images/tjkc2.jpg" alt=""></a>
  54.         </section>
  55.         <section>
  56.             <div>
  57.                 <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
  58.                 <span>
  59.                     <a href="">CI框架30分钟极速入门</a>
  60.                     <span><i>中级</i>55780次播放</span>
  61.                 </span>
  62.             </div>
  63.         </section>
  64.     </article>
  65.     <article class="renew">
  66.         <h3>最新更新</h3>
  67.         <section>
  68.             <div>
  69.                 <a href=""><img src="static/images/zxkc1.jpg" alt=""></a>
  70.                 <span>
  71.                     <a href="">2019python自学视频</a>
  72.                     <span>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带...</span>
  73.                     <span><i>中级</i>55780次播放</span>
  74.                 </span>
  75.             </div>
  76.         </section>
  77.     </article>
  78.     <article class="article">
  79.         <h3>最新文章</h3>
  80.         <section>
  81.             <div>
  82.                 <span>
  83.                     <a href="">java学了做什么？</a>
  84.                     <span><i>发布时间：</i>2019-12-30</span>
  85.                 </span>
  86.                 <a href=""><img src="static/images/zxwz1.jpg" alt=""></a>
  87.             </div>
  88.         </section>
  90.         <section>
  91.             <div>
  92.                 <span>
  93.                     <a href="">更多内容</a>
  94.                 </span>
  95.             </div>
  96.         </section>
  97.     </article>
  98.     <article class="blog">
  99.         <h3>最新博文</h3>
  100.         <section>
  101.             <span>
  102.                 composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器...
  103.             </span>
  104.             <i>2019-12-27</i>
  105.         </section>
  107.     </article>
  108.     <article class="quan">
  109.         <h3>最新问答</h3>
  110.         <section>
  111.             <span>
  112.                变量规则无法定义
  113.             </span>
  114.             <i>2019-12-30</i>
  115.         </section>
  117.     </article>
  118. </main>
  120. <footer>
  121.     <a href="">
  122.         <img src="static/font-icon/zhuye.png" alt="">
  123.         <span>首页</span>
  124.     </a>
  125.     <a href="">
  126.         <img src="static/font-icon/video.png" alt="">
  127.         <span>视频</span>
  128.     </a>
  129.     <a href="">
  130.         <img src="static/font-icon/luntan.png" alt="">
  131.         <span>社区</span>
  132.     </a>
  133.     <a href="">
  134.         <img src="static/font-icon/geren.png" alt="">
  135.         <span>我的</span>
  136.     </a>
  137. </footer>
  138. </body>
  139. </html>

css代码

  1. @import "reset.css";
  3. /*头部样式*/
  4. header{
  5.     /*固定定位*/
  6.     position: fixed;
  7.     top: 0;
  8.     /*宽度自适应*/
  9.     width: 100%;
  10.     height:45px;
  11.     background-color: #444444;
  12.     color: #ffffff;
  14.     min-width: 320px;
  15.     max-width: 768px;
  17.     /*转为flex*/
  18.     display: flex;
  19.     /*水平排列*/
  20.     flex-direction: row;
  21.     /*两端对齐*/
  22.     justify-content: space-between;
  23.     /*垂直方向居中排列*/
  24.     align-items: center;
  25. }
  26. /*设置用户头像/用户导航图标大小*/
  27. header > a:first-of-type > img,
  28. header > a:last-of-type > img {
  29.     width: 30px;
  30.     height: 30px;
  31.     margin: 5px;
  32. }
  33. header > a:first-of-type > img {
  34.     /*用户头像圆角*/
  35.     border-radius: 50%;
  36. }
  39. /*轮播图*/
  40. .banner > a {
  41.     display: flex;
  42.     height: 200px;
  43. }
  46. /*导航区*/
  47. nav {
  48.     background-color: #fff;
  49.     display: flex;
  50.     /*垂直，不换行*/
  51.     flex-flow: column nowrap;
  52. }
  54. nav img {
  55.     width: 45px;
  56.     height: 49px;
  57. }
  58. nav > ul {
  59.     display: flex;
  60. }
  61. nav ul li {
  62.     flex: 1;
  63. }
  64. nav ul li a {
  65.     display: flex;
  66.     flex-flow: column wrap;
  67.     align-items: center;
  68.     margin: 10px;
  69. }
  70. nav ul li a span {
  71.     margin-top: 5px;
  72.     align-items: center;
  73. }
  76. /*主体内容区*/
  77. main {
  78.     display: flex;
  79.     flex-direction: column;
  80. }
  82. main > .recommend > section:first-of-type {
  83.     /*第1个section内两图片水平排列*/
  84.     display: flex;
  85.     flex-direction: row;
  86. }
  87. main > .recommend > section:first-of-type > a {
  88.     /*第1个section内两图片样式*/
  89.     margin: 5px;
  90.     flex: 1;
  91. }
  92. main > .recommend > section:first-of-type > a > img {
  93.     /*第1个section内两图片高度*/
  94.     height: 90px;
  95. }
  96. main > .recommend > section:last-of-type {
  97.     /*第2个section内两div（图片和说明）整体垂直排列*/
  98.     display: flex;
  99.     flex-direction: column;
  100. }
  101. main > .recommend > section:last-of-type > div {
  102.     background-color: #fff;
  103.     margin: 5px;
  104.     display: flex;
  105.     /*图片和说明水平排列*/
  106.     flex-direction: row;
  107. }
  108. main > .recommend > section:last-of-type > div img {
  109.      width: 350px;
  110.      height: 90px;
  111.  }
  113. main > .recommend > section:last-of-type > div > span {
  114.     flex: 1;
  115.     display: flex;
  116.     /*说明垂直排列*/
  117.     flex-direction: column;
  118.     margin-top: 5px;
  119.     padding-left: 10px;
  120. }
  122. main > .recommend > section:last-of-type > div > span i {
  123.     font-style: normal;
  124.     background-color: #333333;
  125.     color: white;
  126.     border-radius: 3px;
  127.     padding: 0 5px;
  128.     font-size: smaller;
  129. }
  130. main > .recommend > section:last-of-type > div > span > span {
  131.     margin-top: 40px;
  132.     display: flex;
  133.     /*初级、播放次数水平*/
  134.     flex-direction: row;
  135.     justify-content: space-between;
  136. }
  137. body {
  138.     height: 2000px;
  139. }
  141. /*设置最新更新垂直排列*/
  142. main > .renew > {
  143.     display: flex;
  144.     /*h3\section垂直*/
  145.     flex-direction: column;
  146. }
  147. main > .renew > section > {
  148.     display: flex;
  149.     /div垂直*/
  150.     flex-direction: column;
  151. }
  152. main > .renew > section > div {
  153.     display: flex;
  154.     /*div内图片和span水平*/
  155.     flex-direction: row;
  156.     margin: 40px 0;
  157. }
  158. main > .renew > section > div > span {
  159.     display: flex;
  160.     /*span内a\span垂直*/
  161.     flex-direction: column;
  162.     margin-top: 5px;
  163.     margin-left: 5px;
  164. }
  165. main > .renew > section > div > span >span {
  166.     margin-top: 5px;
  167.     font-size: 14px;
  168. }
  169. main > .renew > section > div > span >span > i {
  170.     font-size: 14px;
  171. }
  172. main > .renew > section > div > span i {
  173.     font-style: normal;
  174.     background-color: #333333;
  175.     color: white;
  176.     border-radius: 3px;
  177.     font-size: smaller;
  178. }
  179. main > .renew > section > div > span > span {
  180.     display: flex;
  181.     /*初级、播放次数水平*/
  182.     flex-direction: row;
  183.     justify-content: space-between;
  184. }
  185. main > .renew > section > div img {
  186.     width: 300px;
  187.     height: 80px;
  188. }
  190. /*最新文章*/
  191. main > .article {
  192.     display: flex;
  193.     flex-direction: column;
  194. }
  195. main > .article > section > div {
  196.     display: flex;
  197.     flex-direction: row;
  198.     justify-content: space-between;
  199.     margin: 5px 0;
  200.     background-color: white;
  201. }
  202. main > .article > section > div img {
  203.     width: 220px;
  204.     height: 70px;
  205. }
  206. main > .article > section > div > span {
  207.     display: flex;
  208.     flex-direction: column;
  209.     margin: 10px 0;
  210. }
  212. /*最新博文*/
  213. main > .blog {
  214.     display: flex;
  215.     flex-direction: column;
  216. }
  217. main > .blog > section {
  218.     display: flex;
  219.     flex-direction: row;
  220.     background-color: white;
  221.     margin: 5px 0;
  222.     height: 50px;
  223.     justify-content: space-between;
  224. }
  225. main > .blog > section > span {
  226.     margin-top: 15px;
  227. }
  228. main > .blog > section > i {
  229.     margin-top: 15px;
  230. }
  232. /*最新问答*/
  233. main > .quan {
  234.     display: flex;
  235.     flex-direction: column;
  236. }
  237. main > .quan > section {
  238.     display: flex;
  239.     flex-direction: row;
  240.     background-color: white;
  241.     margin: 5px 0;
  242.     height: 50px;
  243.     justify-content: space-between;
  244. }
  245. main > .quan > section > span {
  246.     margin-top: 15px;
  247. }
  248. main > .quan > section > i {
  249.     margin-top: 15px;
  250. }
  253. /*尾部*/
  254. footer {
  255.     position: fixed;
  256.     bottom: 0;
  258.     width: 100%;
  259.     height:60px;
  260.     /*background-color: #444444;*/
  261.     color: #ffffff;
  263.     min-width: 320px;
  264.     max-width: 768px;
  266.     /*转为flex*/
  267.     display: flex;
  268.     flex-direction: row;
  269.     justify-content: space-between;
  270.     align-items: center;
  271. }
  273. footer > a > img {
  274.     width: 20px;
  275.     height: 20px;
  276.     margin: 5px;
  277. }
  279. footer > a > span {
  280.     display: flex;
  281.     flex-direction: column;
  282.     color: red;
  284. }

效果图

总结：
第一次没有完全老师代码的作业，过程很艰难。结果不知道合格不合格。但是个人觉得进步很大，感常见蛮有成就感的。

不足之处：就是基础不牢固，需要慢慢补充。

提问老师：布局之外的其它样式，比如宽高，字体……是须要通过不断写代码积累的吗？还是通过什么工具测量的？

上一条：laravel控制器调用数据库，视图层ifelse等下一条：12月30日- Blade模板引擎与数据操作
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多