search

博客列表 >仿哔哩哔哩移动端首页

仿哔哩哔哩移动端首页

月缺
月缺原创
2021年10月01日 15:27:221391浏览

仿哔哩哔哩移动端首页

html文件结构

  1. <!-- 页面结构 -->
  2.   <div class="home">
  3.     <!-- 页眉 -->
  4.     <header>
  5.       <!-- 菜单 -->
  6.       <span class="iconfont icon-bilibili-copy" style="color: red;font-size: 3rem;"></span>
  7.       <!-- 搜索框 -->
  8.       <div class="search">
  9.       </div>
  10.       <!-- 登录 -->
  11.       <a href=""></a>
  12.     </header>
  13.     <!-- 主体 -->
  14.     <div class="main">
  15.       <!-- 导航区 -->
  16.       <ul class="navs">
  17.         <li class="item">首页</li>
  18.         <li class="item">频道</li>
  19.         <li class="item active">直播</li>
  20.         <li class="item">排行</li>
  21.         <li class="item">我的</li>
  22.       </ul>
  23.       <!-- 轮播图 -->
  24.       <div class="slider">
  25.         <div class="imgs">
  26.           <a href="" class="active"><img src="static/images/banner.png" alt="" /></a>
  27.           <a href=""><img src="static/images/banner.png" alt="" /></a>
  28.           <a href=""><img src="static/images/banner.png" alt="" /></a>
  29.         </div>
  30.         <!-- 轮播图底部的切换按钮组,与轮播图数量对应 -->
  31.         <div class="btns">
  32.           <span class="item active"></span>
  33.           <span class="item"></span>
  34.           <span class="item"></span>
  35.         </div>
  36.       </div>
  39.       <!-- 电台 -->
  40.       <div class="list-container">
  41.         <div class="title-ctnr">
  42.           <h5>电台</h5>
  43.           <small>进去看看</small>
  44.         </div>
  45.         <ul class="block-ctnr">
  46.           <li>
  47.             <div class="cover-wrap">
  48.               <img src="./static/images/slides/slide1.jpg" alt="">
  49.             </div>
  50.             <div class="cover-cont">
  51.               <div class="mov-detail">【3D】可爱妹妹，进来叫你靓仔</div>
  52.               <div class="mov-info">
  53.                 <div>
  54.                   <span class="iconfont icon-UPzhu"></span>
  55.                   <span>xxxxxx</span>
  56.                 </div>
  57.                 <span class="iconfont icon-gengduo1"></span>
  58.               </div>
  59.             </div>
  60.           </li>
  61.           <li>
  62.             <div class="cover-wrap">
  63.               <img src="./static/images/slides/slide2.jpg" alt="">
  64.             </div>
  65.             <div class="cover-cont">
  66.               <div class="mov-detail">【3D】可爱妹妹，进来叫你靓仔</div>
  67.               <div class="mov-info">
  68.                 <div>
  69.                   <span class="iconfont icon-UPzhu"></span>
  70.                   <span>xxxxxx</span>
  71.                 </div>
  72.                 <span class="iconfont icon-gengduo1"></span>
  73.               </div>
  74.             </div>
  75.           </li>
  76.           <li>
  77.             <div class="cover-wrap">
  78.               <img src="./static/images/slides/slide3.jpg" alt="">
  79.             </div>
  80.             <div class="cover-cont">
  81.               <div class="mov-detail">【3D】可爱妹妹，进来叫你靓仔</div>
  82.               <div class="mov-info">
  83.                 <div>
  84.                   <span class="iconfont icon-UPzhu"></span>
  85.                   <span>xxxxxx</span>
  86.                 </div>
  87.                 <span class="iconfont icon-gengduo1"></span>
  88.               </div>
  89.             </div>
  90.           </li>
  91.           <li>
  92.             <div class="cover-wrap">
  93.               <img src="./static/images/slides/slide4.jpg" alt="">
  94.             </div>
  95.             <div class="cover-cont">
  96.               <div class="mov-detail">【3D】可爱妹妹，进来叫你靓仔</div>
  97.               <div class="mov-info">
  98.                 <div>
  99.                   <span class="iconfont icon-UPzhu"></span>
  100.                   <span>xxxxxx</span>
  101.                 </div>
  102.                 <span class="iconfont icon-gengduo1"></span>
  103.               </div>
  104.             </div>
  105.           </li>
  106.         </ul>
  107.       </div>
  108.       <!-- 视频唱见 -->
  109.       <div class="list-container">
  110.         <div class="title-ctnr">
  111.           <h5>视频唱见</h5>
  112.           <small>进去看看</small>
  113.         </div>
  114.         <ul class="block-ctnr">
  115.           <li>
  116.             <div class="cover-wrap">
  117.               <img src="./static/images/slides/slide1.jpg" alt="">
  118.             </div>
  119.             <div class="cover-cont">
  120.               <div class="mov-detail">【3D】可爱妹妹，进来叫你靓仔</div>
  121.               <div class="mov-info">
  122.                 <div>
  123.                   <span class="iconfont icon-UPzhu"></span>
  124.                   <span>xxxxxx</span>
  125.                 </div>
  126.                 <span class="iconfont icon-gengduo1"></span>
  127.               </div>
  128.             </div>
  129.           </li>
  130.           <li>
  131.             <div class="cover-wrap">
  132.               <img src="./static/images/slides/slide2.jpg" alt="">
  133.             </div>
  134.             <div class="cover-cont">
  135.               <div class="mov-detail">【3D】可爱妹妹，进来叫你靓仔</div>
  136.               <div class="mov-info">
  137.                 <div>
  138.                   <span class="iconfont icon-UPzhu"></span>
  139.                   <span>xxxxxx</span>
  140.                 </div>
  141.                 <span class="iconfont icon-gengduo1"></span>
  142.               </div>
  143.             </div>
  144.           </li>
  145.           <li>
  146.             <div class="cover-wrap">
  147.               <img src="./static/images/slides/slide3.jpg" alt="">
  148.             </div>
  149.             <div class="cover-cont">
  150.               <div class="mov-detail">【3D】可爱妹妹，进来叫你靓仔</div>
  151.               <div class="mov-info">
  152.                 <div>
  153.                   <span class="iconfont icon-UPzhu"></span>
  154.                   <span>xxxxxx</span>
  155.                 </div>
  156.                 <span class="iconfont icon-gengduo1"></span>
  157.               </div>
  158.             </div>
  159.           </li>
  160.           <li>
  161.             <div class="cover-wrap">
  162.               <img src="./static/images/slides/slide4.jpg" alt="">
  163.             </div>
  164.             <div class="cover-cont">
  165.               <div class="mov-detail">【3D】可爱妹妹，进来叫你靓仔</div>
  166.               <div class="mov-info">
  167.                 <div>
  168.                   <span class="iconfont icon-UPzhu"></span>
  169.                   <span>xxxxxx</span>
  170.                 </div>
  171.                 <span class="iconfont icon-gengduo1"></span>
  172.               </div>
  173.             </div>
  174.           </li>
  175.         </ul>
  176.       </div>
  177.     </div>
  179.     <!-- 页脚 -->
  180.     <div class="footer">
  181.       <div class="active">
  182.         <span class="iconfont icon-shouye"></span>
  183.         <span>首页</span>
  184.       </div>
  185.       <div>
  186.         <span class="iconfont icon-dongtai"></span>
  187.         <span>动态</span>
  188.       </div>
  189.       <div>
  190.         <span class="iconfont icon-gengduo"></span>
  191.       </div>
  192.       <div>
  193.         <span class="iconfont icon-huiyuangou"></span>
  194.         <span>会员购</span>
  195.       </div>
  196.       <div>
  197.         <span class="iconfont icon-bilibili-fill"></span>
  198.         <span>我的</span>
  199.       </div>
  200.     </div>
  201.   </div>

index.css —— 文件结构

  1. @import url(./static/css/reset.css);
  2. @import url(./static/css/home.css);
  3. @import url(./static/css/header.css);
  4. @import url(./static/css/navs.css);
  5. @import url(./static/css/slider.css);
  6. @import url(./static/css/list.css);
  7. @import url(./static/css/footer.css);

reset.css —— 重置浏览器样式

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. :root {
  7.   font-size: 10px;
  8. }
  9. a {
  10.   text-decoration: none;
  11.   color: #666;
  12. }
  13. ul li {
  14.   list-style: none;
  15. }
  16. body {
  17.   font-size: 1.6rem;
  18.   background-color: #f6f6f6;
  19. }
  21. /* 媒体查询 */
  22. @media (min-width: 480px) {
  23.   :root {
  24.     font-size: 12px;
  25.   }
  26. }
  27. @media (min-width: 640px) {
  28.   :root {
  29.     font-size: 14px;
  30.   }
  31. }
  32. @media (min-width: 720) {
  33.   :root {
  34.     font-size: 16px;
  35.   }
  36. }

home.css —— 页面结构样式

  1. .home {
  2.   min-height: 100vh;
  3.   display: grid;
  4.   grid-template-rows: 5rem 1fr 6rem;
  5. }
  6. .home .main {
  7.   /* -webkit-overflow-scrolling: touch; */
  8.   height: calc(100vh - 11rem);
  9.   overflow-y: scroll;
  10. }

header.css顶部样式

  1. .home>header {
  2.   background-color: #fff;
  3.   display: grid;
  4.   grid-template-columns: 8rem 1fr 5rem;
  5.   place-items: center;
  6. }

navs.css —— 标签栏样式

  1. .home .main .navs {
  2.   padding-top: .5rem;
  3.   background-color: #fff;
  4.   display: grid;
  5.   grid-template-columns: repeat(5, 1fr);
  6.   height: 3.5rem;
  7.   place-items: center;
  8. }
  9. .home .main .navs .item {
  10.   width: 100%;
  11.   height: 100%;
  12.   text-align: center;
  13. }
  14. .home .main .navs .item.active {
  15.   border-bottom: .5rem solid #fb7299;
  16. }

slider.css —— 轮播图样式

  1. .home .main .slider {
  2.   width: 100vw;
  3.   height: 130px;
  4.   position: relative;
  5. }
  6. .home .main .slider img {
  7.   width: 100%;
  8. }
  9. /* 初始化时,将所有轮播图片先全部隐藏,默认只显示第一个 */
  10. /* 注意,轮播图是可点击的,图片在链接元素中,所以只需要设置a标签即可 */
  11. .home .main .slider .imgs a {
  12.   display: none;
  13. }
  14. /* 默认第一个轮播图激活 */
  15. .home .main .slider .imgs a.active {
  16.   display: block;
  17. }
  19. /* 切换按钮容器的样式 */
  20. .home .main .slider .btns {
  21.   width: 8rem;
  22.   height: 3rem;
  23.   position: absolute;
  24.   top: 9.5rem;
  25.   right: 0em;
  26.   /* flex布局,且水平居中,并上移到轮播图底部 */
  27.   display: flex;
  28.   justify-content: center;
  29.   /* 负外距可反向移动元素,这里是向上 */
  30. }
  32. /* 切换按钮 */
  33. .home .main .slider .btns .item {
  34.   height: 1.2rem;
  35.   width: 1.2rem;
  36.   border-radius: 50%;
  37.   background-color: #fff;
  38.   margin: 0.5rem;
  39. }
  40. /* 切换按钮鼠标悬停样式 */
  41. .home .main .slider .btns .item:hover {
  42.   cursor: pointer;
  43. }
  44. /* 当前默认激活的按钮样式 */
  45. .home .main .slider .btns .item.active {
  46.   background-color: #fb7299;
  47. }

list.css —— 主体内容列表样式

  1. .list-container {
  2.   margin: 1rem 0;
  3.   display: grid;
  4.   grid-template-rows: 3rem 1fr;
  5.   background-color: #fff;
  6. }
  7. .list-container .title-ctnr {
  8.   display: flex;
  9.   padding: 0 1rem;
  10.   place-content: space-between;
  11.   place-items: center;
  12. }
  13. .list-container .title-ctnr h5 {
  14.   font-size: 1.8rem;
  15. }
  16. .list-container .title-ctnr span {
  17.   color: grey;
  18. }
  19. .list-container .block-ctnr {
  20.   width: 100%;
  21.   padding: 0.8rem;
  22.   display: grid;
  23.   grid-template-columns: repeat(2, 1fr);
  24.   grid-template-rows: repeat(2, 1fr);
  25.   gap: 1rem;
  26. }
  28. .list-container .block-ctnr li{
  29.   height: 16rem;
  30. }
  32. .list-container .block-ctnr li img {
  33.   width: 100%;
  34.   height: 10rem;
  35.   border-radius: 1rem;
  36. }
  38. .cover-cont .mov-detail{
  39.   font-size: 1.4rem;
  40. }
  41. .cover-cont .mov-info {
  42.   margin-top: 0.5rem;
  43.   display: flex;
  44.   place-content: space-between;
  45.   align-items: baseline;
  46.   color: grey;
  47. }

footer.css —— 底部导航样式

  1. .footer {
  2.   display: flex;
  3.   justify-content: space-around;
  4. }
  5. .footer div{
  6.   display: flex;
  7.   flex-direction: column;
  8.   align-items: center;
  9.   justify-content: center;
  10. }
  11. .footer div .iconfont {
  12.   font-size: 2.5rem;
  13.   color: #383636;
  14. }
  15. .footer div span {
  16.   font-size: 1rem;
  17.   color: #615f5f;
  18. }
  19. .footer div.active .iconfont,.footer div.active span {
  20.   color: #fb7299;
  21. }

最终效果演示

最终结果

上一条：使用rest参数自定义求和函数下一条：SpringBoot打印POST请求原始入参body体方式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
胡子2021-10-09 22:46:331楼
? 人，大佬。

相关文章

查看更多