1 实现一个下拉菜单
运用知识点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) 改为内部阴影
3.2 文字效果
text-shadow: h-shadow | v-shadow | blur | color;
*h-shadow*
必需 水平阴影的位置。允许负值。
*v-shadow*
必需。垂直阴影的位置。允许负值。
*blur*
可选。模糊距离。
*color*
可选。阴影的颜色。请参阅 CSS 颜色值。
3.3 文本溢出属性指定如何显示溢出内容
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>
