A我今天学了什么

1.下拉菜单

<div class="header">
    <ul class="item">
        <li>首页
             <ul class="item-ul">
                 <li>个人中心</li>
                 <li>购物车</li>
             </ul>
        </li>
        <li>菜单</li>
        <li>卖家中心</li>
    </u
//CSS
  *{
            margin: 0;
            padding: 0;
        }
        .header{
            width: 1000px;
            height: 40px;
            background-color: pink;
            margin-left: auto;
            margin-right: auto;
        }
        ul{
            list-style: none;
        }
        .item{
            width: 1000px;
            height: 40px;
        }
        .item>li{
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: white;
        }
        .item li:hover{
            background-color: palevioletred;
        }
        .item-ul{
            background-color: pink;
            display: none;
        }
        .item>li:hover>ul{
            display: block;
        }

2.边框圆角

边框border-radius 可以将边框设置为圆角
border-radius:value 四个边都会改变
可以单独改变一边
border-top-left-radius:;
border-top-right-radius:;
border-bottom-left-radius:;
border-bottom-right-radius:;

3.元素阴影

box-shadow可以给元素添加阴影
box-shadow: h-shadow v-shadow blur spread color inset;
*h-shadow*
必需 水平阴影的位置。允许负值。
*v-shadow*
必需。垂直阴影的位置。允许负值。
*blur*
可选。模糊距离。
*spread*
可选。阴影的尺寸。
*color*
可选。阴影的颜色。请参阅 CSS 颜色值。
inset
可选。将外部阴影 (outset) 改为内部阴影。

4.文本阴影

text-shadow: h-shadow v-shadow blur color;
//用的不多，但面试的时候碰到过

5. text-overflow 文本溢出属性省略号显示

p{
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space:nowrap; 

B我今天掌握了什么

2.边框圆角

边框border-radius 可以将边框设置为圆角
border-radius:value 四个边都会改变
可以单独改变一边
border-top-left-radius:;
border-top-right-radius:;
border-bottom-left-radius:;
border-bottom-right-radius:;

3.元素阴影

box-shadow可以给元素添加阴影
box-shadow: h-shadow v-shadow blur spread color inset;
*h-shadow*
必需 水平阴影的位置。允许负值。
*v-shadow*
必需。垂直阴影的位置。允许负值。
*blur*
可选。模糊距离。
*spread*
可选。阴影的尺寸。
*color*
可选。阴影的颜色。请参阅 CSS 颜色值。
inset
可选。将外部阴影 (outset) 改为内部阴影。

4.文本阴影

text-shadow: h-shadow v-shadow blur color;
//用的不多，但面试的时候碰到过

5. text-overflow 文本溢出属性省略号显示

p{
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space:nowrap; 

C我今天没掌握什么

1.下拉菜单

<div class="header">
    <ul class="item">
        <li>首页
             <ul class="item-ul">
                 <li>个人中心</li>
                 <li>购物车</li>
             </ul>
        </li>
        <li>菜单</li>
        <li>卖家中心</li>
    </u
//CSS
  *{
            margin: 0;
            padding: 0;
        }
        .header{
            width: 1000px;
            height: 40px;
            background-color: pink;
            margin-left: auto;
            margin-right: auto;
        }
        ul{
            list-style: none;
        }
        .item{
            width: 1000px;
            height: 40px;
        }
        .item>li{
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: white;
        }
        .item li:hover{
            background-color: palevioletred;
        }
        .item-ul{
            background-color: pink;
            display: none;
        }
        .item>li:hover>ul{
            display: block;
        }