admin管理员组文章数量:1568682
- 分析导航页 有5部分组成
最大的<div>表示全头部 div表示盒子的意思
<div ></div>
第二个div表示上图的所有 表示一个div盒子将5部分装起来
<div >
<div >
</div>
</div>
我们将将1234放在一个盒子里面 分别做成不同的div盒子
<div >
<div >
<div >
</div>
</div>
</div>
先加图片
<div >
<div >
<div >
<div >
<a href="#"><img src="https://y.qq/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 >
<div >
<div >
<div >
<a href="#"><img src="https://y.qq/mediastyle/yqq/img/logo.png?max_age=2592000" alt="" /></a>
</div>
<!-- 左侧文字导航-->
<div >
<!-- 导航条左边的列表-->
<ul>
<!--#" 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: wh
版权声明:本文标题:【QQ音乐Html + CSS静态笔记】 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1727641891a1123350.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论