首页 / HTML / 前端苹果官网html+css

前端苹果官网html+css

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了前端苹果官网html+css，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2797字，纯文字阅读大概需要4分钟。

内容图文

<!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>
        <!--
            注意:分析页面是否包含移动端，如包含移动端一定要加上 meta viewport
        -->
        <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;
}

 前端苹果官网html+css - 文章图片

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

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

 ②前端苹果官网html+css - 文章图片

 

 

前端苹果官网html+css - 文章图片

 

 

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

 ③前端苹果官网html+css - 文章图片

 

 

代码打完就会多出这个东西
一开始不该存在前端苹果官网html+css - 文章图片

 

 

 前端苹果官网html+css - 文章图片

 

 


 

 
 前端苹果官网html+css - 文章图片

 

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

前端苹果官网html+css - 文章图片

 

前端苹果官网html+css - 文章图片

 

 

 
 前端苹果官网html+css - 文章图片

 

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

前端苹果官网html+css - 文章图片

 

 

前端苹果官网html+css - 文章图片

 

 

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

 

向两边分散　　

  前端苹果官网html+css - 文章图片

 

 前端苹果官网html+css - 文章图片

 

 

 .nav a{
        width: 50px;
    }

 

 

前端苹果官网html+css - 文章图片

 

 

前端苹果官网html+css - 文章图片

 

 

 

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

 

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

前端苹果官网html+css - 文章图片

 

 

 
 

前端苹果官网html+css - 文章图片

 

 前端苹果官网html+css - 文章图片改成前端苹果官网html+css - 文章图片

 

 点击就会隐藏 label

 
 

前端苹果官网html+css - 文章图片

 

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

前端苹果官网html+css - 文章图片

 

 

 

 前端苹果官网html+css - 文章图片 变成→  前端苹果官网html+css - 文章图片

 

 

 

 
 

前端苹果官网html+css - 文章图片

 

 
 

前端苹果官网html+css - 文章图片

 

过渡效果 = 变成 x
  前端苹果官网html+css - 文章图片

 

 


 

 相对定位
 

 

 前端苹果官网html+css - 文章图片

 

 这里的中心点需要删除

内容总结

以上是互联网集市为您收集整理的前端苹果官网html+css全部内容，希望文章能够帮你解决前端苹果官网html+css所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/983254.html

来源：【匿名】