1我今天学了什么
1.1实现一个下拉菜单
<style>
*{margin:0;padding:0}
.row:before{
display: table;
content:''
}
.row:after{
display: table;
content:'';
clear:both;
}
.header{width:1000px;height:40px;background:pink;line-height: 40px;margin-left:auto;margin-right:auto}
ul{list-style: none;}
a{text-decoration: none}
li{float:left;width:100px;}
li.dropDown{position:relative}
.dropContent{position:absolute;width:100px;background-color: deeppink;display:none;box-shadow: 0 1px 2px 0px gainsboro}
.row a{display:block;text-align: center;color:white}
a:hover{color:gainsboro;background:palevioletred}
.dropDown:hover .dropContent{
display: block;
}
1.2width继承问题
给父级相对定位,子级绝对定位,子级不会继承父元素的宽度
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;改变youxiaj
2.2box-shadow 可以给元素添加阴影
box-shadow:h-shadow v-shadow blur
spread color inset
h -shadow 水平偏移
v-shadow 垂直偏移
blur 高斯模糊
spread 阴影尺寸
color 颜色
inset 将外部阴影改为内部阴影
2.3文字效果
设置文字阴影
text-shadow:h-shadow v-shadow blur color;
文本溢出 属性指定如何显示溢出内容
p{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;(指定文字是否换行)
}
2.我掌握了的
1.2width继承问题
给父级相对定位,子级相对定位,子级不会继承父元素的宽度
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;改变youxiaj
2.2box-shadow 可以给元素添加阴影
box-shadow:h-shadow v-shadow blur
spread color inset
h -shadow 水平偏移
v-shadow 垂直偏移
blur 高斯模糊
spread 阴影尺寸
color 颜色
inset 将外部阴影改为内部阴影
2.3文字效果
设置文字阴影
text-shadow:h-shadow v-shadow blur color;
3我没掌握的
1.1实现一个下拉菜单
<style>
*{margin:0;padding:0}
.row:before{
display: table;
content:''
}
.row:after{
display: table;
content:'';
clear:both;
}
.header{width:1000px;height:40px;background:pink;line-height: 40px;margin-left:auto;margin-right:auto}
ul{list-style: none;}
a{text-decoration: none}
li{float:left;width:100px;}
li.dropDown{position:relative}
.dropContent{position:absolute;width:100px;background-color: deeppink;display:none;box-shadow: 0 1px 2px 0px gainsboro}
.row a{display:block;text-align: center;color:white}
a:hover{color:gainsboro;background:palevioletred}
.dropDown:hover .dropContent{
display: block;
}
文本溢出 属性指定如何显示溢出内容
p{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;(指定文字是否换行)
}