【QQ音乐Html + CSS静态笔记】

1. 分析导航页 有5部分组成
   

 最大的<div>表示全头部  div表示盒子的意思

<div class="header"></div>

 第二个div表示上图的所有  表示一个div盒子将5部分装起来   

<div class="header">

    <div class="nav">
    </div>
</div>

我们将将1234放在一个盒子里面   分别做成不同的div盒子

<div class="header">
    <div class="nav">
        <div class="nav_t">
            
        </div>
    </div>
</div>

先加图片

<div class="header">
    <div class="nav">
        <div class="nav_t">
            <div class="logo">
                <a href="#"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000" alt="" /></a>
            </div>
        </div>
    </div>
</div>

效果是这样的 

 明显图片的比例不太对  我们给class=nav的  div加上宽高   新建css文件 和html在同一个文件下

/*导航头部加宽高*/
.nav{
    width: 100%;
    height: 142px;
}
/*导航第一部分加效果*/
.nav .nav_t{
    width: 100%;
    height: 90px;
    border-bottom: 1px solid #F2F2F2;
}

引入css样式 

在html的header里面添加

<link rel="stylesheet" href="header.css">

查看效果 据左上角  

 添加居中 离开坐标的效果

在css文件里面加

/*logo浮动居左  和左边间隔10像素*/
.nav .nav_t .logo{
    float: left;
    margin-left: 10px;

}
/*图片设置宽高  和距离上面的位置 左边的位置 */
.nav .nav_t .logo a img{
    display: block;
    width: 170px;
    height: 46px;
    padding-top: 22px;
    padding-left: 40px;

}

第二部分 左侧文字  看加的文字开始和结束 别全部抄

<div class="header">
    <div class="nav">
        <div class="nav_t">
            <div class="logo">
                <a href="#"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000" alt="" /></a>
            </div>


<!--            左侧文字导航-->
            <div class="top_nav__item">
                <!--        导航条左边的列表-->
                <ul>
                    <!--class="current 加背景 加title -->
                    <li><a href="#" class="current" title ="音乐馆">音乐馆</a></li>
                    <li><a href="#" title="我的音乐">我的音乐</a></li>
                    <li><a href="#" title="客户端">客户端</a></li>
                    <li><a href="#" title="开放平台">开放平台</a></li>
                    <li><a href="#" title="VIP">VIP</a></li>
                </ul>
            </div>
<!--            左侧文字导航结束-->


        </div>
    </div>
</div>

 需要添加css样式排版

/*向左浮动 和上边距0px*/
.nav .nav_t .top_nav__item{
    float: left;
    overflow: hidden;
    margin-top: 0px;
}

 横向排列的css

/*去掉列表前面的 点 · 设置列表的宽高 */
.nav .nav_t .top_nav__item ul{
    list-style: none;
    margin-left: 30px;
    margin-top: 0px;
    margin-bottom: 0px;
    height: 90px;
}
/*设置列表横向排列*/
.nav .nav_t .top_nav__item ul li{
    float: left;
}
/*设置列表间隔出来  颜色  字体大小  行高  */
.nav .nav_t .top_nav__item ul li a{
    display: block;
    padding: 0 19px;
    text-decoration: none;
    color: #333;
    font-size: 18px;
    line-height: 90px;
}

添加停留变色 效果

.nav .nav_t .top_nav__item ul li a:hover{
    color:#31c27c;
}

给音乐馆添加背景和文字颜色 

/*给音乐馆添加背景和文字颜色*/
.nav .nav_t .top_nav__item ul li .current{
    background-color: #31c27c;
    color:white;
}

但是会变成这样 

 所以我们添加悬停效果

/*添加浮动悬停效果*/
.nav .nav_t .top_nav__item ul li .current:hover{
    color: white;
}

---

---

搜索框 制作