1 實現(xiàn)一個下拉菜單
運用知識點float,position
//HTML
<ul>
<li class="one"><a href="#">收藏</a>
<div class="box">
<a href="#">收藏店鋪</a>
<a href="#">收藏店長</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;}
// 重點 重點 重點
.box{display: none;}
.one:hover .box{display: block;}
a{display: block;}
a:hover {background-color: greenyellow;}
</style>
2 再說width的繼承問題
給父級相對定位,子級絕對定位，子級不會繼承父元素的寬度
3 元素效果
3.1 給元素添加陰影
box-shadow: h-shadow | v-shadow | blur | spread | color | inset;
*h-shadow*
必需 水平陰影的位置。允許負值。
*v-shadow*
必需。垂直陰影的位置。允許負值。
*blur*
可選。模糊距離。
*spread*
可選。陰影的尺寸。
*color*
可選。陰影的顏色。請參閱 CSS 顏色值。
inset
可選。將外部陰影 (outset) 改為內(nèi)部陰影
3.2 文字效果
text-shadow: h-shadow | v-shadow | blur | color;
*h-shadow*
必需 水平陰影的位置。允許負值。
*v-shadow*
必需。垂直陰影的位置。允許負值。
*blur*
可選。模糊距離。
*color*
可選。陰影的顏色。請參閱 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>
