前端苹果官网html+css

2024-01-30 12:01:52

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
       <link rel="stylesheet" type="text/css" href="css/style.css"/>
   </head>
   <body>
       
       <div class="nav">
           <a href="" class="logo"></a>
           <a href="">MAC</a>
           <a href="">IPAD</a>
           <a href="">IPHONE</a>
           <a href="">WATCH</a>
           <a href="">TV</a>
           <a href="">MUSIC</a>
           <a href="">SUPPORT</a>
           <a href="" class="search"></a>
           <a href="" class="buy"></a>

       </div>

   </body>
</html>

---------------------

*{
   margin: 0;
   padding: 0;
}
.nav{
   width: 100%;
   height: 44px;
   background: rgba(0,0,0,0.8);/*r红色g绿色b蓝色a透明度*/
   display: flex;
   justify-content: center;
   align-items: center;
}
.nav a{
   color: #FFFFFF;
   /*设置下划线属性 underline(a标签默认样式)*/
   text-decoration: none;
   width: 102px;
   text-align: center;
}

.nav .logo{
   background-image: url(../img/logo.svg);
   height: 44px;
   /*设置背景图片不重复*/
   background-repeat: no-repeat;
   /*设置背景图片的位置*/
   background-position: center;
}
.nav .search{
   background-image: url(../img/seach.svg);
   height: 44px;
   /*设置背景图片不重复*/
   background-repeat: no-repeat;
   /*设置背景图片的位置*/
   background-position: top;
   background-size: 18px 88px;

}
.nav .buy{
   background-image: url(../img/buy.svg);
   height: 44px;
   /*设置背景图片不重复*/
   background-repeat: no-repeat;
   /*设置背景图片的位置*/
   background-position: center;
}

②做响应式，网页小于768像素时页面会改变样式

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

}

②

③<a href="" class="toggleBtn">
               <span class="line"></span>
               <span class="line"></span>
           </a>

----------------------

.toggleBtn{
   height: 44px;
   display: flex;
   flex-direction: column;
   justify-content: center;
}
.toggleBtn .line{
   height: 1px;
   width: 17px;
   margin: 4px;
   background-color: #fff;

③