A.今天学到了什么
1.实现一个下拉菜单(运用知识点float,position)
<div class="body">
<ul class="item">
<li>首页
<ul class="item-ul">
<li>个人中心</li>
<li>购物车</li>
</ul>
</li>
<li>菜单</li>
<li>卖家中心</li>
</ul>
</div>
<style>
* {
margin: 0;
padding: 0;
}
.body {
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;
}
</style>
width的继承问题
给父级相对定位,子级绝对定位，子级不会继承父元素的宽度
css3常用样式的讲解
1.边框border-radius 可以将边框设置为圆角
border-radius:value :四个边都会改变
可以单独改变一边
1.border-top-left-radius: value;
2.border-top-right-radius:value;
3.border-bottom-left-radius:value;
4.border-bottom-right-radius:value;
2.box-shadow可以给元素添加阴影
h-shadow
//必需 水平阴影的位置。允许负值。
//必需。垂直阴影的位置。允许负值。
blur
//可选。模糊距离。
spread
//可选。阴影的尺寸。
color
//可选。阴影的颜色
inset
//可选。将外部阴影 (outset) 改为内部阴影。
以上可以合写为：
box-shadow:h-shadow v-shadow blur spread color inset;
<body>
<div class="body"></div>
</body>
<style>
div {
width: 600px;
height: 600px;
background-color: pink;
box-shadow:0 0 10px 10px black inset;
}
</style>
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指定文字是否换行
}
<div></div>
<style>
div{
width: 300px;
height: 300px;
background-color: aqua;
overflow: hidden;
text-overline: ellipsis;
white-space: normal;
}
div:hover {
box-shadow: 0px 0px 10px 10px #cccccc inset;
text-shadow: 3px 3px 1px #ccc;
}
</style>
B我今天掌握了什么
1.实现一个下拉菜单(运用知识点float,position)
<div class="body">
<ul class="item">
<li>首页
<ul class="item-ul">
<li>个人中心</li>
<li>购物车</li>
</ul>
</li>
<li>菜单</li>
<li>卖家中心</li>
</ul>
</div>
<style>
* {
margin: 0;
padding: 0;
}
.body {
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;
}
</style>
width的继承问题
给父级相对定位,子级绝对定位，子级不会继承父元素的宽度
css3常用样式的讲解
1.边框border-radius 可以将边框设置为圆角
border-radius:value :四个边都会改变
可以单独改变一边
1.border-top-left-radius: value;
2.border-top-right-radius:value;
3.border-bottom-left-radius:value;
4.border-bottom-right-radius:value;
2.box-shadow可以给元素添加阴影
h-shadow
//必需 水平阴影的位置。允许负值。
//必需。垂直阴影的位置。允许负值。
blur
//可选。模糊距离。
spread
//可选。阴影的尺寸。
color
//可选。阴影的颜色
inset
//可选。将外部阴影 (outset) 改为内部阴影。
以上可以合写为：
box-shadow:h-shadow v-shadow blur spread color inset;
<body>
<div class="body"></div>
</body>
<style>
div {
width: 600px;
height: 600px;
background-color: pink;
box-shadow:0 0 10px 10px black inset;
}
</style>
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指定文字是否换行
}
<div></div>
<style>
div{
width: 300px;
height: 300px;
background-color: aqua;
overflow: hidden;
text-overline: ellipsis;
white-space: normal;
}
div:hover {
box-shadow: 0px 0px 10px 10px #cccccc inset;
text-shadow: 3px 3px 1px #ccc;
}
</style>
C今天没有掌握的
没有
