css布局网页（参考apple官网）

 

 

简单来说分为七个部分

 

1.第一部分 （头部）

2.第二部分（导航栏）

带二级导航/选项卡内容

3.第三部分

 4.第四部分 分别切换

 5.第五部分（轮播）

 6.第六部分

7.第七部分（底部）

对了，还有响应式

/* -----------响应式----------- */

#box_1 img{

    width: 20px;

    height: 0px;

    position: relative;

    left: -1140px;

    top: 6px;

}

.xys{

    width: 200px;

    height: 0px;

    position: absolute;

    /* border: 1px black solid; */

    top: 30px;

    overflow: hidden;

    z-index:1;

}

.xys ul li{

    width: 200px;

    height: 50px;

    background-color:rgb(45, 43, 43);

    color: white;text-align: center;

    line-height: 20px;

}

@media only screen and (max-width:800px){

   .dhl li a{

    display: none;

    transition: 0.5s;

   }

   .dhl_1{

    display: none;

    transition: 0.5s;

   }

   .xys{

    transition: 1s;

   }

   #box_1 img{

      height: 20px;

      transition: 3s;

}

#box_1 img:hover ~.xys{

    height: 500px;

    transition: 1s;

}

#box_1 .xys ul li{

    background-color: rgb(53, 53, 53);

}

#box_1 .xys ul li:hover{

    background-color: rgb(77, 77, 77);

}

#box_1 .xys:hover{

    height: 600px;

}

/* -------------屏幕缩小后响应式二级标签 摸苹果---------------- */

 

}

 

 今天就不上代码了，代码量有点大，需要的私我奥