Java编程

有人看过慕课网的vue播放器吗

制作全屏背景图片:播放页面的背景图片使用了高斯模糊,由于到css的一样样式不太了解,制作起来耗费了一些事件。背景图片的高斯模糊使用了filter样式:filter:blur(20px)。在查阅资料的时候,发现了filter还有一些强大的功能,就是我们国家公祭日的时候,有些网站就会变成了灰色,就是用了filter这个样式:filter: grayscale(100%);。有兴趣的可以去了解一下。制作中间区域:因为中间区域是需要了装两个div的,一个是歌曲的图片,另一个是歌词。刚开始的时候准备用定位来实现的,发现不行,苦于没法子,就看了源码,才知道是通过inline-block和no-wrap来实现的。制作顶部和底部过渡效果:使用transition标签来制作过渡效果的时候,发现加了样式却没有过渡效果。研究了一下才发现,你不仅要对目标元素添加trasition样式,还要为v-enter-active和v-leave-active添加transition样式,否则没有过渡效果。收获的成果:

有人看过慕课网的vue播放器吗

原因: 项目页面上本身的样式影响到了视频的样式。解决:当你换一个页面,或者将视频独立放在最外面的标签,样式就不会有问题。也就是说,将视频与其他部分独立开,不受其他标签样式的影响。

正值:元素过渡效果不会立即触发,当过了设置的时间值后才会被触发负值:元素过渡效果会从该时间点开始显示,之前的动作被截断0:默认值,元素过渡效果立即执行过渡的触发机制伪类触发:hover:active:focus:checked媒体查询:通过@media属性判断设备的尺寸,方向等JavaScript触发:用JavaScript脚本触发使用transition实现过渡动画的使用步骤在默认样式中声明元素的初始状态样式声明过渡元素最终状态样式,如悬浮状态在默认样式中通过添加过渡函数,添加一些不同的样式。

层(div)和块(span)层:

将内容放到层中,就是将这些内容当成一个整体进行处理,类似于WinForm的Panel.span:div是将内容放到一个矩形的区块中,会影响布局,而span只是把一段内容定义成一个整体进行操作,但不影响布局和显示CSS计量单位:px(像素)、30%(百分比)、em(相对单位)。如:width:50Pxborder-style边框风格;border-color边框颜色;border-width边框宽度(默认是0)display:元素是否显示。可选none(不显示)、block(显示为块级元素,元素前后带有换行符)、inline(显示为内联元素,元素前后没有换行符)等等cursor:鼠标在元素上时显示的光标图标,可选值:cursor(默认光标)、pointer(超链接上的手)、text(输入bean)、wait(沙漏)、help(帮助)等li不显示圆点:list-style-type:none;一般设在li或者ul上样式选择器:有三种分别是标签选择器、class选择器、id选择器标签选择器input{border-color:red;color:blue;}对于指定的标签采用统一的样式class选择器:定义一个命名的样式,然后在用到它的时候设定元素class属性为样式的名称,还可以同时设定多个class,名称之间加空格;样式名称开头加”.”.warning{backgroundcolor:red;}.highlight{font-size:xx-large;cursor:help;}

aaa bb ccc
class选择器也可以针对不同的标签,实现同样的样式名对于不同的标签有不同的样式只要在样式名前加标签名即可,如:input.warning{backgroundcolor:red;}label.warning{font-size:xx-large;cursor:help;}id选择器为指定id的元素设定样式,id前加##username{ font-size:xx-large;}关联选择器:p strong{background-color:yellow;}表示p标签内的strong标签内的内容使用的样式组合选择器:同时为多个标签设定的一个样式,如h1,h2,input{background-color:red;}伪选择器:为标签的不同状态设定不同的样式A:visited:超链接点击过的样式A:active:选中超链接时的样式A:link:超链接未被访问时的状态A:hover鼠标移到超链接时的状态A:visited{text-decoration:none}A:active{text-decoration:none}A:link{text-decoration:none}A:hover{text-decoration:underline}。

class与ID的使用规范区别: ID在页面中有且只能有一个。所以使用ID表示的css样式只能表示一个元素的样式 class在一个页面中可以有多个,也就是说定义一个css样式后,可以有多个元素引用这个class 书写方式: id的书写样式:#title{font-size:18px;color:#333;} class的书写方式:.title{font-size:18px;color:#333;} 命名注意: 1、大的框架比如说header/footer/wrapper/left/right之类的由设计框架之人统一命名。 其他样式名称由小写英文&数字&_来命名,避免使用中文拼音,尽量使用简易的单词组合; 总之,命名要语义化,简明化。

减少 Reflow,如果需要在 DOM 操作时添加样式,尽量使用 增加 class 属性,而不是通过 style 操作样式。

很显然对于整个html页面来说,css部分所代表的样式就显得更为重要一些。因为这些样式能够决定我们的页面整体显示效果。因此js中也提供了几种操作页面元素属性的方法:

Similar Posts

发表评论

邮箱地址不会被公开。 必填项已用*标注

程序员,是在拿时间换钱,还是在编写未来。本站内容搜集整理自网络,如有侵权,请联系删除,联系邮箱:666999@mail.com | 吉ICP备16006688号 | sitemap