A今日所学
一、下拉菜单的实现
一个下拉框即其下拉内容对应一个ul,li标签
li下加入div作为下拉内容的区域,通过控制div的display属性来显示和隐藏下拉内容
此处重点在于div要是ul或li的子元素,li:hover .dropContent{}这种鼠标指向li时对class为.dropContent的元素起作用的写法其实就是后代选择器,而不是li:hover时,选取所有class为.dropContent的元素,,,这不是js,此处容易看混。
另外,li,div分别设置relative和absolute来精确定位。
二、width继承问题
之前总结过,元素float或者position:absolute时,width,height都分别不可向其父元素,子元素继承宽高。
三、border-top-left-radius等样式
相对于基本的边框曲率样式border-radius,
类似border-top-left-radius的属性可单独修改四个角的曲率。
border-top-left-radius: value;
border-top-right-radius:value;
border-bottom-left-radius:value;
border-bottom-right-radius:value;
四、box-shadow样式
box-shadow: h-shadow v-shadow blur spread color inset;
其中,
h-shadow--必需 水平阴影的位置。允许负值。
v-shadow--必需。垂直阴影的位置。允许负值。
blur--可选。模糊距离。
spread--可选。阴影的尺寸。
color--可选。阴影的颜色。请参阅 CSS 颜色值。
inset--可选。将外部阴影 (outset) 改为内部阴影。
五、text-shadow样式
text-shadow: h-shadow v-shadow blur color;
比box-shadow少两个。
六、文本超长部分自动转为省略号的操作
需要对包含文本的元素设置3个CSS属性:
1.overflow:hidden;
2.text-overflow:elipsis;(ellipsis=omit,ellipsis为n,omit为vt)
3.white-space:nowarp;
B今日已掌握
A今日所学
一、下拉菜单的实现
一个下拉框即其下拉内容对应一个ul,li标签
li下加入div作为下拉内容的区域,通过控制div的display属性来显示和隐藏下拉内容
此处重点在于div要是ul或li的子元素,li:hover .dropContent{}这种鼠标指向li时对class为.dropContent的元素起作用的写法其实就是后代选择器,而不是li:hover时,选取所有class为.dropContent的元素,,,这不是js,此处容易看混。
另外,li,div分别设置relative和absolute来精确定位。
二、width继承问题
之前总结过,元素float或者position:absolute时,width,height都分别不可向其父元素,子元素继承宽高。
三、border-top-left-radius等样式
相对于基本的边框曲率样式border-radius,
类似border-top-left-radius的属性可单独修改四个角的曲率。
border-top-left-radius: value;
border-top-right-radius:value;
border-bottom-left-radius:value;
border-bottom-right-radius:value;
四、box-shadow样式
box-shadow: h-shadow v-shadow blur spread color inset;
其中,
h-shadow--必需 水平阴影的位置。允许负值。
v-shadow--必需。垂直阴影的位置。允许负值。
blur--可选。模糊距离。
spread--可选。阴影的尺寸。
color--可选。阴影的颜色。请参阅 CSS 颜色值。
inset--可选。将外部阴影 (outset) 改为内部阴影。
五、text-shadow样式
text-shadow: h-shadow v-shadow blur color;
比box-shadow少两个。
六、文本超长部分自动转为省略号的操作
需要对包含文本的元素设置3个CSS属性:
1.overflow:hidden;
2.text-overflow:elipsis;(ellipsis=omit,ellipsis为n,omit为vt)
3.white-space:nowarp;