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;(指定文字是否换行)
}