为什么要用下拉列表,因为有动态效果而且可看可不看的,我认为使用下拉列表对我们的页面有美化作用。
怎么实现?
首先思路就是使用display属性来进行控制,这是网页设计非常重要的属性之一。关于display属性,我们应该要知道它具体的属性值和作用。因为属性值较多,我列举常用的几个属性:
属性值 | 作用 |
---|---|
none | 将元素隐藏 |
block | 将元素变为块级元素 |
inline | 默认,元素为内联元素 |
inline-block | 将元素变为不占一行的块级元素 |
首先新建一个div放置我们的下拉列表:
<div class="aaa"></div>
然后,在这个div盒子里,建正常显示的列表名:
<a href="#">下拉列表</a>
再然后建隐藏的列表,我将它们放在一个盒子里:
<div class="ccc">
<p><a href="#">列表 1</a></p>
<p><a href="#">列表 2</a></p>
<p><a href="#">列表 3</a></p>
</div>
最后设置css样式:
.aaa{
width: 30%;
height: 400px;
display: inline-block; /*inline-block不占一行的块级元素*/
}
.ccc {
display: none; /*none 此元素不会被显示。*/
position: absolute; /*position 属性规定元素的定位类型。
absolute绝对定位对第一个父元素进行定位。 fixed浏览器绝对定位。 relative相对定位。 static 默认值,无定位。 inherit从父元素继承该属性 */
background-color: #E4393C;
width: inherit;; /*继承父元素宽度*/
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /*盒子阴影*/
}
.ccc a {
color: black; /*颜色*/
padding: 12px 16px; /*内容距离盒子*/
text-decoration: none; /*这个属性允许对文本设置某种效果,如加下划线。如果后代元素没有自己的装饰,祖先元素上设置的装饰会“延伸”到后代元素中。
none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 blink 定义闪烁的文本。 inherit 规定应该从父元素继承 text-decoration 属性的值。 */
display: block; /*none 此元素不会被显示。 block 此元素将显示为块级元素,此元素前后会带有换行符。 */
}
.ccc a:hover {
background-color: #E4393C; /* 鼠标经过超链接变色*/
}
.aaa:hover .ccc {
display: block; /* block 此元素将显示为块级元素,此元素前后会带有换行符。*/
}
最后完成了下拉列表的制作。