day07

A、今天我学到了什么

1、实现一个下拉框（运用知识点float，position）

//HTML

<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、CSS3常用样式的讲解

2.1边框border-radius可以将边款设置为圆角

四个边都会改变

border-radius：value

可以单独改变一边

border-top-left-radius:value;

border-top-right-radius:value;

border-bottom-left-radius:value;

border-bottom-right-radius:value;

2.2box-shadow可以给元素添加阴影:

h-shadow
//必需。水平阴影的位置。允许负值。

v-shadow
//必需。垂直阴影的位置。允许负值。

blur
//可选。模糊距离。

spread
//可选。阴影的尺寸。

color
//可选。阴影的颜色

inset
//可选。将外部阴影（outset）改为内部阴影。

以上可以合写为

box-shadow:h-shadow v-shadow blur spread  color inset;

//HTML
  <div> </div>

//CSS
 div{
            width: 200px;
            height: 200px;
            background-color: aqua;
           box-shadow: 0px 0px 10px 10px #cccccc inset;

2.3文字效果

//设置文字的阴影

2.3.1text--shadow:h-shadow v-shadow blur color;（！用的不多）

2.3.2text--shadow：文字溢出属性指定如何显示溢出内容

p{
overflow:hidden;
text--shadow：ellipsis;
//文字阴影：省略
white-space:nowrap;
//文字不换行
//white-space指定文字是否换行
}

例子：

//HTML
      <div>
         12332121231313131313131313
     </div>

//CSS
  div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            /*word-break: break-all;*/
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
        }

            div:hover {
            box-shadow: 0px 0px 10px 10px #cccccc inset;
            text-shadow: 3px 3px 1px #ccc;
        }

B、今天我掌握了什么

2、CSS3常用样式的讲解

2.1边框border-radius可以将边款设置为圆角

四个边都会改变

border-radius：value

可以单独改变一边

border-top-left-radius:value;

border-top-right-radius:value;

border-bottom-left-radius:value;

border-bottom-right-radius:value;

2.2box-shadow可以给元素添加阴影:

h-shadow
//必需。水平阴影的位置。允许负值。

v-shadow
//必需。垂直阴影的位置。允许负值。

blur
//可选。模糊距离。

spread
//可选。阴影的尺寸。

color
//可选。阴影的颜色

inset
//可选。将外部阴影（outset）改为内部阴影。

以上可以合写为

box-shadow:h-shadow v-shadow blur spread  color inset;

//HTML
  <div> </div>

//CSS
 div{
            width: 200px;
            height: 200px;
            background-color: aqua;
           box-shadow: 0px 0px 10px 10px #cccccc inset;

C、今天我没掌握什么

>####1、实现一个下拉框（运用知识点float，position）

//HTML

<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.3文字效果

//设置文字的阴影

2.3.1text--shadow:h-shadow v-shadow blur color;（！用的不多）

2.3.2text--shadow：文字溢出属性指定如何显示溢出内容

p{
overflow:hidden;
text--shadow：ellipsis;
//文字阴影：省略
white-space:nowrap;
//文字不换行
//white-space指定文字是否换行
}

例子：

//HTML
      <div>
         12332121231313131313131313
     </div>

//CSS
  div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            /*word-break: break-all;*/
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
        }

            div:hover {
            box-shadow: 0px 0px 10px 10px #cccccc inset;
            text-shadow: 3px 3px 1px #ccc;
        }