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

搜索
博主信息
博文 38
粉絲 0
評(píng)論 0
訪問量 30841
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
仿今日頭條首頁
一個(gè)好人
原創(chuàng)
1141人瀏覽過
  1. <div class="header">
  2.         <div class="search">
  3.             <div class="keys">
  4.                 <span class="iconfont icon-sousuo">&nbsp;&nbsp;</span>
  5.                 <span>習(xí)主席訪問俄羅斯</span>
  6.             </div>
  7.             <div class="publish">
  8.                 <span class="iconfont icon-jiahao"></span>
  9.                 <span class="desc">發(fā)布</span>
  10.             </div>
  11.         </div>
  12.         <div class="navs0">
  13.             <div class="navs">
  14.                 <a href="">關(guān)注</a>
  15.                 <a href="" class="active">推薦</a>
  16.                 <a href="">熱榜</a>
  17.                 <a href="">發(fā)現(xiàn)</a>
  18.                 <a href="">視頻</a>
  19.                 <a href="">防疫</a>
  20.                 <a href="">圖片</a>
  21.             </div>
  22.             <span class="iconfont icon-zhuanfa"></span>
  23.         </div>
  24.     </div>
  26.     <div class="main">
  27.         <div class="rec-list">
  28.             <a href="" class="item">
  29.                 <span class="title">習(xí)近平同俄羅斯總統(tǒng)普京舉行會(huì)談</span>
  30.                 <div class="desc">
  31.                     <span class="tag">置頂</span>
  32.                     <div class="other">
  33.                         <span>已關(guān)注</span>
  34.                         <span>央視新聞</span>
  35.                         <span>235條評(píng)論</span>
  36.                     </div>
  37.                 </div>
  38.             </a>
  39.         </div>
  40.         <div class="img1-list">
  41.             <a href="" class="item">
  42.                 <div class="left">
  43.                     <div class="title">澤連斯基恐提前逃亡！4萬烏軍陷入包圍圈</div>
  44.                     <div class="desc">
  45.                         <span class="author">航航觀歷史</span>
  46.                         <span class="replay-num">100條評(píng)論</span>
  47.                         <span class="time">17小時(shí)前</span>
  48.                     </div>
  49.                 </div>
  50.                 <img src="static/images/img1.png" class="right">
  51.             </a>
  52.         </div>
  54.         <div class="img2-list">
  55.             <a href="" class="item">
  56.                 <div class="title">澤連斯基恐提前逃亡！4萬烏軍陷入包圍圈</div>
  57.                 <div class="imgs">
  58.                     <img src="static/images/img1.png" alt="">
  59.                     <img src="static/images/img1.png" alt="">
  60.                     <img src="static/images/img1.png" alt="">
  61.                 </div>
  62.             </a>
  63.         </div>
  64.         <div class="video-list">
  65.             <a href="" class="item">
  66.                 <div class="title">古箏：小雨沙沙</div>
  67.                 <video src="static/video/video.mp4" controls></video>
  68.             </a>
  69.         </div>
  70.     </div>
  72.     <div class="footer">
  73.         <a href="" class="active">
  74.             <span class="iconfont icon-zhuye"></span>
  75.             <span>首頁</span>
  76.         </a>
  77.         <a href="" class="">
  78.             <span class="iconfont icon-24gl-play"></span>
  79.             <span>視頻</span>
  80.         </a>
  81.         <a href="" class="">
  82.             <span class="iconfont icon-liuyan"></span>
  83.             <span>留言</span>
  84.         </a>
  85.         <a href="" class="">
  86.             <span class="iconfont icon-yonghu"></span>
  87.             <span>登錄</span>
  88.         </a>
  89.     </div>
  1. 頁眉
  2. .header{
  3.     position: fixed;
  4.     left: 0;
  5.     right: 0;
  6.     top: 0;
  7.     border-bottom: 1px solid #efefef;
  8. /* 確保頁眉在頂層 */
  9.     z-index: 888;
  10.     background-color: #fff;
  11. }
  13. .header .search{
  14.     background-color: rgb(247, 73, 73);
  15.     padding: 0.08rem 0rem 0.08rem 0.15rem;
  16.     display: grid;
  17.     grid-template-columns: 1fr 0.6rem;
  18. }
  20. .header .search .keys{
  21.     height: 0.45rem;
  22.     background-color: #fff;
  23.     border-radius: 1.5rem;
  24.     padding-left: 0.18rem;
  25.     display: flex;
  26.     place-items: center;
  27. }
  28. .header .search .publish{
  29.     display: grid;
  30.     place-items: center;
  31.     color: #fff;
  32.     font-size: 0.01rem;
  33. }
  34. .icon-jiahao{
  35.     font-size: 0.25rem !important
  36. }
  38. .header .navs0{
  39.     display: grid;
  40.     grid-template-columns: 1fr 0.2rem;
  41.     padding: 0.05rem 0.02rem 0.25rem;
  42. }
  43. .header .navs0 .navs{
  44.     display: flex;
  45.     place-content: space-around;
  46.     position: fixed;
  47.     left: 0;
  48.     right: 0;
  49. }
  50. .header .navs0 .icon-zhuanfa{
  51.     display: flex;
  52.     position: fixed;
  53.     right: 0;
  54.     /* padding-right: 0.1rem; */
  55.     width: 0.35rem;
  56.     height: 0.25rem;
  57.     background-color: #fff;
  58.     place-content: center;
  59.     color: #ccc;
  60. }
  61. .header .navs0 .navs a.active{
  62.     color: rgb(247, 73, 73);
  63. }
  64. .header .navs0 .navs a{
  65.     position: relative;
  66. }
  67. .header .navs0 .navs a.active::after{
  68.     content: '';
  69.     position: absolute;
  70.     left: 0.05rem;
  71.     width: 0.22rem;
  72.     height: 0.03rem;
  73.     bottom: -0.04rem;
  74.     background-color: rgb(247, 73, 73);
  75. }
  77. .footer {
  78.     position: fixed;
  79.     left: 0;
  80.     bottom: 0;
  81.     right: 0;
  82.     background-color: #efefef;
  83.     display: flex;
  84.     place-content: space-around;
  85. }
  86. 頁腳
  87. .footer a{
  88.     display: grid;
  89.     place-items: center;
  91.     font-size: 0.12rem;
  92. }
  93. .footer a .iconfont{
  94.     font-size: 0.25rem;
  95. }
  96. .footer a.active{
  97.     color: rgb(247, 73, 73);
  98. }
  99. main部分：
  100. .main{
  101.     min-height: 2000px;
  102.     /* border: 1px solid #000; */
  104.     position: relative;
  105.     top: 1rem;
  106.     /* padding-bottom: 0.6rem; */
  107. }
  108. .main .rec-list .item{
  109.     display: block;
  110.     margin-top: 0.05rem;
  111. }
  112. .main .rec-list .item .desc{
  113.     display: flex;
  114.     font-size: 0.12rem;
  115.     gap: 0.1rem;
  116. }
  117. .main .rec-list .item .desc .tag{
  118.     color: rgb(247, 73, 73);
  119. }
  120. .main .rec-list .item .desc .other{
  121.     color: #ccc;
  122.     gap: 0.1rem;
  123. }
  124. /* 左邊文字+右邊圖片 */
  125. .main .img1-list .item{
  126.     display: grid;
  127.     grid-template-columns: 1fr 1.3rem;
  128.     gap: 0.2rem;
  129.     margin-top: 0.1rem;
  130. }
  131. .main .img1-list .item .left{
  132.     display: grid;
  133.     place-content: space-between;
  134. }
  136. .main .img1-list .item .left .desc{
  137.     font-size: 0.12rem;
  138.     color: #ccc;
  139. }
  141. /* 文本+三張圖片 */
  142. .main .img2-list .item{
  143.     display: block;
  144.     margin-top: 0.1rem;
  145. }
  147. .main .img2-list .item .imgs{
  148.     display: grid;
  149.     grid-template-columns: repeat(3, 1fr);
  150.     gap: 0.05rem;
  151. }
  153. /* 文字+視頻 */
  154. .main .video-list .item{
  155.     display: block;
  156.     margin-top: 0.1rem;
  157. }
  158. 重置部分：
  159. *{
  160.     margin: 0;
  161.     padding: 0;
  162.     box-sizing: border-box;
  163. }
  164. a{
  165.     text-decoration: none;
  166.     color: #555;
  167. }
  168. /* 適應(yīng)設(shè)備寬度 */
  169. html{
  170.     font-size: calc(100vw / 3.75);
  171. }
  172. /* 字號(hào)重置 */
  173. body{
  174.     font-size: 0.16rem;
  176.     color: #333;
  178.     background-color: #fff;
  179.     /* 頁面水平居中 */
  180.     margin: 0 auto;
  181.     padding: 0 0.15rem;
  182. }
  184. /* 外部資源適應(yīng)屏幕寬度 */
  185. body img,
  186. body video{
  187.     width: 100%;
  188. }
  190. /* 媒體查詢 可選 */
  191. @media (max-width:320px) {
  192.     html{
  193.         font-size: 85px;
  194.     }
  195. }
  196. @media (min-width:640px) {
  197.     html{
  198.         font-size: 170px;
  199.     }
  200. }

效果圖1
效果圖2

總結(jié)：

完成了一個(gè)比較完整的手機(jī)網(wǎng)頁，邊看視頻邊做還好，如果完全自己去恐怕要很久，導(dǎo)航欄的右邊懸浮了一個(gè)小圖標(biāo)，老師沒介紹，自己弄做了好久。

批改老師：PHPzPHPz

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

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

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

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