首页
学习
活动
专区
圈层
工具
发布

前端入门3-CSS基础声明正文-CSS基础

正文-CSS基础 1.结构和语法 首先需要清楚,CSS 职责是控制 HTEM 文档里的文本内容在网页上样式呈现的效果,写的每一个样式最终是通过选择器作用到具体的元素上面。 工作原理 ?...如果在解析 HTML 文档过程中发现有通过 标签引用了外部的 CSS 文件时,那么浏览器会去下载相对应的 CSS 文件。...css结构 以上是一个 CSS 的典型结构,总共由两部分组成:选择器 + 样式 {} 大括号内部的都是具体的某种样式,可用来控制元素的背景、大小、排版位置等样式效果。...,并且需要更新 CSS 的时候只要在一个地方更新。...css" rel="stylesheet" href="css/nms.css"> 2.选择器 选择器,顾名思义,就是将 css 代码选择到 HTML 文档中具体的元素对象

1.2K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    前端特效开发 | JS实现聚光灯看图效果

    2.2 功能逻辑分析 首先动态的获取了当前每张图片的大小,并设定一个透明度变量; 然后借助JQ的hover()方法,实现鼠标移入移出的图片展示; 最后当用户的鼠标移开了无序列表时,还原当前图片的不透明状态.... $('.spotlight ul li').hover(function(){ //...找到它里面的图像,并添加活动类,并更改不透明度为1(无透明度) $(this).find('...img').addClass('active').css({ 'opacity' : 1 }); // 获取其他列表项,并更改其中的图像的不透明度为我们在Spotlight...,如下操作: // 当鼠标离开无序列表时... $('.spotlight ul').on('mouseleave',function(){ // 找到图像并将不透明度更改为1(完全可见)...cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> css">

    6.3K50

    第73天:jQuery基本动画总结

    在参数对应的时间内,元素会发生显示/隐藏的改变,在改变的过程中会把元素的高、宽、不透明度进行一系列动画效果。....fadeOut( [duration ], [ complete ] ) 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。...这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。 字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。...注意: - 淡入的动画原理:操作元素的不透明度从0%逐渐增加到100% - 如果元素本身是可见的,不对其作任何改变。...fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。可选的 callback 参数是该函数完成后所执行的函数名称。

    5.5K10

    JQuery中的动画

    一、show()方法和hide()方法   这两种方法是jQuery动画的最基本方法。...如$("element").hide(1000); show()和hide()方法在执行过程中会同时增加/减少内容的高度,宽度和不透明度,直到它们完全显示或消失。...二、fadeIn()方法和fadeOut()方法 与show()方法不同的是,fadeIn()方法和fadeOut()方法只改变元素的不透明度。    ...fadeOut()方法指在指定的一段时间内降低元素的不透明度,直到元素完全消失。fadeIn()则刚好相反。...如以下代码: 其实这段代码的本意是:在点击a元素后,让该元素在3秒内先向距左200px,同时高度改为300px,不透明度变为1,然后完成上面的动作后该元素在又一个3秒内距上200px,高度变为300px

    4.9K30

    05-老马jQuery教程-动画

    语法:fadeTo([[speed],opacity,[easing],[fn]]) 概述 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。...这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。...自定义动画 jQuery封装了对css中数值属性的动画效果的封装,可以让开发人员对数值类的属性进行自定义的动画。...当.finish()在一个元素上被调用,立即停止当前正在运行的动画和所有排队的动画(如果有的话),并且他们的CSS属性设置为它们的目标值(所有动画的目标值)。所有排队的动画将被删除。...但是,不同的是,.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值。 参数queue:String类型,停止动画队列中的名称。

    3.3K50

    05-老马jQuery教程-动画

    语法:fadeTo([[speed],opacity,[easing],[fn]]) 概述 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。...这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。...自定义动画 jQuery封装了对css中数值属性的动画效果的封装,可以让开发人员对数值类的属性进行自定义的动画。...当.finish()在一个元素上被调用,立即停止当前正在运行的动画和所有排队的动画(如果有的话),并且他们的CSS属性设置为它们的目标值(所有动画的目标值)。所有排队的动画将被删除。...但是,不同的是,.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值。 参数queue:String类型,停止动画队列中的名称。

    3.3K00

    透明效果实现:jquick-pdf元素opacity透明度配置教程

    25透明效果实现:jquick-pdf元素opacity透明度配置教程引入报告里的水印、辅助色块和盖章底图一旦盖住正文,读者第一反应就是“文件做得不专业”。...常见的补救是把颜色调浅,但调浅只改变色值,元素本身仍然是不透明的实心块,照样压住下面的文字。真正需要的是让元素以一个不透明度绘制:底层文字隐约可见,遮罩层又保留存在感。...取值区间是0~1:0表示完全透明,元素不可见;1表示完全不透明,与不设置透明度接近。业务里真正好用的往往是中间值,例如0.45或0.5,既能看出遮罩存在,又不干扰正文阅读。...这四类场景的共同点是透明元素只承担视觉提示职责,不承载必须读取的关键数据,因此正文和关键指标应当放在不透明元素里。透明度与布局的关系透明度只影响绘制时的不透明程度,不参与布局计算,这一点很关键。...下面的例子先画半透明辅助块,再画不透明正文块,两层在结构上分开书写,避免透明度意外影响正文。注意Java字符串里的双引号需要转义,模板里的文本字面量仍用单引号。

    8000

    jquery nicescroll 配置参数

    jQuery滚动条插件兼容ie6+、手机、ipad http://www.areaaperta.com/nicescroll/ jQuery(function($){ $("#scrollInner...配置参数 当调用“niceScroll”你可以传递一些参数来定制视觉方面: cursorcolor - 十六进制改变光标颜色,默认值是“#000000” cursoropacitymin - 改变不透明度非常光标处于非活动状态...(scrollabar“隐藏”状态),范围从1到0, 默认为0(隐藏) cursoropacitymax - 改变不透明度非常光标处于活动状态(scrollabar“可见”状态),范围从1到0,默...认值是1(完全不透明) cursorwidth - 像素光标的宽度,默认值为5(你可以写“加入5px”太) cursorborder - 游标边框css定义,默认为“1px的固体#FFF” cursorborderradius...显示“抢”图标的div touchbehavior = true时,(默认:true) autohidemode,如何隐藏滚动条的作品,真=默认/“光标”=只进游标隐藏/ false =不隐藏背景,CSS

    6.1K80

    jQuery里面的动画

    jQuery里面的事件 一、基本动画 二、滑动动画 三、淡入淡出动画 四、自定义动画 五、获取动画队列 参数说明 参数 说明 speed 三种预定速度之一的字符串(“slow”,“normal”, or...jQuery动画暂不支持css3属性 切换 停止 获取</button...function(){ console.log("动画完成"); }); }) 三、淡入淡出动画 方法 概述 fadeIn([s],[e],[fn]) 通过不透明度的变化来实现所有匹配元素的淡入效果...,并在动画完成后可选地触发一个回调函数 fadeOut([s],[e],[fn]) 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数 fadeTo([[s],o,[e...],[fn]]) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数 fadeToggle([s,[e],[fn]]) 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果

    2.7K20
    领券