A、今天我學(xué)到了什么

1、實(shí)現(xiàn)一個下拉框（運(yùn)用知識點(diǎn)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可以將邊款設(shè)置為圓角

四個邊都會改變

border-radius：value

可以單獨(dú)改變一邊

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
//必需。水平陰影的位置。允許負(fù)值。

v-shadow
//必需。垂直陰影的位置。允許負(fù)值。

blur
//可選。模糊距離。

spread
//可選。陰影的尺寸。

color
//可選。陰影的顏色

inset
//可選。將外部陰影（outset）改為內(nèi)部陰影。

以上可以合寫為

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

//設(shè)置文字的陰影

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

2.3.2text--shadow：文字溢出屬性指定如何顯示溢出內(nèi)容

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可以將邊款設(shè)置為圓角

四個邊都會改變

border-radius：value

可以單獨(dú)改變一邊

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
//必需。水平陰影的位置。允許負(fù)值。

v-shadow
//必需。垂直陰影的位置。允許負(fù)值。

blur
//可選。模糊距離。

spread
//可選。陰影的尺寸。

color
//可選。陰影的顏色

inset
//可選。將外部陰影（outset）改為內(nèi)部陰影。

以上可以合寫為

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、實(shí)現(xiàn)一個下拉框（運(yùn)用知識點(diǎn)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文字效果

//設(shè)置文字的陰影

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

2.3.2text--shadow：文字溢出屬性指定如何顯示溢出內(nèi)容

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;
        }