发表于： 2019-09-19 00:18:58
1 921
实践用css
当光标浮动到指定文本上,出现下拉菜单
button:hover .dropdown-content{
display:block;
}
button:hover当光标浮动到按钮上时 (与.dropdown-content之间要加空格,否则无法生效)
.dropdown-content{
display:block;/*显示为块级元素*/
}
折叠内容运行display:block;显示为块级元素
CSS display 属性
实例
设置段落生成一个行内框：
p.inline { display:inline; }
属性定义及使用说明
display 属性规定元素应该生成的框的类型。
默认值： | inline |
继承： | no |
版本： | CSS1 |
JavaScript 语法： | object.style.display="inline" |
属性值
| 值 | 描述 |
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
inline-block | 行内块元素。（CSS2.1 新增的值） |
list-item | 此元素会作为列表显示。 |
run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
compact | CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
marker | CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 |
inline-table | 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 |
table-row-group | 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 |
table-header-group | 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 |
table-footer-group | 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 |
table-row | 此元素会作为一个表格行显示（类似 <tr>）。 |
table-column-group | 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 |
table-column | 此元素会作为一个单元格列显示（类似 <col>） |
table-cell | 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） |
table-caption | 此元素会作为一个表格标题显示（类似 <caption>） |
inherit | 规定应该从父元素继承 display 属性的值。 |
为下拉内容设置属性
.dropdown-content{
display:none; /*隐藏*/
background-color:rgba(153,153,153,0.5);
width:100%;/*自适应填满父元素宽度(33%)*/
color:white;
}
效果
遇到问题
1.本来为下拉菜单设置有外边距,结果溢出,删除外边距显示结果为上
2.为菜单设置绝对定位,独立文档流,width:100%,相对于整个主体,与范例不符,删除
3.如图文本堆积,一起与范例不符
原因是,它们都是button元素内的文本元素
所以,要在按钮和文本外设置盒子包裹它们,并单独为下拉菜单设置盒子,
button元素本身带有一些属性，使显示结果出现偏差，所以改为span
4.为了使下拉菜单显示时后面的内容不向下移动,要为下拉菜单设置
绝对定位,使其独立于文档流
5.主体导航之下的列表，与导航重叠
float脱离文档流，所以下面的列表要清除浮动（clear：both）
为父元素设置相对定位，那么子元素的绝对定位识别的就是相对定位的父元素的边框
之后的元素也识别相对定位元素的边框
.main{
margin-top:100px;/*header浮于文档流，设置外边距，使主体显示不被遮盖*/
height: 1000px;/*增加高度，可以下拉*/
}
.span{
padding:10px 0;
background-color:white;/*按钮文本,背景,边框属性*/
color:rgb(153,153,153);
font-size: 20px;
cursor:pointer;/*游标样式*/
float:left;
width:33%;
border-width:1px;
border-style:none solid none none;
border-color: rgb(225,229,231);
margin:10px 0;
text-align: center;
position: relative;
}
span:hover{
background-color:rgb(153,153,153);/*游标悬停在按钮上,变换颜色*/
color:white;
}
.span_1{
padding:10px 0;
position: relative;
background-color:white;/*按钮文本,背景,边框属性*/
color:rgb(153,153,153);
font-size: 20px;
cursor:pointer;/*游标样式*/
float:left;
width:33%;
margin:10px 0;
text-align: center;
border: none;/*右边按钮没有边框*/
}
.dropdown-content{/*下拉菜单属性*/
display:none; /*隐藏*/
position:absolute;/*使下拉菜单独立于文档流,避免后续内容自适应下移*/
background-color:rgb(153,153,153);
width: 100%;/*自适应填满父元素宽度(33%)*/
color:white;
}
.span:hover .dropdown-content{
display:block;/*游标悬停在按钮上,下拉菜单显示为块级元素*/
}
.span_1:hover .dropdown-content{
display:block;
}
雪碧图无法插入背景
原因，切图，切出的是jpg格式，原本就有背景，无法设置
正确的应该是png格式
flex布局，出现换行，原因代码规范错误
收获，f12调试的经验
关于居中，内边距，外边距的认识，float属性更加深刻的认识
明天计划:先过一遍今天遇到的问题，加深印象，不在同一个坑里跳两次，然后完成任务6
返回列表
评论