A今天学了什么
1.用position和float实现下拉框
HTML代码
<ul class="nav">
<li>
<a href="#">首页</a>
<div class="sel">
<a href="#">上海</a>
<a href="#">北京</a>
</div>
</li>
<li><a href="#">商城</a></li>
<li><a href="#">收藏</a></li>
</ul>
CSS代码
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
a{
color: black;
text-decoration: none;
}
.nav{
width: 1000px;
height: 50px;
background-color: pink;
margin-left: auto;
margin-right: auto;
}
.nav li{
width: 150px;
height: 50px;
float: left;
text-align: center;
line-height: 50px;
position: relative;
}
.nav:after{
content: "";
display: table;
clear: both;
}
.nav>li:hover{
background-color: deeppink;
}
.nav>li:hover>.sel{
display: block;
}
.nav>li>a:hover{
color: white;
}
.sel{
display: none;
position: absolute;
z-index: 1;
}
.sel>a{
display: block;
width: 150px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: plum;
}
.sel>a:hover{
background-color: deeppink;
color: white;
}
- CSS常用样式讲解
2.1边框角弧度
border-radius: 50%\5px;
改变四个角的弧度
也可以单独设置一个角的弧度
border-top-left-radius
2.2box-shadow给边框设置阴影
h-shadow 设置水平阴影的位置 必须设置
v-shadow 设置垂直阴影的位置 必须设置
blur 设置模糊距离
spread 设置阴影的尺寸
color 设置阴影的颜色
inset(outset) 设置阴影在内部（外部）
2.3文字阴影
text-shadow:h-shadow,v-shadow,blur color
2.4文字溢出属性指定溢出内容属性
p{
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
//white-space指定文字是否换行
}
B今天学会了什么
1.用position和float实现下拉框
HTML代码
<ul class="nav">
<li>
<a href="#">首页</a>
<div class="sel">
<a href="#">上海</a>
<a href="#">北京</a>
</div>
</li>
<li><a href="#">商城</a></li>
<li><a href="#">收藏</a></li>
</ul>
CSS代码
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
a{
color: black;
text-decoration: none;
}
.nav{
width: 1000px;
height: 50px;
background-color: pink;
margin-left: auto;
margin-right: auto;
}
.nav li{
width: 150px;
height: 50px;
float: left;
text-align: center;
line-height: 50px;
position: relative;
}
.nav:after{
content: "";
display: table;
clear: both;
}
.nav>li:hover{
background-color: deeppink;
}
.nav>li:hover>.sel{
display: block;
}
.nav>li>a:hover{
color: white;
}
.sel{
display: none;
position: absolute;
z-index: 1;
}
.sel>a{
display: block;
width: 150px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: plum;
}
.sel>a:hover{
background-color: deeppink;
color: white;
}
- CSS常用样式讲解
2.1边框角弧度
border-radius: 50%\5px;
改变四个角的弧度
也可以单独设置一个角的弧度
border-top-left-radius
2.2box-shadow给边框设置阴影
h-shadow 设置水平阴影的位置 必须设置
v-shadow 设置垂直阴影的位置 必须设置
blur 设置模糊距离
spread 设置阴影的尺寸
color 设置阴影的颜色
inset(outset) 设置阴影在内部（外部）
2.3文字阴影
text-shadow:h-shadow,v-shadow,blur color
2.4文字溢出属性指定溢出内容属性
p{
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
//white-space指定文字是否换行
}
C今天没有掌握什么
都掌握了
