随笔 - 1162
文章 - 0
评论 - 16
阅读 -
59万
07 2019 档案
CSS 总结 [目录]
摘要:一、CSS 基础 1、CSS 初识 2、CSS 用法和特性 二、CSS 选择器 1、基本选择器 2、组合选择器 3、属性选择器 4、伪类选择器 5、伪元素选择器 三、CSS 字体样式 四、CSS 文本 1、CSS2 文本样式 2、CSS3 新增文本样式 五、CSS 标签显示模式 六、CSS 链接 七
阅读全文
32CSS之盒子居中的方法
摘要:一、盒子垂直居中的方法 1、先让盒子的上下边缘和父盒子的水平中心线重叠,,然后再让子盒子往回移动自身一半的距离 <div class="father"> // 结构 <div class="son"></div></div>/* 通过 transform 属性来移动*/.father { width
阅读全文
31CSS3-小黄人案例
摘要:使用 CSS3 和 HTML5 制作一个小黄人。 结构代码: <div class="wrap"> <!-- 头发 --> <div class="hair"> <div class="hair_1"></div> <div class="hair_2"></div> </div> <!-- 身体
阅读全文
30CSS之圣杯布局&双飞翼布局
摘要:圣杯布局 和 双飞翼布局 是重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。 遵循了以下要点: 两侧宽度固定,中间宽度自适应 中间部分在 DOM 结构上优先,以便先行渲染 允许三列中的任意一列成为最高列 只需要使用一个额外的<div>标签 圣杯布局 1、结构:
阅读全文
29CSS3渐变
摘要:渐变分为以下两类: 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 径向渐变(Radial Gradients)- 由它们的中心定义 但是渐变色的兼容性问题很严重,在这里介绍一个线性渐变: 语法格式: background:-webkit-linear-gradie
阅读全文
28浏览器前缀
摘要:渐进增强 (progressive enhancement): 针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级( graceful degradation): 一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
阅读全文
27CSS3弹性盒布局
摘要:一、伸缩布局 CSS3 在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。 二、定义 Flexbox 语法格式: display: flex | inline-flex; Flexbox 由伸缩容器和伸缩项目组成。通过
阅读全文
26CSS多列布局
摘要:CSS3 新增多列布局适合排版很长的文字内容,让其多列显示。 一、多列布局 语法格式: columns:column-width | column-count; column-width:定义每列的宽度; columen-count:定义列数; columns 属性初始值根据元素个别属性而定,它适用
阅读全文
25CSS之BFC
摘要:一、BFC(块级格式化上下文) BFC(Block formatting context),直译为"块级格式化上下文"。 BFC 是指一个独立的块级渲染区域,只有 Block-level BOX 参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。 二、具有 BFC 条件的元素 可以
阅读全文
24CSS3动画
摘要:动画是 CSS3 中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。 语法格式: animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向; 一、设置动画属性 1、定义动画名称 语法格式: animation-name:none |
阅读全文
23CSS3-3D变换
摘要:CSS3 中的 3D 坐标系与上述的 3D 坐标系是有一定区别的,相当于其绕着 X 轴旋转了 180 度,如下图 x 轴即水平位置,左边是负的,右边是正的; y 轴即垂直位置,上面是负的,下面是正的; z 轴即视线到屏幕里面,屏幕里面的负的,外面是正的。 一、定义旋转 1、rotateX() 该函数
阅读全文
22CSS3-2D变换
摘要:CSS2D transform 表示 2D 变换,目前获得了各主流浏览器的支持,是 CSS3 中具有颠覆性的特征之一,可以实现元素的位移、旋转、倾斜、缩放,甚至支持矩阵方式,可以取代大量之前只能靠 Flash 才可以实现的效果。 一、定义移动(translate) translate() 函数能够重
阅读全文
21CSS过渡动画
摘要:一、过渡 过渡(transition)是 CSS3 中具有颠覆性的特征之一,可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。 在 CSS3 里使用 transition 可以实现补间动画(过渡效果),并且当前元素只要有“属性”发生变
阅读全文
20CSS滑动门案例
摘要:一、什么是滑动门特效 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了 CSS 滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强。 最常见于各种导航栏的滑动门。 二、核心技术 核心技术就是利用 CSS 精灵(主要是背景位置)和
阅读全文
19CSS精灵技术[sprite]
摘要:一、精灵技术产生的背景 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。 然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接
阅读全文
18CSS字体图标
摘要:一、字体图标 图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http 请求",这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真。 我们后面会学习移动端响应式,很多情况下希望我们的图标是可以缩放的。此时,一个非常重要的
阅读全文
17CSS元素的显示与隐藏
摘要:在 CSS 中有三个显示和隐藏的单词比较常见,分别是 display、visibility 和 overflow。 一、display 显示 该属性设置或检索对手是否及如何显示。 语法格式: display:属性值; block:以块级元素显示; inline:以行级元素显示; inline-blo
阅读全文
16CSS定位
摘要:一、定位(position) 定位布局允许精确定义网页元素的显示位置,可以是绝对位置,也可以是相对位置。 二、元素的定位属性 元素的定位属性主要包括定位模式和边偏移两部分。 1、定位模式 语法格式: 选择器{ position:属性值;} 2、边偏移 以后定位要和边偏移来搭配使用,从而达到某一元素在
阅读全文
15CSS清除浮动
摘要:一、为什么要清除浮动 浮动本质是用来做文字混排效果的,但是拿来做布局用,则会有很多的问题出现。 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响,为了解决这些问题,就需要在该元素中清除浮动,准确地说,并不是清除浮动,而是清除浮动后造成的影响。 二、清除浮动的本质 清除浮动主要为了
阅读全文
14CSS浮动
摘要:一、标准流(normal flow) 标准流又称为文档流,普通流。 标准流实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思。比如块级元素会独占一行,行内元素会按顺序依次前后排列;按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。 二、浮动(float) 浮动最早是用来
阅读全文
13CSS3完善盒模型
摘要:CSS3 改善了传统盒模型结构,增强了盒子构成要素的功能,扩展了盒模型显示的方式。 改善结构:为盒子新增轮廓区; 增强功能:内容区增强 CSS 自动添加内容功能,增强内容移除、换行处理;允许多重定义背景图,控制背景图显示方式等;增加背景图边框,多重边框,圆角边框等功能;完善 margin:auto;
阅读全文
12CSS盒子模型
摘要:所谓盒子模型(Box Model)就是把 HTML 页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。 所有的文档元素(标签)都会生成一个矩形框,我们成为元素框(eleme
阅读全文
11CSS表格
摘要:CSS 为表格定义了 5 个专用属性。 一、border-collapse 该属性用于定义表格的行和单元格的边是合并在一起的还是按照标准的 HTML 样式分开的。 语法: border-collapse: separate | collapse separate:不合并单元格边框 collapse:
阅读全文
10CSS列表
摘要:CSS 为列表结构定义了几个专门属性,如下说明: 一、list-style-type 设计项目符号类型 使用该属性定义列表项目符号的类型,取值说明如下: 二、list-style-image 自定义项目符号 使用该属性允许指定一个外部图标文件,来满足个性化设计需求。 语法: list-style-i
阅读全文
09CSS链接
摘要:使用超链接的时候,一般都会根据网站或页面设计风格重新定义超链接的样式,来提高用户的操作体验。 一、伪类 与链接相关的伪类之前学习过,参考这里复习:伪类选择器 二、定义下划线样式 在文本样式的时候学习过,参考这里复习:字体样式 三、定义鼠标样式 在默认状态下鼠标经过超链接时显示为手型,可以使用 cur
阅读全文
08CSS背景
摘要:CSS 可以添加背景颜色和背景图片,以及来进行图片设置。 说明: 一、background-color 背景颜色 可以使用该属性给一个元素定义背景颜色。 语法: background-color: color 值; color 值可以是颜色单词,十六进制等 W3C 允许的颜色值。 背景透明(CSS3
阅读全文