Community Learn Tools Library Leisure
search
English
Home > List of blog posts > php中文网移动端首页(样式和HTML高亮版 Flex版12月27)
Blogger Information
Blog 7
fans 0
comment 0
visits 5120
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
php中文网移动端首页(样式和HTML高亮版 Flex版12月27)
孤心泪的博客
Original
831 people have browsed it

html代码和css代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7.     <title>移动端flex首页</title>
  8.     <link rel="stylesheet" href="../../font/iconfont.css">
  9.     <link rel="stylesheet" href="1227.css">
  10. </head>
  11. <body>
  12. <!--布局原则：宽度自适应，高度固定-->
  13. <!--顶部-->
  14. <header>
  15.     <img src="https://img.php.cn/upload/avatar/000/000/001/f917a88f277796c0db13782f48336be9.jpg" alt="" class="user">
  16.     <img src="../../image/logo.png" alt="" class="logo">
  17.     <a href="">
  18.         <i class="iconfont icon-liebiao"></i>
  19.     </a>
  20. </header>
  21. <main>
  22.     <!--轮播-->
  23.     <section class="banner">
  24.         <img src="https://m.php.cn/static/images/ico/6.png" alt="">
  25.     </section>
  26.     <!--导航-->
  27.     <nav>
  28.         <a href="">
  29.             <img src="https://m.php.cn/static/images/ico/html.png" alt="">
  30.             <span>html/css</span>
  31.         </a>
  32.         <a href="">
  33.             <img src="https://m.php.cn/static/images/ico/html.png" alt="">
  34.             <span>html/css</span>
  35.         </a>
  36.         <a href="">
  37.             <img src="https://m.php.cn/static/images/ico/html.png" alt="">
  38.             <span>html/css</span>
  39.         </a>
  40.         <a href="">
  41.             <img src="https://m.php.cn/static/images/ico/html.png" alt="">
  42.             <span>html/css</span>
  43.         </a>
  44.         <a href="">
  45.             <img src="https://m.php.cn/static/images/ico/html.png" alt="">
  46.             <span>html/css</span>
  47.         </a>
  48.         <a href="">
  49.             <img src="https://m.php.cn/static/images/ico/html.png" alt="">
  50.             <span>html/css</span>
  51.         </a>
  52.         <a href="">
  53.             <img src="https://m.php.cn/static/images/ico/html.png" alt="">
  54.             <span>html/css</span>
  55.         </a>
  56.         <a href="">
  57.             <img src="https://m.php.cn/static/images/ico/html.png" alt="">
  58.             <span>html/css</span>
  59.         </a>
  60.     </nav>
  61.     <section class="course">
  62.         <h3>推荐课程</h3>
  63.         <div class="course-top">
  64.             <a class="course-item">
  65.                 <img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg" alt="">
  66.             </a>
  67.             <a class="course-item">
  68.                 <img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg" alt="">
  69.             </a>
  70.         </div>
  71.         <div class="course-bottom">
  72.             <a>
  73.                 <img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt="">
  74.                 <div class="course-bottom-right">
  75.                     <h2>标题</h2>
  76.                     <div>
  77.                         <span class="level">中级</span>
  78.                         <span>454678次播放</span>
  79.                     </div>
  80.                 </div>
  81.             </a>
  82.             <a>
  83.                 <img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt="">
  84.                 <div class="course-bottom-right">
  85.                     <h2>标题</h2>
  86.                     <div>
  87.                         <span class="level">中级</span>
  88.                         <span>454678次播放</span>
  89.                     </div>
  90.                 </div>
  91.             </a>
  92.         </div>
  93.     </section>
  94.     <section class="recent">
  95.         <h3>最新更新</h3>
  96.         <div class="recent-list">
  97.             <a>
  98.                 <img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt="">
  99.                 <div>
  100.                     <h2>标题</h2>
  101.                     <p>简述</p>
  102.                     <div>
  103.                         <span class="level">中级</span>
  104.                         <span>454678次播放</span>
  105.                     </div>
  106.                 </div>
  107.             </a>
  108.             <a>
  109.                 <img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt="">
  110.                 <div>
  111.                     <h2>标题</h2>
  112.                     <p>简述</p>
  113.                     <div>
  114.                         <span class="level">中级</span>
  115.                         <span>454678次播放</span>
  116.                     </div>
  117.                 </div>
  118.             </a>
  119.             <a>
  120.                 <img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt="">
  121.                 <div>
  122.                     <h2>标题</h2>
  123.                     <p>简述</p>
  124.                     <div>
  125.                         <span class="level">中级</span>
  126.                         <span>454678次播放</span>
  127.                     </div>
  128.                 </div>
  129.             </a>
  130.         </div>
  131.     </section>
  132.     <section class="articles">
  133.         <h3>最新文章</h3>
  134.         <div class="articles-list">
  135.             <a>
  136.                 <div>
  137.                     <h2>标题</h2>
  138.                     <span>发布时间：2019-12-30</span>
  139.                 </div>
  140.                 <img src="https://img.php.cn/upload/article/000/000/041/5e0720ee3461b750.jpg" alt="">
  141.             </a>
  142.             <a>
  143.                 <div>
  144.                     <h2>标题</h2>
  145.                     <span>发布时间：2019-12-30</span>
  146.                 </div>
  147.                 <img src="https://img.php.cn/upload/article/000/000/041/5e0720ee3461b750.jpg" alt="">
  148.             </a>
  149.             <a>
  150.                 <div>
  151.                     <h2>标题</h2>
  152.                     <span>发布时间：2019-12-30</span>
  153.                 </div>
  154.                 <img src="https://img.php.cn/upload/article/000/000/041/5e0720ee3461b750.jpg" alt="">
  155.             </a>
  156.             <a>
  157.                 <div>
  158.                     <h2>标题</h2>
  159.                     <span>发布时间：2019-12-30</span>
  160.                 </div>
  161.                 <img src="https://img.php.cn/upload/article/000/000/041/5e0720ee3461b750.jpg" alt="">
  162.             </a>
  163.             <a href="" class="more">更多内容</a>
  164.         </div>
  165.     </section>
  166.     <section class="blogs">
  167.         <h3>最新博文</h3>
  168.         <div class="blogs-list">
  169.             <a href="">
  170.                 <h2>composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器 - 20191227</h2>
  171.                 <span>2019-12-30</span>
  172.             </a>
  173.             <a href="">
  174.                 <h2>composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器 - 20191227</h2>
  175.                 <span>2019-12-30</span>
  176.             </a>
  177.             <a href="">
  178.                 <h2>composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器 - 20191227</h2>
  179.                 <span>2019-12-30</span>
  180.             </a>
  181.             <a href="">
  182.                 <h2>composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器 - 20191227</h2>
  183.                 <span>2019-12-30</span>
  184.             </a>
  186.             <a href="" class="more">更多内容</a>
  188.         </div>
  189.     </section>
  190.     <section class="blogs">
  191.         <h3>最新问答</h3>
  192.         <div class="blogs-list">
  193.             <a href="">
  194.                 <h2>composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器 - 20191227</h2>
  195.                 <span>2019-12-30</span>
  196.             </a>
  197.             <a href="">
  198.                 <h2>composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器 - 20191227</h2>
  199.                 <span>2019-12-30</span>
  200.             </a>
  201.             <a href="">
  202.                 <h2>composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器 - 20191227</h2>
  203.                 <span>2019-12-30</span>
  204.             </a>
  205.             <a href="">
  206.                 <h2>composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器 - 20191227</h2>
  207.                 <span>2019-12-30</span>
  208.             </a>
  209.             <a href="" class="more">更多内容</a>
  210.         </div>
  211.     </section>
  212. </main>
  213. <footer>
  214.     <a href="" class="active">
  215.         <span><i class="iconfont icon-daohangshouye"></i></span>
  216.         <span>首页</span>
  217.     </a>
  218.     <a href="">
  219.         <span><i class="iconfont icon-daohangshouye"></i></span>
  220.         <span>视频</span>
  221.     </a>
  222.     <a href="">
  223.         <span><i class="iconfont icon-daohangshouye"></i></span>
  224.         <span>社区</span>
  225.     </a>
  226.     <a href="">
  227.         <span><i class="iconfont icon-huiyuan1"></i></span>
  228.         <span>我的</span>
  229.     </a>
  230. </footer>
  231. </body>
  232. </html>

css代码
/初始化样式/

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. a {
  6.     text-decoration: none;
  7.     color: #333;
  8. }
  9. body {
  10.     display: flex;
  11.     flex-direction: column;
  12.     min-width: 360px;
  13.     max-width: 768px;
  14.     height: 100vh;
  15.     width: 100vw;
  16.     box-sizing: border-box;
  17.     background-color: #edeff0;
  18. }
  19. h3 {
  20.     padding-bottom: 10px;
  21.     font-size: 18px;
  22.     font-weight: bold;
  23. }
  24. /*头部和顶部*/
  25. body>header ,body > footer {
  26.     display: flex;
  27.     height: 8vh;
  28.     width: 100vw;
  29.     background-color: darkgray;
  30. }
  31. body > footer{
  32.     border-top: 1px solid #cccccc;
  33. }
  34. body>header {
  35.     justify-content: space-between;
  36.     align-items: center;
  37.     box-shadow: 0 0 10px 1px rgba(7, 17, 27, .1);
  38.     background-color: #2d353c;
  39. }
  40. body>header>.user {
  41.     width: 23px;
  42.     height: 23px;
  43.     border-radius: 50%;
  44.     border: 1px solid #8f9498;
  45.     margin-left: 5px;
  46. }
  47. body>header>a>i.iconfont{
  48.     font-size: 24px;
  49.     color: #fff;
  50.     font-weight: bold;
  51.     padding-right: 15px;
  53. }
  54. body>header>.logo{
  55.     width: 94px;
  56.     height: 42px;
  57.     display: block;
  58. }
  59. body > footer >a {
  60.     background: #eee;
  61.     width: 25%;
  62.     display: flex;
  63.     flex-direction: column;
  64.     align-items: center;
  65.     box-sizing: border-box;
  66.     padding: 5px 0;
  67.     color: #888;
  68. }
  69. body > footer >a.active{
  70.     color: red;
  71. }
  72. /*主体*/
  73. body > main {
  74.     flex: 1;
  75.     overflow-x: hidden;
  76.     overflow-y: auto;
  77.     display: flex;
  78.     flex-direction: column;
  79.     /*background-color: #44aaee;*/
  80. }
  81. /*轮播*/
  82. body>main>section.banner {
  83.     width: 100vw;
  84.     height: 22vh;
  85. }
  86. body>main>section.banner>img {
  87.     width: 100%;
  88.     height: 100%;
  89. }
  90. /*导航*/
  91. body>main>nav{
  92.     background-color: #fff;
  93.     width: 100vw;
  94.     height: 25vh;
  95.     display: flex;
  96.     flex-flow: row wrap;
  97.     justify-content: space-between;
  98.     align-content: space-between;
  99. }
  100. body>main>nav>a{
  101.     width: 25vw;
  102.     height: 12.5vh;
  103.     display: flex;
  104.     flex-direction: column;
  105.     justify-content: center;
  106.     align-items: center;
  107.     /*flex-basis: 25%;*/
  108. }
  109. body>main>nav>a>img {
  110.     width: 45px;
  111.     height: 45px;
  112.     margin-bottom: 1vh;
  113.     display: block;
  114. }
  115. /*推荐课程*/
  116. body>main>.course {
  117.     margin-top: 5vh;
  118.     padding: 2.7vw 2.7vw 2.7vw;
  119. }
  120. .course-top {
  121.     width: 100%;
  122.     display: flex;
  123.     justify-content: space-between;
  124.     margin-bottom: 2vh;
  125. }
  126. .course-top>a{
  127.     width: 49%;
  128.     height: 13vh;
  129. }
  130. .course-top>a>img{
  131.     width: 100%;
  132.     height: 100%;
  133. }
  134. .course-bottom{
  135.     display: flex;
  136.     flex-direction: column;
  137. }
  138. .course-bottom>a{
  139.     display: flex;
  140.     background-color: #fff;
  141.     width: 100%;
  142.     padding: 9px 0  9px 10px ;
  143.     margin-bottom: 20px;
  144. }
  145. .course-bottom>a>img{
  146.     height: 80px;
  147.     margin-right: 2.5vw;
  148. }
  149. .course-bottom-right>h2{
  150.     overflow: hidden;
  151.     white-space: nowrap;
  152.     text-overflow: ellipsis;
  153.     margin-bottom: 10px;
  154.     font-size: 20px;
  155.     color: #888;
  156. }
  157. .course-bottom-right>div{
  158.     display: flex;
  159.     align-items: center;
  160.     width: 100%;
  161. }
  162. .level {
  163.     background: #595757;
  164.     border-radius: 8px;
  165.     color: #fff;
  166.     font-size: 10px;
  167.     padding: 3px;
  168.     line-height: 20px;
  169.     margin-right: 5px;
  170. }
  171. /*最新更新*/
  172. body>main>.recent {
  173.     padding: 2.7vw 2.7vw 2.7vw;
  174. }
  175. .recent-list>a{
  176.     display: flex;
  177.     background-color: #fff;
  178.     width: 100%;
  179.     padding: 9px 0  9px 10px ;
  180.     margin-bottom: 20px;
  181. }
  182. .recent-list>a>div>h2{
  183.     overflow: hidden;
  184.     white-space: nowrap;
  185.     text-overflow: ellipsis;
  186.     font-size: 20px;
  187.     color: #888;
  188. }
  189. .recent-list>a>img{
  190.     height: 80px;
  191.     margin-right: 2.5vw;
  192. }
  193. .recent-list>a>div>p{
  194.     margin-top: 11px;
  195.     font-size: 11px;
  196. }
  197. .recent-list>a>div>div{
  198.     margin-top: 11px;
  199. }
  200. /*最新文章*/
  201. body>main>.articles {
  202.     padding: 2.7vw 2.7vw 2.7vw;
  203. }
  204. .articles-list>a{
  205.     display: flex;
  206.     background-color: #fff;
  207.     border-bottom: 1px solid #eee;
  208.     padding: 10px 10px 8px 10px;
  209.     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
  210.     justify-content: space-between;
  211.     margin-bottom: 10px;
  212. }
  213. .articles-list>a>img{
  214.     height: 65px;
  215.     width: 30%;
  216. }
  217. .articles-list>a>div>h2{
  218.     font-size: 14px;
  219.     margin-bottom: 10px;
  220. }
  221. .articles-list>a>div>span{
  222.     font-size: 12px;
  223.     color: #888;
  224. }
  225. .articles-list>a.more {
  226.     justify-content: center;
  227.     margin: 0 auto;
  228.     line-height: 10px;
  229.     background: #fff;
  230.     padding: 10px 0;
  231.     color: #888;
  232. }
  233. /*最新博文*/
  234. .blogs{
  235.     padding: 2.7vw 2.7vw 2.7vw;
  236. }
  237. .blogs-list>a{
  238.     display: flex;
  239.     align-items: center;
  240.     justify-content: space-between;
  241.     border-bottom: 1px solid #eee;
  242.     padding:10px 10px 8px 10px;
  243.     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
  244.     background: #fff;
  245.     color: #888888;
  246.     margin-bottom: 10px;
  247. }
  248. .blogs-list>a>h2{
  249.     font-size: 14px;
  250.     font-weight: bold;
  251.     white-space: nowrap;
  252.     overflow: hidden;
  253.     text-overflow: ellipsis;
  254.     margin-bottom: 10px;
  255.     width: 68%;
  256. }
  257. .blogs-list>a>span{
  258.     font-size: 12px;
  259. }
  260. .blogs-list>a.more {
  261.     width: 100%;
  262.     justify-content: center;
  263.     margin: 0 auto;
  264.     line-height: 10px;
  265.     background: #fff;
  266.     padding: 10px 0;
  267.     color: #888;
  268. }

效果图

总结
1.css代码有很多重复，没有抽离出来做公共样式
2.布局时简单构思了大致的几个区块，没有细致划分(细致的划分区域可以分离出公共的组件和样式)

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