随笔 - 1162
文章 - 0
评论 - 16
阅读 -
59万
随笔分类 - CSS
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清除浮动
摘要:一、为什么要清除浮动 浮动本质是用来做文字混排效果的,但是拿来做布局用,则会有很多的问题出现。 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响,为了解决这些问题,就需要在该元素中清除浮动,准确地说,并不是清除浮动,而是清除浮动后造成的影响。 二、清除浮动的本质 清除浮动主要为了
阅读全文