亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 12
粉絲 0
評論 0
訪問量 8060
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
仿今日頭條首頁
漢邦
原創(chuàng)
500人瀏覽過

首頁整體分為三個部分：頁面，主體，頁腳.

頁眉代碼：

  1. 分別引用外部CSS文件：

    1. <link rel="stylesheet" href="static/css/reset.css">
    2.  <link rel="stylesheet" href="static/css/header.css">
    3.  <link rel="stylesheet" href="static/css/footer.css">
    4.  <link rel="stylesheet" href="static/css/main.css">
    5.  <link rel="stylesheet" href="static/font_icon/iconfont.css">

    其中 reset.css 初始化代碼如下：

    1. .footer {
    2.  /* 絕對定位 */
    3.  position: fixed;
    4.  left: 0;
    5.  right: 0;
    6.  bottom: 0;
    7.  background-color: #efefef;
    8.  display: flex;
    9.  /* 分散對齊 */
    10.  place-content: space-around;
    11.  z-index: 999;
    12. }
    13. .footer a {
    14.  /* 垂直排列，居中對齊 */
    15.  display: grid;
    16.  place-items: center;
    17.  font-size: x-small;
    18. }
    19. /* 圖標放大 */
    20. .footer a .iconfont {
    21.  font-size: x-large;
    22. }
    23. /* 激活樣式 */
    24. .footer a.active {
    25.  color: red;
    26. }

  2. 頁眉代碼：

    1. <!-- 頁眉   -->
    2. <div class="header">
    3.  <!-- 1.搜索框 -->
    4.  <div class="search">
    5.  <!-- 1.1關(guān)鍵字輸入框 left -->
    6.  <div class="keys">
    7.      <!-- 放大鏡：字體圖標    -->
    8.      <span class="iconfont icon-fangdajing"></span>
    9.      <!-- 關(guān)鍵字-預(yù)置的 -->  
    10.      <span>“天網(wǎng)2023”行動啟動</span>
    11.  </div>
    13.  <!-- 1.2 發(fā)布按鈕，right     -->
    14.  <div class="publish">
    15.      <!-- 字體圖標 -->
    16.      <span class="iconfont icon-jiahao"></span>
    17.      <span>發(fā)布</span>   
    18.  </div>
    19.  </div>
    20.  <!-- 2.導(dǎo)航組 -->
    21.  <div class="navs">
    22.    <a href="">關(guān)注</a>
    23.    <a href="" class="active">推薦</a>
    24.      <!-- 高亮 -->
    25.      <a href="">熱榜</a>
    26.      <a href="">發(fā)現(xiàn)</a>
    27.      <a href="">視頻</a> 
    28.      <a href="">防疫</a>
    29.      <div class="key">
    30.      <span class="iconfont icon-zhuanfa"></span>
    31.      </div>
    32.  </div>
    33. </div>

css代碼：

  1. .header {
  2.     /* 固定定位： */
  3.     position: fixed;
  4.     left: 0;
  5.     top: 0;
  6.     right: 0;
  7.     /* 給導(dǎo)航欄設(shè)置下劃線 */
  8.     border-bottom: 1px solid #ccc;
  9.     /* 設(shè)置層級，確保永遠在最前面，不會被覆蓋 */
  10.     z-index: 999;
  11.     background-color: #fff;
  12. }
  14. /* 搜索欄 */
  15. .header .search {
  16.     background-color: red;
  17.     /* 布局格式 */
  18.     display: grid;
  19.     grid-template-columns: 1fr 0.5rem;
  20.     /* 內(nèi)邊距 */
  21.     padding: 0.1rem 0.13rem;
  22. }
  24. /* 搜索框 */
  25. .header .search .keys {
  26.     background-color: #fff;
  27.     border-radius: 1.5rem;
  28.     display: flex;
  29.     place-items: center;
  30.     padding-left: 0.15rem;
  31. }
  33. /* 發(fā)布按鈕 */
  34. .header .search .publish {
  35.     color: #fff;
  36.     display: grid;
  37.     place-items: center;
  38.     font-size: large;
  39. }
  40. /* 字體圖標加號放大 */
  41. .header .search .publish .icon-jiahao {
  42.     font-size: x-large;
  43. }
  44. /* 列表 */
  45. .header .navs {
  46.     /* 彈性布局 */
  47.     display: flex;
  48.     /* 分散對齊 */
  49.     place-content: space-around;
  50.     /* 給導(dǎo)航欄下劃線加間距 下邊0.05rem*/
  51.     padding: 0.1rem 0 0.05rem;
  52. }
  54. .header .navs .key .icon_zhuanfa {
  55.     display: flex;
  56.     position: fixed;
  57.     font-size: xx-large;
  58.     right: 0;
  59.     width: 0.35rem;
  60.     height: 0.25rem;
  61.     place-content: center;
  62.     color: #ccc;
  63. }
  65. /* 激活狀態(tài) */
  66. .header .navs a.active {
  67.     color: red;
  68. }
  70. /* 添加激活狀態(tài)下的下劃線，利用偽元素 */
  71. /* 偽元素前面使用雙冒號：::before/::after */
  72. .header .navs a.active::after {
  73.     content:'';
  74.     /* 絕對定位 */
  75.     position: absolute;
  76.     left: 0;
  77.     width: 0.3rem;
  78.     height: 0.03rem;
  79.     background-color: red;
  80.     bottom: -0.03rem;
  81. }
  83. /* 宿主元素a作為絕對定位的父級 */
  84. .header .navs a {
  85.     position: relative;
  86. }

3.主體代碼：

  1. <div class="main">
  2.     <!-- 1.文本+標簽 -->
  3.     <div class="rec-list">
  4.       <a href="" class="item">
  5.         <span class="title">中俄元首克里姆林宮會談側(cè)記</span>
  6.         <div class="desc">
  7.           <span class="tag">置頂</span>
  8.           <div class="other">
  9.             <span>新華網(wǎng)</span>
  10.             <span>1萬評論</span>
  11.           </div>
  12.         </div>
  13.       </a>
  14.       <a href="" class="item">
  15.         <span class="title">在推動構(gòu)建人類命運共同體的大道上前進</span>
  16.         <div class="desc">
  17.           <span class="tag">置頂</span>
  18.           <div class="other">
  19.             <span>人民日報</span>
  20.             <span>1347評論</span>
  21.           </div>
  22.         </div>
  23.       </a>
  24.       <a href="" class="item">
  25.         <span class="title">春天里的中國色，美到驚艷！</span>
  26.         <div class="desc">
  27.           <span class="tag">置頂</span>
  28.           <div class="other">
  29.             <span>人民日報</span>
  30.             <span>1644評論</span>
  31.           </div>
  32.         </div>
  33.       </a>
  34.       <a href="" class="item">
  35.         <span class="title">"美國人要我們跳，咱不僅問'跳多高',還來個后空翻！"</span>
  36.         <div class="desc">  
  37.           <div class="other">
  38.             <span>環(huán)球網(wǎng)</span>
  39.             <span>166評論</span>
  40.           </div>
  41.         </div>
  42.       </a>
  43.       <a href="" class="item">
  44.         <span class="title">健康中國|甲流感染期食養(yǎng)建議</span>
  45.         <div class="desc">  
  46.           <div class="other">
  47.             <span>頭條專題</span>
  48.           </div>
  49.         </div>
  50.       </a>
  51.     </div>
  52.     <!-- 2.左邊文本+右邊圖片 -->
  53.     <div class="img1-list">
  54.       <a href="" class="item">
  55.       <!-- 標題文本 -->
  56.         <div class="left">
  57.           <div class="title">還派什么大使，美國晾了我們14個月，是時候反擊了</div>
  58.           <div class="desc">
  59.             <span class="author">默默讀書君</span>
  60.             <span class="replay-num">88條評論</span>
  61.             <span class="time">10小時前</span>
  62.           </div>
  63.         </div>
  64.       <!-- 圖片 -->
  65.         <img src="static/images/1.jpeg" class="right"></img>
  66.       </a> 
  67.       <a href="" class="item">
  68.         <!-- 標題文本 -->
  69.           <div class="left">
  70.             <div class="title">還派什么大使，美國晾了我們14個月，是時候反擊了</div>
  71.             <div class="desc">
  72.               <span class="author">默默讀書君</span>
  73.               <span class="replay-num">88條評論</span>
  74.               <span class="time">10小時前</span>
  75.             </div>
  76.           </div>
  77.         <!-- 圖片 -->
  78.           <img src="static/images/1.jpeg" class="right"></img>
  79.         </a> 
  80.         <a href="" class="item">
  81.           <!-- 標題文本 -->
  82.             <div class="left">
  83.               <div class="title">還派什么大使，美國晾了我們14個月，是時候反擊了</div>
  84.               <div class="desc">
  85.                 <span class="author">默默讀書君</span>
  86.                 <span class="replay-num">88條評論</span>
  87.                 <span class="time">10小時前</span>
  88.               </div>
  89.             </div>
  90.           <!-- 圖片 -->
  91.             <img src="static/images/1.jpeg" class="right"></img>
  92.           </a>       
  93.     </div>
  95.     <!-- 3.上面文本+三張圖片 -->
  96.     <div class="img2-list">
  97.       <a href="" class="item">
  98.         <div class="title">2001年金吉奇用承諾誘捕米洛舍維奇，將其私自引渡海牙，下場如何？</div>
  99.         <div class="imgs">
  100.           <img src="static/images/2.jpeg" alt="">
  101.           <img src="static/images/2.jpeg" alt="">
  102.           <img src="static/images/2.jpeg" alt="">
  103.         </div>
  104.       </a>
  105.     </div>
  106.   </div>

CSS代碼：

  1. .main {
  2.     min-height: 2000px;
  3.     /* border: 1px solid rgb(229, 43, 43); */
  4.     /* 相對定位 */
  5.     position: relative;
  6.     top: 1rem;
  7.     padding-bottom: 0.6rem;
  8. }
  9. /* 下劃線 */
  10. .main .rec-list {
  11.     border-bottom: 0.6px solid #ccc;
  12.     padding: 0 0 0.05rem;
  13. }
  14. .main .rec-list .item {
  15.     /* 行內(nèi)元素轉(zhuǎn)塊級元素 */
  16.     display: block;
  17.     margin-top: 0.1rem;
  18. }
  19. .main .rec-list .item .desc {
  20.     display: flex;
  21.     font-size: xx-small;
  22.     gap: 0.1rem;
  23. }
  24. .main .rec-list .item .desc .tag {
  25.     color: red;
  26. }
  27. .main .rec-list .item .desc .other {
  28.     color: #ccc;
  29. }
  30. /* 文本+圖片  */
  31. .main .img1-list .item {
  32.     display: grid;
  33.     grid-template-columns: 1fr 1.3rem;
  34.     gap: 0.2rem;
  35.     margin-top: 0.1rem;
  36. }
  37. .main .img1-list .item .left {
  38.     display: grid;
  39.     place-content: space-between;
  40. }
  41. .main .img1-list .item .left .desc {
  42.     color: #ccc;
  43.     font-size: xx-small;
  45. }
  46. /* 上面文本+三張圖片 */
  47. .main .img2-list .item .imgs {
  48.     display: grid;
  49.     grid-template-columns: repeat(3,1fr);
  50.     gap:0.05rem;
  51. }

4.頁腳

  1. <div class="footer">
  2.     <a href="" class="active">
  3.       <span class="iconfont icon-shouye"></span>
  4.       <span>首頁</span>
  5.     </a>
  6.     <a href="">  
  7.       <span class="iconfont icon-24gl-play"></span>
  8.       <span>視頻</span>
  9.     </a>
  10.     <a href=""> 
  11.     <span class="iconfont icon-shoucang"></span>
  12.       <span>商城</span>
  13.     </a>
  14.     <a href="">
  15.       <span class="iconfont icon-yonghu"></span>
  16.       <span>我的</span>
  17.     </a>
  18.   </div>

CSS代碼：

  1. .footer {
  2.     /* 絕對定位 */
  3.     position: fixed;
  4.     left: 0;
  5.     right: 0;
  6.     bottom: 0;
  7.     background-color: #efefef;
  8.     display: flex;
  9.     /* 分散對齊 */
  10.     place-content: space-around;
  11.     z-index: 999;
  12. }
  13. .footer a {
  14.     /* 垂直排列，居中對齊 */
  15.     display: grid;
  16.     place-items: center;
  17.     font-size: x-small;
  18. }
  19. /* 圖標放大 */
  20. .footer a .iconfont {
  21.     font-size: x-large;
  22. }
  23. /* 激活樣式 */
  24. .footer a.active {
  25.     color: red;
  26. }

最終效果圖：

批改老師：PHPzPHPz

批改狀態(tài)：合格

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費學(xué)