九门宁生

导航

随笔分类 -  CSS3

Cascading Style Sheets Level 3
transition过渡2D、3D效果
摘要:过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。 帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片 在CSS3里使用transition可以实现补间动画( 阅读全文

posted @ 2019-08-22 11:34 九门宁生 阅读(965) 评论(0) 推荐(0)

前端布局
摘要:原文网址:https://www.cnblogs.com/soyxiaobi/p/9594557.html 一、静态布局(Static Layout) 1. 布局概念 最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overf 阅读全文

posted @ 2019-08-22 11:22 九门宁生 阅读(180) 评论(0) 推荐(0)

滑动门简介
摘要:先来体会下现实中的滑动门,或者你可以叫做推拉门: 滑动门出现的背景 制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一样多,咋办? 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。它从新的角度构 阅读全文

posted @ 2019-08-22 11:18 九门宁生 阅读(354) 评论(0) 推荐(0)

伸缩布局
摘要:CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。 主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向 侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的 方向:默认主轴从左向右,侧轴默认从上到下 主 阅读全文

posted @ 2019-08-22 11:18 九门宁生 阅读(121) 评论(0) 推荐(0)

字体图标
摘要:图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真。 我们后面会学习移动端响应式,很多情况下希望我们的图标是可以缩放的。此时,一个非常重要的技术出现了,额不 阅读全文

posted @ 2019-08-22 11:11 九门宁生 阅读(162) 评论(0) 推荐(0)

精灵技术
摘要:一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。 精灵技术本质 简单地说,CSS精灵是一种处理 阅读全文

posted @ 2019-08-22 11:06 九门宁生 阅读(175) 评论(0) 推荐(0)

用户界面样式
摘要:CSS用户界面样式 所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了。 防止表单域拖拽 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 鼠标放我身上查看效果哦: 阅读全文

posted @ 2019-08-22 11:01 九门宁生 阅读(225) 评论(0) 推荐(0)

元素的显示和隐藏
摘要:在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow。 他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。 最常见的是网站广告,当我们点击类似关闭不见了,但是我们重新刷新页面,它们又会出现和你玩躲猫猫!! dis 阅读全文

posted @ 2019-08-22 10:53 九门宁生 阅读(370) 评论(0) 推荐(0)

定位position
摘要:如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上。 PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不开定位,特别是后面的js特效,天天和定位打交道。不要抵触它,反而要爱上它,它可以让我们工作更加轻松哦! 为什么要用定位? 那么 阅读全文

posted @ 2019-08-22 10:52 九门宁生 阅读(262) 评论(0) 推荐(0)

版心和布局流程
摘要:阅读报纸时容易发现,虽然报纸中的内容很多,但是经过合理地排版,版面依然清晰、易读。同样,在制作网页时,要想使页面结构清晰、有条理,也需要对网页进行“排版”。 “版心”是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示,常见的宽度值为960px、980px、1000px、1200px等。 布 阅读全文

posted @ 2019-08-22 10:39 九门宁生 阅读(279) 评论(0) 推荐(0)

浮动float、浮动影响和清除浮动
摘要:普通流(normal flow) 这个单词很多人翻译为 文档流 , 字面翻译 普通流 或者标准流都可以。 前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置? CSS的定位机制有3种:普通流(标准流)、浮动和定位。 html语言当中另外一个相当重要的概念 标准流!或 阅读全文

posted @ 2019-08-22 10:02 九门宁生 阅读(764) 评论(0) 推荐(1)

标签显示模式(display)
摘要:非洲黑人: 皮肤内黑色素含量高,以吸收阳光中的紫外线,保护皮肤内部结构免遭损害,头发象羊毛一样卷曲,使每根卷发周围都有许多空隙,空隙充满空气,卷发有隔热作用。 欧洲白人: 生活寒带或着是说常年温度较低的地缘,加上年日照时间少,身体的黑色素沉淀比较少``所以出现皮肤、发色、瞳晕都呈现浅色 亚洲黄人: 阅读全文

posted @ 2019-08-22 09:44 九门宁生 阅读(551) 评论(0) 推荐(1)

CSS样式表的书写位置
摘要:行内式(内联样式) 是通过标签的style属性来设置元素的样式,其基本语法格式如下: 语法中style是标签的属性,实际上任何HTML标签都拥有style属性,用来设置行内式。其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标签及嵌套在其中的子标签起作用。 内部样式表(内嵌式) 内嵌式 阅读全文

posted @ 2019-08-22 09:17 九门宁生 阅读(3087) 评论(0) 推荐(0)

CSS动画效果
摘要:文章摘自:https://www.cnblogs.com/penghuwan/p/11391215.html#_label1 目录 前言 一.浮光掠影 二.发光球体 三.圆环进度条 四.三角形 五.有色到透明的渐变 六.模糊效果和毛玻璃效果 七.斜角标签 技术总结 文章摘自:https://www. 阅读全文

posted @ 2019-08-22 09:15 九门宁生 阅读(580) 评论(0) 推荐(0)

盒子模型
摘要:其实,CSS就三个大模块: 盒子模型 、 浮动 、 定位,其余的都是细节。要求这三部分,无论如何也要学的非常精通。 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成 阅读全文

posted @ 2019-08-21 19:41 九门宁生 阅读(380) 评论(0) 推荐(0)

三大特性
摘要:层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。 CSS层叠性 所谓层叠性是指多种CSS样式的叠加。 是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉 比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时 阅读全文

posted @ 2019-08-21 19:37 九门宁生 阅读(251) 评论(0) 推荐(0)

css背景
摘要:CSS 背景(background) CSS 可以添加背景颜色和背景图片,以及来进行图片设置。 背景图片(image) 语法: 参数: none : 无背景图(默认的) url : 使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中(只有CSS3才可以 阅读全文

posted @ 2019-08-21 19:34 九门宁生 阅读(133) 评论(0) 推荐(0)

背景渐变
摘要:以前,我们要实现这种渐变,可能要用 Photoshop 或 Fireworks 创建一个渐变图形,然后使用 background-image 属性把渐变图形放在元素的背景中。 现在,CSS支持渐变背景,可以理解为Web浏览器即时创建的图像。所以,渐变也使用常规的 background-image 属 阅读全文

posted @ 2019-08-21 18:55 九门宁生 阅读(424) 评论(0) 推荐(0)

css选择器总结
摘要:本文来自:https://www.cnblogs.com/z937741304/p/7901086.html css里的选择器有好多种,下面我就把我了解到的写一写,如果有不全的或者有误的欢迎留言指正,万分感谢。 一、选择器 1、* 通配符选择器 这个选择器是匹配页面中所有的元素,一般用来清除浏览器的 阅读全文

posted @ 2019-08-21 17:51 九门宁生 阅读(431) 评论(0) 推荐(0)