弹出层在网页开发中经常用到,以前都是百度一下复制粘贴,从来没有仔细看过也没有理解原理. 直到有一天没有网络,,,然后突然就想到了.这么简单为什么会复制粘贴这么久.总结如下: 1、有个大的div背景设个透明度opacity:0.5;filter:alpha(opacity=57),来个absolute或者fixed定位,最宽最高,z-index比覆盖的页面内容大。 2、做一个内容div也来个绝对定位,z-index更大一点设置一下喜欢的属性耀眼的box-shadow等等 3、设置一个层把他...
嵌套-伪类嵌套 伪类嵌套和属性嵌套非常类似,只不过他需要借助“&”符号一起配合使用 例如:sass .clearfix{ &:before, &:after { content:""; display: table; } &:after { clear:both; ...
HTML DOM基础知识 一、什么是DOM? 1、HTML DOM 定义了访问和操作HTML文档的标准方法。 2、HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。 3、通过 JavaScript,您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档...
第七章,CSS构造块 CSS里有控制基本格式的属性(font-size,color),有控制布局的属性(position,float),还有决定访问者打印时在哪里换页的打印控制元素。CSS还有很多控制项目显示或消失的动态属性,可以用于创建下来列表和其他交互性组件。 构造样式规则 样式表中的每条规则都有两个部分:选择器和声明块。 选择器决定哪些块受影响,声明块由一个或多个属性-值对组成,指定应该做什么。为样式规则添加注释 /* 注释 */,可以是...
@if @if 指令是一个SassScript,它可以根据条件处理样式块,如果条件为true返回一个样式块,反之 false 返回另一个样式块,在Sass 中除了@if之,还可以配合@else if和eles 一起。 例如: //SCSS @mixin blockOrHidden($boolean:true){ @if $boolean { @debug "$boolean is #{$boolean}"; displ...
join() 函数 join()函数是将两个列表连接合并成一个列表。 >>join(10px 20px, 30px 40px) (10px 20px 20px 40px) >>join((blue,red),(#abc,#def)) (#0000ff,#ff0000,#aabbcc,#ddeeff) 不过join()只能将两个列表连接成一个列表,如果直接连接两个以上的列表将会报错 将多个join()函数合并在一起使用 >>join((blue red),join((#abc #def),(#dee #eff))) (#00...
第十六章,表单 HTML5引入了新的表单元素、输入类型和属性,以及内置的对必填字段、电子邮件地址、URL以及定制模式验证。 元素:---- 电子邮件框---- 搜索框---- 电话框---- URL框 以下元素得到部分浏览器支持:---- 日期---- 数字---- 范围-------- \Grapes ---- \Pears ---- 数据列表 Kiwi ...
第十一章,用CSS进行布局 开始布局注意事项 1、内容与显示分离 2、布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3、浏览器问题 注:HTML5 shiv 是少有的必须在head中加载JavaScript的情况之一,否则就不起作用。 关于HTML5 shiv: 与其他主流浏览器不同,IE8及之前版本会忽略它们不原生支持的元素的CSS。HTML5 shiv是专门用于解决这一问题的一段Ja...
Sass Maps 的函数-map-remove($map,$key),keywords($args) map-remove($map,$key) map-remove($map,$key)函数是用来删除当前$map中的某一个$key,从而得到一个新的 map,其返回的值是一个map.他并不能直接从一个map 中删除另一个map,仅能通过删除 map中的某个key 得到新的map $map:map-remove($social - colors,dribble); 返回的是一个新map $map:( ...
@import Sass 支持所有css 的@规则,以及一些Sass 专属的规则,也被称为“指令(directive)”.这些规则在Sass 中具有不同的 功效,详细解释如下。 @import Sass 扩展了CSS 的@import 规则,让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一 的 CSS 文件。 另外,被导入的文件中所定义...
LESS 中的注释 也可以额使用css 中的注释(/**/) 这种方式是可以被编译出来的。 也可以使用// 注释 不会被编译的 变量 声明变量的话一定要用@开头 例如:@变量名称:值; @test_width:300px; .box{ width:@test_width; height:@test_width; background-color:yellow; } 混合-(Mixin) 混合(mixin)变量 例如: .border{border:sol...
第十一章 1、 box-sizing:border-box(让宽度和高度包含内边距和边框) 2、 clear让后面的元素显示在浮动元素的后面 3、 z-index只对只对绝对、固定、相对定位的元素有效 4、 vertical-aligh只用于行内元素 baseline/middle/sub/super/text-top/text-bottom/top/bottom/百分比/值 第十二章 1、 and (min-width/max-width/resolution:value)” href=”” /> 2、 第十三章 1、body{font-family:’ pt_sansregular’;}@font-...
4月7日学到的知识点:一:alt是给图片添加介绍,当图片没加载出来时,会直接显示alt的值,在搜索引擎搜索时也可以让搜索引擎更好的找到这张图。二:标签下载当href的值是一个文件名或者压缩包时就会直接出发浏览器的下载功能去下载这个文件。三:锚点,百度百科常用。点击a标签就会跳到对应id的位置。四:群组选择符#box1,#box2{}选中id为box1和box2的对象。五:类选择符.class六:类型选择符p{};div{}等七:样式优先级1.同级样式默...
即将毕业的软件工程大学生一枚,秋季招聘应聘的是Android,今年来到公司实习,要求做前端开发,所以一切只有现学,现在根据视频来学习,然后开这个博客记录一下自己的学习过程,废话不多说,开写。 4月6日学到的知识点:一:! 声明,注意的意思;doc document 文档的意思;type 类型的意思;html就不用解释了;连在一起的意思就是:注意,文档的类型是HTML。也就是声明你写的文件的文档类型,方便浏览器解析。二:声明代码的编码...
第七章 1、 样式表:选择器和生命块 2、 !important: 某条声明的重要程度比其他高,在末尾添加 3、 属性值:inherit; 是强制继承 4、 1em=16px; 5、 可以接受不带单位的属性:line-height、z-index、opacity 6、 background-color/color/border/box-shadow/text-shadow: rgba(89,0,127,.2);最后一个是透明度 7、 属性:hsl(95,10%,28%) 色相、饱和度、亮度 第八章 1、 在和中加入media=”print/screen/all” 第...