search

博客列表 >tab选项卡、移动端flex布局练习

tab选项卡、移动端flex布局练习

织网虾
织网虾原创
2021年11月12日 15:57:23492浏览

tab选项卡练习

运行效果图


html代码

  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>tab选项卡</title>
  8.     <link rel="stylesheet" href="css/index.css">
  9.     <script src="js/index.js"></script>
  10. </head>
  11. <body>
  13.     <div class="tab">
  14.         <ul class="menu">
  15.             <li class="current">健身</li>
  16.             <li>编程</li>
  17.             <li>音乐</li>
  18.             <li>美食</li>
  19.             <li>运维</li>
  20.         </ul>
  21.         <ul class="content c1">
  22.             <li>减脂</li>
  23.             <li>增肌</li>
  24.             <li>蛋白</li>
  25.             <li>HIIT</li>
  26.             <li>有氧</li>
  27.         </ul>
  28.         <ul class="content hide">
  29.             <li>php</li>
  30.             <li>java</li>
  31.             <li>python</li>
  32.             <li>go</li>
  33.             <li>c#</li>
  34.         </ul>
  35.         <ul class="content hide">
  36.             <li>张信哲</li>
  37.             <li>张学友</li>
  38.             <li>she</li>
  39.             <li>tfs</li>
  40.             <li>光良</li>
  41.         </ul>
  42.         <ul class="content hide">
  43.             <li>肉</li>
  44.             <li>鱼</li>
  45.             <li>菜</li>
  46.             <li>面包</li>
  47.             <li>饮料</li>
  48.         </ul>
  49.         <ul class="content hide">
  50.             <li>linux</li>
  51.             <li>windwos</li>
  52.             <li>docker</li>
  53.             <li>openstack</li>
  54.             <li>k8s</li>
  55.         </ul>
  56.     </div>
  58. </body>
  59. </html>

css代码

  1. ul,li{
  2.     list-style: none;
  3.     margin:0;
  4.     padding:0
  5. }
  7. .tab{
  8.     width:302px;
  9.     height: 200px;
  10.     border: 1px solid #ccc;
  11.     box-sizing: border-box;
  13. }
  14. .tab .menu{
  15.     height: 30px;
  16.     box-sizing: border-box;
  17.     background-color: azure;
  18. }
  19. .tab .menu li{
  20.     float:left;
  21.     border-right:1px solid #ccc;
  22.     border-bottom: 1px solid #ccc;
  23.     width:60px;
  24.     height: 30px;
  25.     line-height:30px;
  26.     text-align: center;
  27.     box-sizing: border-box;
  28.     font-size:14px;
  29. }
  31. .tab li:last-child{
  32.     border-right: none;
  33. }
  34. .tab .menu .current{
  35.     border-bottom: none;
  36.     color:brown;
  37.     font-weight: bold;
  38.     background-color:#fff;
  39. }
  40. .tab .content{
  41.     height:170px;
  43. }
  44. .tab .content li{
  45.     font-size:12px;
  46.     text-indent: 2em;
  47.     height:25px;
  48.     line-height:25px
  50. }
  51. .hide{
  52.     display: none;
  53. }
  54. .tab .menu li:hover{
  55.     border-bottom: none;
  56.     color:brown;
  57.     font-weight: bold;
  58.     background-color:#fff;
  59. }
  61. .tab .menu li:hover .c2{
  62.     display: block;
  63. }

js 代码

  1. window.onload=function(){
  3.     let c1=document.querySelectorAll(".menu li");
  4.     let content=document.querySelectorAll(".content");
  6.     c1.forEach(function(el,index){
  9.         el.onmouseover=function(){
  10.             c1[0].classList.remove("current");
  12.             content.forEach(function(el){
  13.                 el.style.display="none";
  15.             })
  16.             content[index].style.display="block";
  17.         }
  20.     });
  23.    };

移动端flex布局，结合定位（菜单里的黑色圆圈）

效果图

html代码

  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>Document</title>
  8.     <link rel="stylesheet" href="css/ex.css">
  9. </head>
  10. <body>
  11.     <div class="main">
  12.         <div class="header">
  13.             <h1>我的APP</h1>
  14.         </div>
  15.         <div class="content">
  16.             <img src="img/22.jpg" />
  17.         </div>
  18.         <div class="foot">
  19.             <ul class="icon"></ul>
  20.             <div class="menu">新闻</div>
  21.             <div class="menu">梦想</div>
  22.             <div class="menu">收藏</div>
  23.         </div>
  25.     </div>
  27. </body>
  28. </html>

css 代码

  1. body{
  2.     margin:0;
  3.     padding:0;
  4. }
  5. .main{
  6.     display:flex;
  7.     flex-direction:column;
  8.     width: 375px;
  9.     height: 667px;
  11. }
  12. .header{
  13.     background-color:crimson;
  14.     flex: 1;
  15.     flex-direction:column;
  16.     vertical-align: middle;
  18.     text-align:center
  20. }
  21. h1{
  22.     font-size:14px;
  23.     font-weight: bold;
  24.     color:#fff;
  25. }
  26. .content{
  27.     background-color: cadetblue;
  28.     flex: 8
  29. }
  30. .content img{
  32.     width: 100%;
  33.     border: 0
  35. }
  36. .foot{
  37.     background-color:darkgray;
  38.     flex:1;
  39.     display:flex;
  40.     flex-direction:row;
  42.     align-items:center
  45. }
  46. .foot .menu{
  47.     flex: 1;
  48.     text-align:center;
  49.     position:relative;
  50. }
  51. .icon{
  52.     background: url(../img/movie@highlight.png) no-repeat;
  53.     background-size: 40%;
  54.     width: 33%;
  55.     height:50px;
  56.     position: absolute;
  57.     left:42%;
  59. }
上一条：css基本属性-伸缩盒及浮动导航下一条：flex导航制作
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多