目录
作品介绍
今天用HTML和css制作一个简单的网易云音乐导航栏
效果展示
代码部分
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="index.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav>
<div class="d">
<img class="one" src="wyyyy.png" alt="">
<input class="btn" type="button" value="发现音乐" >
<input class="btn" type="button" value="我的音乐" >
<input class="btn" type="button" value="关注" >
<input class="btn" type="button" value="商城" >
<input class="btn" type="button" value="音乐人">
<input class="btn" type="button" value="下载客户端">
<input class="four" type="submit" value="登录">
<input class="three" type="button" value="创作者中心">
<form action="" method="get" class="top1">
<input class="two" type="search" placeholder="音乐/视频/电台/用户">
<div class="pic"><a href="#"><img src="seek.png" alt=""></a></div>
</form>
</div>
</nav>
</body>
</html>index.css
*{
margin: 0;
padding: 0;
}
.d{
height: 50px;
font-size:0px;
margin-top: 0ch;
background-color:bisque;
}
.one{
width: 100px;
height: 40px;
margin: 0 auto;
}
.btn{
margin: 0;
width: 66px;
height: 50px;
border: 0ch;
background-color:transparent;
}
.top1 {
margin-right: 10px;
width: 200px;
height: 22px;
float: right;
border: 0px;
background-color: #ffffff;
margin: 10px 0;
border-radius: 10px;
margin-right: 10px;
}
.two{
width: 200px;
height: 22px;
float: left;
display: inline-block;vertical-align: top;
border-radius: 10px;
background-color: white;
}
.pic {
align-items: center;
height: 30px;
width: 30px;
float: right;
margin-top: -25px;
}
.pic img{
height: 30px;
width: 30px;
}
.three{
float:right;
margin-right: 10px;
margin-top: 10px;
border-radius: 10px;
background-color:transparent;
}
.four{
float:right;
margin-right: 5px;
margin-top: 10px;
border: 0ch;
border-radius: 10px;
background-color:transparent;
}特别注意
1、搜索框
1、input输入框的边框线和背景色如何去掉
要取消input默认的边框线，可以通过将css中边框线的属性值设为0，即可取消边框线的默认显示
例如：border: 0px;
要取消input输入框默认的背景色，可以通过在css中设置background-color:transparent; 语句取消默认的背景色。
2、如何将搜索框改为圆角输入框
如若要让默认的矩形输入框变为圆角输入框，可以尝试在CSS中设置border-radius: 10px;以达到圆角输入框的显示效果。
3、如何让搜索图标在搜索框内部显示
例如下图这样的效果：
首先，先用一个form标签将要显示的搜索框和搜索图标包裹起来
像这样：
<form action="" method="get" class="top1">
<input class="two" type="search" placeholder="音乐/视频/电台/用户">
<div class="pic"><a href="#"><img src="seek.png" alt=""></a></div>
</form> 然后再通过设置css样式以到达理想的效果
先设置form整体的css属性
.top1 {
margin-right: 10px;
width: 200px;
height: 22px;
float: right;
border: 0px;
background-color: #ffffff;
margin: 10px 0;
border-radius: 10px;
margin-right: 10px;
}然后再设置搜索框框的css属性
.two{
width: 200px;
height: 22px;
float: left;
display: inline-block;vertical-align: top;
border-radius: 10px;
background-color: white;
}最后设置搜索图标的css属性（没错下面两个都是）
.pic {
align-items: center;
height: 30px;
width: 30px;
float: right;
margin-top: -25px;
}
.pic img{
height: 30px;
width: 30px;
}最后就在相应的标签里面应用对应的css资源就好了（代码资源可能需要微调）
2、居中和对齐
HTML中让前后两个控件顶端对齐
（只需一行代码就能实现）
display: inline-block;vertical-align: top;
883
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
