A、今天我學到了什么
1姜胖、實現(xià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可以將邊款設置為圓角
四個邊都會改變
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）改為內(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文字效果
//設置文字的陰影
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可以將邊款設置為圓角
四個邊都會改變
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）改為內(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峭范、實現(xià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文字效果
//設置文字的陰影
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;
}