发表于: 2019-08-12 22:54:31

1 969


今天完成的事情:学会上下header和footer部分的固定,中间自动溢出部分出现滚动条,学会了下拉菜单的制作,下拉选框select标签

明天计划的事情:将主体部分完成,完成任务并调试代码,学习bootstrap布局

遇到的问题:  

在做列表头的下拉选框的时候做成了下拉菜单,与要求不符

为了自动出现滚动条,对header和footer的固定方式进行不同方式的选择,但是只有相对定位达到目的。

收获

html

<span class="szd">
<button class="dropbtn">所在地</button>
<ul class="dropdown-content">
<li><a href="#">北京</a></li>
<li><a href="#">上海</a></li>
<li><a href="#">西安</a></li>
</ul>
</span>

css

.dropdown-content {
display: none;
}
.szd:hover .dropdown-content{
display: block;
clear: both;
}
a {
display: block;
}

display:none隐藏

:hover 选择器用于选择鼠标指针浮动在上面的元素

2、下拉选框select标签的使用

select控件用于创建下拉列表框(下拉菜单),并通过 option 元素创建列表中的选项,供用户从中选择。

tex-align-last:center; (让select标签中的文本居中)

<option> 标签定义了列表中的可用选项

<select name="" id="">
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>

3、采用相对定位将header和footer固定一上一下。中间主体部分固定之后采用overflow:auto;可以做到溢出部分出现滚动条。


返回列表 返回列表
评论

    分享到