弹性布局和下拉列表
程序员文章站
2022-03-07 19:45:18
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*去除自带效果*/
body,nav>ul{
margin:0;
padding: 0;
}
/*去除li前的小点*/
nav>ul>li>ul>li{
list-style-type: none;
/* line-height: 70px; */
color: blueviolet;
}
nav>ul>li>ul>li{
border-bottom:1px solid rgb(245, 245, 245);
width: 120px;
}
a{
/*去除a标签下的样式*/
text-decoration: none;
/*设置文字的颜色*/
color: grey;
/* a是行内元素,要用宽度得转成块级元素 */
display:block;
text-align: center;
width:120px;
}
/*设置logo*/
.tupian img{
height: 50px;
width: 120px;
}
.daohang{
background: #74cdf0;
display: flex;
/*宽度铺满*/
width: 100%;
/*最低宽度*/
min-width: 1024px ;
height: 50px;
/*使li分散对齐*/
Justify-content:space-around;
/*超出部分隐藏*/
/*overflow:hidden;*/
list-style-type: none;
/* align-items: center; */
/* height:50px; */
line-height:50px;
/* 固定高度的设置行高, 文字在行中间。
变高的padding-top:20px; padding-bottom:20px; 设置边距 */
}
.neirong{
background-color: rgb(189, 234, 255);
padding-left: 0;
/*隐藏二级菜单*/
display: none;
}
.liebiao{
background-color: rgb(189, 234, 255);
padding-left: 0;
/*隐藏二级菜单*/
}
nav>ul>li:hover>ul{
/*显示二级菜单*/
display: block;
}
/*一级级菜单鼠标悬停效果*/
nav>ul>li:hover{
background-color: rgb(255, 253, 136);
}
/*二级级菜单鼠标悬停效果*/
.neirong>li>a:hover{
background-color: rgb(138, 255, 187);
}
/* 一二级菜单鼠标悬停效果
nav>ul>li:hover,nav>ul>li>ul>li:hover {
background: #e2ff94;
}
*/
/*输入框的样式*/
nav>ul>li>form>input{
border: 1px #8ffff9 solid;border-radius: 5px;height: 30px;
}
</style>
</head>
<body>
<nav>
<ul class="daohang">
<li class="tupian"><span><a href="">
<img src=
"http://d300.paixin.com/thumbs/1028599/3836308/staff_1024.jpg"
alt=""></a></span></li>
<li>
<a href="">文章类</a>
<ul class="neirong">
<li><a class="liebiao" href="">2</a></li>
<li><a class="liebiao" href="">2</a></li>
<li><a class="liebiao" href="">2</a></li>
<li><a class="liebiao" href="">2</a></li>
</ul>
</li>
<li>
<a href="">视频类</a>
<ul class="neirong">
<li><a href=""></a>1</li>
<li><a href=""></a>1</li>
<li><a href=""></a>1</li>
<li><a href=""></a>1</li>
</ul>
</li>
<li>
<a href="">音频类</a>
<ul class="neirong">
<li><a href=""></a>1</li>
<li><a href=""></a>1</li>
<li><a href=""></a>1</li>
<li><a href=""></a>1</li>
</ul>
</li>
<li>
<form action="">
<input type="search" placeholder="搜索" onchange="alert(this.value)" name="" id="">
</form>
</li>
</ul>
</nav>
</body>
</html>
上一篇: css为什么压缩
推荐阅读
-
axure怎么给下拉框/列表框和元件文本添加内容?
-
Android自定义Spinner下拉列表(使用ArrayAdapter和自定义Adapter实现)
-
axure怎么给下拉框/列表框和元件文本添加内容?
-
Android自定义Spinner下拉列表(使用ArrayAdapter和自定义Adapter实现)
-
微信小程序 列表的上拉加载和下拉刷新的实现
-
Android下拉列表(Spinner)效果(使用C#和Java分别实现)
-
vue表单绑定实现多选框和下拉列表的实例
-
ASP.NET MVC下使用AngularJs语言(六):获取下拉列表的value和Text
-
layui的tree和form并没有冲突!无限级tree下拉列表和select下拉列表同一页使用!
-
vant实现列表分页加载和下拉刷新