随笔分类 - CSS3技术
关于CSS3技术的学习和应用
摘要：CSS 图片廊 一、示例一 代码： 效果： 二、示例二 代码： 效果：
阅读全文
摘要：CSS Tooltip（提示工具） 提示工具在鼠标移动到指定元素后触发，可以在四个方位显示：头部显示、右边显示、左边显示、底部显示 一、基础提示框(Tooltip) 提示框在鼠标移动到指定元素上显示： 实例解析 HTML) 使用容器元素 (like <div>) 并添加 "tooltip" 类。在鼠
阅读全文
摘要：CSS 下拉菜单 一、基本下拉菜单 当鼠标移动到指定元素上时，会出现下拉菜单。 实例解析 HTML 部分： 我们可以使用任何的 HTML 元素来打开下拉菜单，如：<span>, 或 a <button> 元素。 使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。 使
阅读全文
摘要：CSS 导航栏 一、导航栏 熟练使用导航栏，对于任何网站都非常重要。 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。 二、导航栏=链接列表 作为标准的HTML基础一个导航栏是必须的。 在我们的例子中我们将建立一个标准的HTML列表导航栏。 导航条基本上是一个链接列表，所以使用 <ul>
阅读全文
摘要：CSS 伪元素 CSS伪元素是用来添加一些选择器的特殊效果。 一、语法 伪元素的语法： CSS类也可以使用伪元素： 二、:first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式。 在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的
阅读全文
摘要：CSS Pseudo-classes（伪类） CSS伪类是用来添加一些选择器的特殊效果。 一、语法 伪类的语法： CSS类也可以使用伪类： 二、anchor伪类 在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示 注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a
阅读全文
摘要：CSS 组合选择符 一、简介 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式。 在 CSS3 中包含了四种组合方式: 后代选择器(以空格分隔) 子元素选择器(以大于号分隔） 相邻兄弟选择器（以加号分隔） 普通兄弟选择器（以破折号分隔） 二、后代选择器 后代选择器
阅读全文
摘要：CSS 布局 - 水平 & 垂直对齐 一、元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。 设置到元素的宽度将防止它溢出到容器的边缘。 元素通过指定宽度，并将两边的空外边距平均分配： 注意: 如果没有设置 width 属性(或者设置 100%)，居中对
阅读全文
摘要：CSS Float（浮动） 一、CSS Float（浮动） CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 属性值（"CSS" 列中的数字表示不同的 CSS 版本（CSS1 或 CSS2）定义了该属性
阅读全文
摘要：CSS Position（定位） 一、CSS Position(定位) position 属性指定了元素的定位类型。 position 属性的五个值： static relative fixed absolute sticky 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除
阅读全文
摘要：CSS Display（显示）和Visibility（可见性） 一、简介 display属性设置一个元素应如何显示（隐藏不占用空间），visibility属性指定一个元素应可见还是隐藏（隐藏占用空间）。 二、隐藏元素 - display:none或visibility:hidden 隐藏一个元素可以
阅读全文
摘要：CSS Dimension（尺寸） 一、简介 CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。 二、Dimension（尺寸）属性值 三、示例 （1）示例1：设置不同元素的高度 （2）示例2：使用百分比值设置元素的高度 （3）示例3：使用像素值来设置元
阅读全文
摘要：CSS 分组和嵌套选择器 一、分组选择器 在样式表中有很多具有相同样式的元素。 为了尽量减少代码，你可以使用分组选择器。 每个选择器用逗号分隔。 在下面的例子中，我们对以上代码使用分组选择器： 二、嵌套选择器 它可能适用于选择器内部的选择器的样式。 在下面的例子设置了三个样式： p{ }: 为所有
阅读全文
摘要：CSS padding（填充） 一、Padding（填充） CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。 当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。 单独使用 padding 属性可以改变上下左右的
阅读全文
摘要：CSS Margin（外边距） 一、简介 CSS margin(外边距)属性定义元素周围的空间。 margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。 margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。 margin 属性值： Margi
阅读全文
摘要：CSS Outline（轮廓） 一、CSS 轮廓（outline） 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 CSS outline 属性规定元素轮廓的样式、颜色和宽度。 二、所有CSS 轮廓（outline）属性 "CSS" 列中的数字表示哪个CS
阅读全文
摘要：CSS Border（边框） 一、CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色。 示例效果： 二、边框样式 边框样式属性指定要显示什么样的边界。 border-style属性用来定义边框的样式。 效果： 三、边框宽度 border-width 属性为边框指定宽度。 为边框指定宽
阅读全文
摘要：CSS Box Model（盒子模型） 一、简介 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
阅读全文
摘要：CSS Table（表格） 一、表格边框 border 指定CSS表格边框，使用border属性。 下面的例子指定了一个表格的Th和TD元素的黑色边框： 请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。 为了显示一个表的单个边框，使用 border-collapse属
阅读全文
摘要：CSS Ul（列表样式） CSS列表属性作用如下： 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 一、列表 在HTML中，有两种类型的列表： 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等） 有序列表 - 列表项的标记有数字或字母 使用CSS，可以列出
阅读全文
