ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

前端苹果官网html+css

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

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

②做响应式,网页小于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

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有