search

博客列表 >flex新闻客户端

flex新闻客户端

▽空城旧梦
▽空城旧梦原创
2021年03月30日 13:39:09619浏览

随便写了个新闻主页很是粗糙

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <link rel="stylesheet" href="font_icon/iconfont.css" />
  8.     <link rel="stylesheet" href="css/index.css" />
  9.     <link rel="stylesheet" href="css/header.css" />
  10.     <title>Sina</title>
  11.   </head>
  12.   <body>
  13.     <!-- 头部 -->
  14.     <header>
  15.       <div class="title-top">
  16.         <div class="title-top-left">
  17.           <img src="imags/tubiao.png" alt="图标" />
  18.           <span>Sina</span>
  19.         </div>
  20.         <div class="choose"><a href="">标准版</a><a href="">智能版</a></div>
  21.         <div class="title-top-right">
  22.           <span class="iconfont icon-guanli"></span>
  23.           <span class="iconfont icon-wangluo"></span>
  24.           <span class="iconfont icon-anquanyinsi"></span>
  25.         </div>
  26.       </div>
  27.       <div class="title-body">
  28.         <ul class="nav">
  29.           <li><a href="">国际</a></li>
  30.           <li><a href="">国内</a></li>
  31.           <li><a href="">本地</a></li>
  32.           <li><a href="">抗疫</a></li>
  33.           <li><a href="">人文</a></li>
  34.           <li><a href="">历史</a></li>
  35.           <li><a href="">军事</a></li>
  36.           <li><a href="">手机</a></li>
  37.           <li><a href="">汽车</a></li>
  38.           <li><a href="">娱乐</a></li>
  39.           <li><a href="">儿童</a></li>
  40.           <li><a href="">八卦</a></li>
  41.           <li><a href="">飞机</a></li>
  42.           <li><a href="">坦克</a></li>
  43.           <li><a href="">健康</a></li>
  44.           <li><a href="">经济</a></li>
  45.           <li><a href="">政治</a></li>
  46.           <li><a href="">体育</a></li>
  47.         </ul>
  48.       </div>
  49.     </header>
  51.     <!-- 主题 -->
  52.     <main>
  53.       <div class="nav">
  54.         <ol>
  55.           <li>
  56.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  57.           </li>
  58.           <li>
  59.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  60.           </li>
  61.           <li>
  62.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  63.           </li>
  64.           <li>
  65.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  66.           </li>
  67.           <li>
  68.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  69.           </li>
  70.           <li>
  71.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  72.           </li>
  73.           <li>
  74.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  75.           </li>
  76.           <li>
  77.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  78.           </li>
  79.           <li>
  80.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  81.           </li>
  82.           <li>
  83.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  84.           </li>
  85.           <li>
  86.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  87.           </li>
  88.           <li>
  89.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  90.           </li>
  91.           <li>
  92.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  93.           </li>
  94.           <li>
  95.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  96.           </li>
  97.           <li>
  98.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  99.           </li>
  100.           <li>
  101.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  102.           </li>
  103.           <li>
  104.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  105.           </li>
  106.           <li>
  107.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  108.           </li>
  109.           <li>
  110.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  111.           </li>
  112.           <li>
  113.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  114.           </li>
  115.           <li>
  116.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  117.           </li>
  118.           <li>
  119.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  120.           </li>
  121.           <li>
  122.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  123.           </li>
  124.           <li>
  125.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  126.           </li>
  127.           <li>
  128.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  129.           </li>
  130.           <li>
  131.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  132.           </li>
  133.           <li>
  134.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  135.           </li>
  136.           <li>
  137.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  138.           </li>
  139.           <li>
  140.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  141.           </li>
  142.           <li>
  143.             <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
  144.           </li>
  145.         </ol>
  146.       </div>
  147.     </main>
  148.     <!-- 页脚 -->
  149.     <footer>
  150.       <div>
  151.         <div class="iconfont icon-fapiao"></div>
  152.         <span>首页</span>
  153.       </div>
  154.       <div>
  155.         <div class="iconfont icon-fuwuqi"></div>
  156.         <span>分类</span>
  157.       </div>
  158.       <div>
  159.         <div class="iconfont icon-wuliu"></div>
  160.         <span>购物</span>
  161.       </div>
  162.       <div>
  163.         <div class="iconfont icon-zhenshikexin"></div>
  164.         <span>购物车</span>
  165.       </div>
  166.       <div>
  167.         <div class="iconfont icon-cunchu"></div>
  168.         <span>确认</span>
  169.       </div>
  170.     </footer>
  171.   </body>
  172. </html>

CSS

  1. header {
  2.   z-index: 100;
  3. }
  5. header > .title-top {
  6.   display: flex;
  7.   flex-flow: row nowrap;
  8.   align-items: center;
  9.   height: 3rem;
  10. }
  12. header > .title-top > .title-top-left {
  13.   flex: 1;
  14.   display: flex;
  15.   align-items: center;
  16. }
  18. header > .title-top > .title-top-left > span {
  19.   font-size: 2rem;
  20.   font-weight: bold;
  21. }
  23. header > .title-top > .choose {
  24.   flex: 3;
  25.   text-align: center;
  26. }
  28. header > .title-top > .choose > a {
  29.   color: white;
  30.   font-size: 2rem;
  31. }
  33. header > .title-top > .title-top-right {
  34.   flex: 2;
  35.   display: flex;
  36.   justify-content: space-around;
  37. }
  39. header > .title-top > .title-top-right > .iconfont {
  40.   color: yellow;
  41.   font-size: 2.5rem;
  42.   text-align: center;
  43. }
  45. header > .title-body > .nav {
  46.   display: flex;
  47.   flex-flow: row wrap;
  48.   height: 5rem;
  49.   margin-top: 2rem;
  50.   align-items: center;
  51.   justify-content: space-between;
  52. }
  54. header > .title-body > .nav > li {
  55.   padding: 0.5rem;
  56. }
  58. a {
  59.   color: white;
  60. }
  62. main {
  63.   display: flex;
  64.   color: lightskyblue;
  65.   margin-left: 3rem;
  66.   justify-content: center;
  67.   font-size: 1.8rem;
  68. }
  70. main > .nav > ol > li {
  71.   list-style-type: lower-alpha;
  72. }
  74. footer {
  75.   display: flex;
  76.   justify-content: space-around;
  77.   align-items: center;
  78. }
  80. footer > div {
  81.   display: flex;
  82.   flex-flow: column nowrap;
  83.   align-items: center;
  84. }
  86. footer > div > .iconfont {
  87.   font-size: 2.5rem;
  88.   color: red;
  89. }
  91. footer > div > span {
  92.   font-size: 1rem;
  93. }
  95. footer > div:hover {
  96.   cursor: pointer;
  97. }

上一条：实现一个迷你的MVC小框架下一条：php facade与composer的使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议