1 實(shí)現(xiàn)一個(gè)下拉菜單
運(yùn)用知識(shí)點(diǎn)float,position
//HTML
<ul>
<li class="one"><a href="#">收藏</a>
<div class="box">
<a href="#">收藏店鋪</a>
<a href="#">收藏店長(zhǎng)</a>
</div>
</li>
<li><a href="#">衣服</a></li>
<li><a href="#">帽子</a></li>
</ul>
//CSS
<style>
*{margin: 0;padding: 0}
ul a{text-decoration: none}
ul{
width: 800px;
line-height: 50px;
background-color: pink;
list-style: none;
margin-right: auto;
margin-left: auto;
text-align: center;
}
ul>li{
float: left;
width: 80px;
height: 50px;
}
ul:after{
content: "";
display: table;
clear: both;
}
.box{
width: 80px;
position: absolute;
background-color: pink;
}
.one{position: relative;}
// 重點(diǎn) 重點(diǎn) 重點(diǎn)
.box{display: none;}
.one:hover .box{display: block;}
a{display: block;}
a:hover {background-color: greenyellow;}
</style>
2 再說(shuō)width的繼承問(wèn)題
給父級(jí)相對(duì)定位,子級(jí)絕對(duì)定位舵匾，子級(jí)不會(huì)繼承父元素的寬度
3 元素效果
3.1 給元素添加陰影
box-shadow: h-shadow | v-shadow | blur | spread | color | inset;
*h-shadow*
必需 水平陰影的位置蒋川。允許負(fù)值妓美。
*v-shadow*
必需。垂直陰影的位置。允許負(fù)值。
*blur*
可選。模糊距離酗捌。
*spread*
可選。陰影的尺寸涌哲。
*color*
可選胖缤。陰影的顏色。請(qǐng)參閱 CSS 顏色值阀圾。
inset
可選哪廓。將外部陰影 (outset) 改為內(nèi)部陰影
3.2 文字效果
text-shadow: h-shadow | v-shadow | blur | color;
*h-shadow*
必需 水平陰影的位置。允許負(fù)值初烘。
*v-shadow*
必需涡真。垂直陰影的位置。允許負(fù)值肾筐。
*blur*
可選哆料。模糊距離。
*color*
可選吗铐。陰影的顏色东亦。請(qǐng)參閱 CSS 顏色值。
3.3 文本溢出屬性指定如何顯示溢出內(nèi)容
text-overflow
//CSS
<style>
p{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
//white-space指定文字是否換行
}
</style>
//HTML
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque debitis facere id, nisi nulla quam tempora voluptates voluptatum! Amet animi cumque doloremque error inventore necessitatibus porro quam recusandae unde!</p>
