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;
//用的不多，但面试的时候碰到过
- 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;
//用的不多，但面试的时候碰到过
- 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;
}
