search

博客列表 >12月27日 学号：478291 基本布局解决方案

12月27日 学号：478291 基本布局解决方案

Lin__
Lin__原创
2019年12月30日 03:48:35692浏览

PC端布局解决方案

  • 基本布局思路：上（页眉），即图中的header的位置；中（主体），即图中的main，而主体部分又分为侧栏（aside）和内容区（article），侧栏可以设置两个也可以设置一个；下（页脚），即图中的footer
  • 适用于个人博客、首页、官网、管理后台等PC端的页面，内容区最好设置最小宽度，防止因窗口无限缩小而导致内容区不断被挤压

移动端解决方案

  • 需要限制宽度以防止出现横向的滚动条，影响内容浏览
  • 一般最小宽度设置为360像素

移动端页面开发实例

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>移动端布局</title>
  5.     <link rel="stylesheet" type="text/css" href="css/homework.css">
  6.     <link rel="stylesheet" href="css/iconfont.css">
  7. </head>
  8. <body>
  9.     <!-- 头部 -->
  10.     <header>
  11.         <!-- 用户头像 -->
  12.         <img src="images/user.png">
  13.         <!-- 网站logo -->
  14.         <img src="images/logo.png">
  15.         <!-- 菜单按钮 -->
  16.         <img src="images/list.png">
  17.     </header>
  18.     <!-- 头部 end -->
  19.     <!-- 主体 -->
  20.     <main>
  21.         <!-- 轮播图 -->
  22.         <img src="images/5.jpg" alt="轮播图">
  23.         <!-- 导航条 -->
  24.         <div class="nav">
  25.             <!-- 导航条项 -->
  26.             <a class="nav-item" href="#">
  27.                 <img src="images/icon/html.png">
  28.                 <span>HTML/CSS</span>
  29.             </a>
  30.             <!-- 导航条项 end -->
  31.             <!-- 导航条项 -->
  32.             <a class="nav-item" href="#">
  33.                 <img src="images/icon/html.png">
  34.                 <span>HTML/CSS</span>
  35.             </a>
  36.             <!-- 导航条项 end -->
  37.             <!-- 导航条项 -->
  38.             <a class="nav-item" href="#">
  39.                 <img src="images/icon/html.png">
  40.                 <span>HTML/CSS</span>
  41.             </a>
  42.             <!-- 导航条项 end -->
  43.             <!-- 导航条项 -->
  44.             <a class="nav-item" href="#">
  45.                 <img src="images/icon/html.png">
  46.                 <span>HTML/CSS</span>
  47.             </a>
  48.             <!-- 导航条项 end -->
  49.             <!-- 导航条项 -->
  50.             <a class="nav-item" href="#">
  51.                 <img src="images/icon/html.png">
  52.                 <span>HTML/CSS</span>
  53.             </a>
  54.             <!-- 导航条项 end -->
  55.             <!-- 导航条项 -->
  56.             <a class="nav-item" href="#">
  57.                 <img src="images/icon/html.png">
  58.                 <span>HTML/CSS</span>
  59.             </a>
  60.             <!-- 导航条项 end -->
  61.             <!-- 导航条项 -->
  62.             <a class="nav-item" href="#">
  63.                 <img src="images/icon/html.png">
  64.                 <span>HTML/CSS</span>
  65.             </a>
  66.             <!-- 导航条项 end -->
  67.             <!-- 导航条项 -->
  68.             <a class="nav-item" href="#">
  69.                 <img src="images/icon/html.png">
  70.                 <span>HTML/CSS</span>
  71.             </a>
  72.             <!-- 导航条项 end -->
  73.         </div>
  74.         <!-- 导航条 end -->
  75.         <!-- 图文列表 -->
  76.         <div class="article">
  77.             <!-- 推荐课程 -->
  78.             <div class="recommend">
  79.                 <h3>推荐课程</h3>
  80.                 <!-- 图片列表 -->
  81.                 <div class="img-list">
  82.                     <img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg"><!-- 图片列表 图片-->
  83.                     <img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg"><!-- 图片列表 图片-->
  84.                 </div>
  85.                 <!-- 图片列表 end -->
  86.                 <!-- 图文列表 图片在左 -->
  87.                 <div class="article-list">
  88.                     <div class="article-item">
  89.                         <!-- 课程图片 -->
  90.                         <img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg">
  91.                         <div class="article-intro">
  92.                             <!-- 课程标题 -->
  93.                             <span>CI框架30分钟极速入门</span>
  94.                             <div>
  95.                                 <span>中级</span><!-- 级别 -->
  96.                                 <span>55713次播放</span><!-- 播放次数 -->
  97.                             </div>
  98.                             <span>&nbsp;</span>
  99.                         </div>
  100.                     </div>
  101.                 </div>
  102.                 <!-- 图文列表 图片在左 end -->
  103.             </div>
  104.             <!-- 推荐课程 end -->
  105.             <!-- 最新更新 -->
  106.             <div class="up">
  107.                 <h3>最新更新</h3>
  108.                 <!-- 图文列表 图片在左 -->
  109.                 <div class="article-list">
  110.                     <div class="article-item">
  111.                         <!-- 课程图片 -->
  112.                         <img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg">
  113.                         <div class="article-intro">
  114.                             <!-- 课程标题 -->
  115.                             <span>CI框架30分钟极速入门</span>
  116.                             <span class="desc">本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你...</span>
  117.                             <div>
  118.                                 <span>中级</span><!-- 级别 -->
  119.                                 <span>55713次播放</span><!-- 播放次数 -->
  120.                             </div>
  121.                         </div>
  122.                     </div>
  123.                 </div>
  124.                 <!-- 图文列表 图片在左 end -->
  125.             </div>
  126.             <!-- 最新更新 end -->
  127.             <!-- 最新文章 -->
  128.             <div class="new">
  129.                 <h3>最新文章</h3>
  130.                 <!-- 图文列表 图片在左 -->
  131.                 <div class="article-list">
  132.                     <div class="article-item">
  133.                         <div class="article-intro">
  134.                             <!-- 课程标题 -->
  135.                             <span>CI框架30分钟极速入门</span>
  136.                             <div>
  137.                                 <span>发布时间：2019.12.27</span><!-- 级别 -->
  138.                             </div>
  139.                             <span>&nbsp;</span>
  140.                         </div>
  142.                         <!-- 课程图片 -->
  143.                         <img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg">
  144.                     </div>
  145.                 </div>
  146.                 <!-- 图文列表 图片在左 end -->
  147.             </div>
  148.             <!-- 最新文章 end -->
  149.             <!--最新博文-->
  150.                 <div class="blog">
  151.                     <h3>最新博文</h3>
  152.                     <!--文章列表-->
  153.                     <div class="article-text-list">
  154.                         <!--文章列表项-->
  155.                         <div class="article-text-item">
  156.                             <span>flex容器的6个属性练习总结-PHP培训十期线上班</span>
  157.                             <span>2019-12-27</span>
  158.                         </div>
  159.                         <!--文章列表项 end-->
  160.                     </div>
  161.                     <div class="more">更多内容</div>
  162.                     <!--文章列表 end-->
  163.                 </div>
  164.             <!--最新博文 end-->
  165.         </div>
  166.         <!-- 图文列表 end -->
  167.     </main>
  168.     <!-- 主体 end -->
  169.     <!-- 尾部 -->
  170.     <footer>
  171.         <div class="icon-item">
  172.             <span><i class="iconfont icon-liebiao"></i></span>
  173.             <span>首页</span>
  174.         </div>
  175.         <div class="icon-item">
  176.             <span><i class="iconfont icon-jia_sekuai"></i></span>
  177.             <span>视频</span>
  178.         </div>
  179.         <div class="icon-item">
  180.             <span><i class="iconfont icon-jia_sekuai"></i></span>
  181.             <span>社区</span>
  182.         </div>
  183.         <div class="icon-item">
  184.             <span><i class="iconfont icon-jia_sekuai"></i></span>
  185.             <span>我的</span>
  186.         </div>
  187.     </footer>
  188.     <!-- 尾部 end -->
  189. </body>
  190. </html>
  1. /*公共样式*/
  2. *{
  3.     margin:0;
  4.     padding:0;
  5. }
  6. a{
  7.     text-decoration: none;
  8.     color: black;
  9. }
  10. body{
  11.     min-width:360px;
  12.     max-width: 720px;
  13.     height:100vh;
  14.     background-color:#edeff0;
  15. }
  16. h3{
  17.     margin: 10px 0;
  18.     color: #888;
  19. }
  20. /*头部*/
  21. header{
  22.     display: flex;
  23.     flex-direction: row;
  24.     justify-content: space-between;
  25.     background-color: #000;
  26.     height: 7vh;
  27. }
  28. /*用户头像*/
  29. header > img:first-of-type{
  30.     border-radius: 50px;
  31.     border:1px solid #ccc;
  32.     width: 26px;
  33.     height: 26px;
  34.     margin: 5px;
  35. }
  36. /*网站logo*/
  37. header > img:nth-of-type(2){
  38.     height: 7vh;
  39. }
  40. /*菜单按钮*/
  41. header > img:last-child{
  42.     height: 6vh;
  43. }
  44. /*头部 end*/
  45. /*主体*/
  46. main{
  47.     overflow: auto;
  48.     height:83vh;
  49.     overflow-x: hidden;
  50. }
  51. /*轮播图*/
  52. main > img:first-of-type{
  53.     min-width: 360px;
  54.     max-width: 720px;
  55. }
  56. /*导航条*/
  57. main > .nav{
  58.     display: flex;
  59.     flex-flow: row wrap;
  60.     background-color: #fff;
  61. }
  62. /*导航条项*/
  63. main > .nav > .nav-item{
  64.     display: flex;
  65.     flex-flow: column wrap;
  66.     align-items: center;
  67.     width: 25%;
  68.     margin: 10px 0;
  69.     font-size: 13px;
  70. }
  71. /*导航条项图片*/
  72. main > .nav > .nav-item > img{
  73.     width: 50px;
  74.     height: 50px;
  75. }
  76. /*导航条项 end*/
  77. /*导航条 end*/
  78. /*图文列表*/
  79. main > .article{
  80.     display: flex;
  81.     flex-direction: column;
  82.     margin: 10px 0;
  83.     padding: 0 10px;
  84. }
  85. /*图片列表*/
  86. .img-list{
  87.     display: flex;
  88.     flex-flow: row nowrap;
  89.     justify-content: space-between;
  90.     margin: 10px 0;
  91. }
  92. /*图片列表 图片*/
  93. .img-list > img{
  94.     width: 49%;
  95.     height: 25vh;
  96. }
  97. /*图片列表 end*/
  98. /*图文列表*/
  99. .article-list{
  100.     display: flex;
  101.     flex-flow: column wrap;
  102. }
  103. /*图文列表项*/
  104. .article-list > .article-item{
  105.     display: flex;
  106.     flex-flow: row nowrap;
  107.     background-color: #fff;
  108.     padding:10px;
  109. }
  110. /*图文列表项 图片*/
  111. .article-list > .article-item > img{
  112.     width: 39%;
  113.     height: 20vh;
  114. }
  115. /*图文列表项 右侧文字*/
  116. .article-list > .article-item > .article-intro{
  117.     display: flex;
  118.     flex-direction: column;
  119.     justify-content: space-between;
  120.     margin-left: 15px;
  121.     color: #888;
  122.     flex-grow:1;
  123.     padding-right: 30px;
  124. }
  125. /*图文列表项 右侧文字 第二行*/
  126. .article-list > .article-item > .article-intro > div{
  127.     font-size: 13px;
  128.     display: flex;
  129.     flex-direction: row;
  130.     justify-content: space-between;
  131. }
  132. /*图文列表项 右侧文字 播放数量*/
  133. .recommend > .article-list > .article-item > .article-intro > div > span:first-of-type,.up > .article-list > .article-item > .article-intro > div > span:first-of-type{
  134.     background-color: #595757;
  135.     border-radius: 5px;
  136.     color: #fff;
  137.     padding: 3px;
  138. }
  139. /*简介*/
  140. .desc{
  141.     font-size: 13px;
  142. }
  143. /*图文列表项 end*/
  144. /*图文列表 end*/
  145. /*最新文章 图文列表*/
  146. .new > .article-list > .article-item{
  147.     box-shadow: 0 2px 5px #595757;
  148. }
  149. /*最新文章 图文列表 end*/
  150. /*文章列表*/
  151. .article-text-list{
  152.     display: flex;
  153.     flex-direction: column;
  154. }
  155. /*文章列表项*/
  156. .article-text-list > .article-text-item{
  157.     padding: 10px;
  158.     display: flex;
  159.     flex-direction: row;
  160.     justify-content: space-between;
  161.     box-shadow: 0 2px 5px #595757;
  162.     background-color: #fff;
  163.     color: #888;
  164.     font-size: 13px;
  165. }
  166. .article-text-list > .article-text-item > span{
  167.     font-weight: bold;
  168. }
  169. /*文章列表 end*/
  170. /*更多内容*/
  171. .more{
  172.     background-color: #fff;
  173.     color: #888;
  174.     font-size: 13px;
  175.     padding: 10px;
  176.     text-align: center;
  177. }
  178. /*图文列表 end*/
  179. /*主体 end*/
  180. /*尾部*/
  181. footer{
  182.     height: 10vh;
  183.     border-top:1px solid #888888;
  184.     display: flex;
  185.     flex-flow: row nowrap;
  186. }
  187. footer > .icon-item{
  188.     display: flex;
  189.     flex-flow: column wrap;
  190.     align-items: center;
  191.     width: 25%;
  192.     margin: 10px 0;
  193.     font-size: 13px;
  194. }
  195. footer > .icon-item:hover{
  196.     color: red;
  197.     cursor: pointer;
  198. }
  199. /*尾部 end*/

运行效果如下：


作业问题总结：

  • 对于flex布局的属性还不够熟悉，需要一边编写一边回看笔记，之后会多加练习
  • 实现效果没有完全一致
  • 对于时间安排不足，导致没有完成的很细致
  • 对于CSS样式的复用没有应用的好，导致代码混乱以及样式的偏差，之后会继续进行整理
上一条：二手商品列表与评论回复页面制作下一条：12月23日作业 flex容器的六个属性与功能 -php线上培训班十期
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多