前端苹果官网html+css

2021-05-12 09:02:21 阅读：150 来源： 互联网

标签：repeat center height html nav 背景图片 background 官网 css

<!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;

③

代码打完就会多出这个东西

一开始不该存在

屏幕小于768px，导航内容消失

align-items: center; 效果是让双杠居中

.nav{
justify-content: space-between;
}

向两边分散　　

.nav a{
width: 50px;
}

.nav .toggleBtn{
       order: 1;
   }
   .nav .logo{
       order: 2;
   }
   .nav .buy{
       order: 3;
   }

order的用法，1是最左边 2中间 3右边

改成

点击就会隐藏 label

因为改了label 所以这里也要改

变成→

过渡效果 = 变成 x

相对定位

这里的中心点需要删除

标签：repeat,center,height,html,nav,背景图片,background,官网,css
来源： https://www.cnblogs.com/cjbsai/p/14758201.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端苹果官网html+css