Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12月27日 学号：478291 基本布局解决方案
Blogger Information
Blog 24
fans 4
comment 0
visits 20113
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
12月27日 学号：478291 基本布局解决方案
Lin__
Original
694 people have browsed it

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样式的复用没有应用的好，导致代码混乱以及样式的偏差，之后会继续进行整理
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：先把基本架构和功能实现, 细节再慢慢调试
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post