简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >php中文网移动端首页(样式和HTML高亮版 Flex版12月27)

php中文网移动端首页(样式和HTML高亮版 Flex版12月27)

孤心泪的博客
孤心泪的博客原创
2019年12月30日 17:02:20821浏览

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.布局时简单构思了大致的几个区块，没有细致划分(细致的划分区域可以分离出公共的组件和样式)

上一条：PHP Class self 与 static 异同与使用详解下一条：grid容器网站
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多