day07

作者: IcyRoc | 来源:发表于2017-11-15 02:27 被阅读0次

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;

C今日未掌握

相关文章

网友评论

      本文标题:day07

      本文链接:https://www.haomeiwen.com/subject/uygqvxtx.html