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>