文章分类 -  前端CSS

CSS3七:动画
摘要:CSS3 动画 CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts。 CSS3动画 CSS3 @keyframes 规则 要创建CSS3动画,你将不得不了解@keyframes规则。 @keyframes规则是创建动画。 @keyframes规则内指定一 阅读全文

posted @ 2018-07-10 23:20 myworldworld 阅读(60) 评论(0) 推荐(0)

CSS3六:过渡
摘要:2D、3D转换略 CSS3 过渡 CSS3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript。用鼠标移过下面的元素: 用鼠标移过下面的元素: SS3Transition 它是如何工作? CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现 阅读全文

posted @ 2018-07-10 23:18 myworldworld 阅读(75) 评论(0) 推荐(0)

CSS3五:字体
摘要:CSS3 @font-face 规则 以前CSS3的版本,网页设计师不得不使用用户计算机上已经安装的字体。 使用CSS3,网页设计师可以使用他/她喜欢的任何字体。 当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。 您所选择的字体在新的CSS3版本有关于@fo 阅读全文

posted @ 2018-07-10 23:12 myworldworld 阅读(68) 评论(0) 推荐(0)

CSSC3四:CSS3 文本效果
摘要:CSS3 文本效果 CSS3中包含几个新的文本特征。 在本章中您将了解以下文本属性: text-shadow word-wrap text-shadow word-wrap CSS3的文本阴影 CSS3中,text-shadow属性适用于文本阴影。 您指定了水平阴影,垂直阴影,模糊的距离,以及阴影的 阅读全文

posted @ 2018-07-10 23:11 myworldworld 阅读(225) 评论(0) 推荐(0)

CSSC3三:渐变
摘要:CSS3 渐变(gradients)可以让您在两个或多个指定的颜色之间显示平稳的过渡。 以前,您必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),您可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的 阅读全文

posted @ 2018-07-10 23:02 myworldworld 阅读(938) 评论(0) 推荐(0)

CSSC3二:CSS3 背景
摘要:CSS3 背景 CSS3中包含几个新的背景属性,提供更大背景元素控制。 在本章您将了解以下背景属性: background-size background-origin background-size background-origin 您还将学习如何使用多重背景图像。 浏览器支持 Internet 阅读全文

posted @ 2018-07-10 22:59 myworldworld 阅读(275) 评论(0) 推荐(0)

CSSC3一:CSS3 边框(Borders)
摘要:用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop。 在本章中,您将了解以下的边框属性: border-radius box-shadow border-image 用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Pho 阅读全文

posted @ 2018-07-10 22:57 myworldworld 阅读(397) 评论(0) 推荐(0)

二十一:基础实例
摘要:CSS 实例 « CSS 总结 CSS 组合选择符 » « CSS 总结 CSS 组合选择符 » CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面的其余部分滚动) 阅读全文

posted @ 2018-07-10 22:53 myworldworld 阅读(98) 评论(0) 推荐(0)

二十:属性选择器
摘要:具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id 属性选择器 下面的例子是把包含标题(title)的所有元素变为蓝色: 属性和值选择器 下面的例子是把属性为 title="ziqiangxuetang" 的标签更改样式: 属性和值的选择器 - 多值 下面是包含指 阅读全文

posted @ 2018-07-10 22:52 myworldworld 阅读(67) 评论(0) 推荐(0)

十九:CSS 媒体类型
摘要:媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。 媒体类型 一些CSS属性只设计了某些媒体。例如"voice-family"属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如,"font-size"属性可用于屏幕和印刷媒体,但有 阅读全文

posted @ 2018-07-10 22:49 myworldworld 阅读(185) 评论(0) 推荐(0)

十八:CSS 图片廊、图像透明/不透明、图像拼合技术
摘要:一、CSS 图片廊 二、图像透明/不透明 使用CSS很容易创建透明的图像。 注意:CSS Opacity属性是W3C的CSS3建议的一部分。 实例1 - 创建一个透明图像 CSS3中属性的透明度是 opacity. 首先,我们将向您展示如何用CSS创建一个透明图像。 正常的图像 相同的图像带有透明度 阅读全文

posted @ 2018-07-10 22:47 myworldworld 阅读(205) 评论(0) 推荐(0)

十七:CSS 导航栏
摘要:导航栏 熟练使用导航栏,对于任何网站都非常重要。 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。 导航栏=链接列表 作为标准的HTML基础一个导航栏是必须的 。在我们的例子中我们将建立一个标准的HTML列表导航栏。 导航条基本上是一个链接列表,所以使用 <ul> 和 <li>元素非常有 阅读全文

posted @ 2018-07-10 22:42 myworldworld 阅读(104) 评论(0) 推荐(0)

十六:CSS 伪类和CSS 伪元素
摘要:CSS伪类是用来添加一些选择器的特殊效果。 语法 伪类的语法: selector:pseudo-class {property:value;} selector:pseudo-class {property:value;} CSS类也可以使用伪类: selector.class:pseudo-cla 阅读全文

posted @ 2018-07-10 22:39 myworldworld 阅读(118) 评论(0) 推荐(0)

十五:组合选择器
摘要:2 阅读全文

posted @ 2018-07-10 22:33 myworldworld 阅读(67) 评论(0) 推荐(0)

十四:水平对齐(Horizontal Align)
摘要:块元素对齐 块元素是一个元素,占用了全宽,前后都是换行符。 块元素的例子: <h1> <p> <div> 文本对齐,请参阅 CSS文本 章节。. 在这一章中,我们会告诉你块元素如何水平对齐布局。 中心对齐,使用margin属性 块元素可以把左,右页边距设置为"自动"对齐。 Note: 在IE8中使用 阅读全文

posted @ 2018-07-10 22:32 myworldworld 阅读(422) 评论(0) 推荐(0)

十三:CSS Float(浮动)
摘要:CSS的Float(浮动),元素可以围绕其他元素向左或向右被推动 Float(浮动),往往是用于图像,但它在布局时一样非常有用。 元素怎样浮动 元素的水平方向浮动意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或右。通常,这意味着尽所有的可能在所有包含元素的左侧或右侧的。 浮动元素之后 阅读全文

posted @ 2018-07-10 22:29 myworldworld 阅读(68) 评论(0) 推荐(0)

十二:CSS Positioning(定位)
摘要:Positioning(定位) CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么。/p> 元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法 阅读全文

posted @ 2018-07-10 22:27 myworldworld 阅读(166) 评论(0) 推荐(0)

十一:Display(显示) 与 Visibility(可见性)
摘要:隐藏元素 - display:none或visibility:hidden 隐藏一个元素可以通过display属性设置为"none"或"hidden"属性的可见性。但是,请注意这两种方法产生不同的结果 visibility:hidden可以让您隐藏某个元素,但它仍然需要像以前一样的空间。该元素将被隐 阅读全文

posted @ 2018-07-10 22:22 myworldworld 阅读(111) 评论(0) 推荐(0)

十:CSS 尺寸 (Dimension)
摘要:CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样,它允许你增加行间距。 所有CSS 尺寸 (Dimension)属性 "CSS" 列中的数字表示哪个CSS版本定义了该属性 (CSS1 or CSS2)。 阅读全文

posted @ 2018-07-10 22:17 myworldworld 阅读(88) 评论(0) 推荐(0)

九:分组和嵌套
摘要:Grouping Selectors:分组 在样式表中有很多具有相同样式的元素。 h1{color:green;}h2{color:green;}p{color:green;} h1{color:green;}h2{color:green;}p{color:green;} 为了尽量减少代码,你可以使 阅读全文

posted @ 2018-07-10 22:15 myworldworld 阅读(88) 评论(0) 推荐(0)

导航