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