HTML的精髓在于文本的、结构化的数据格式。 这样的设计使得搜索引擎、屏幕阅读器、文本处理软件能够非常方便地读取信息。 尤其是CSS样式的分离与HTML5语义标签的提出，使得HTML的这一特性更加明显。 然而对于Web设计师，他们需要除文本外更加丰富的表示形式。 幸运的是CSS的分离，使得我们在不添加标记的同时，可以在页面上显示图片。 下面来看看这些有用的CSS背景图技术。 基本使用 在CSS中，通过 background 属性可以设置背...
目录 [1]背景颜色 [2]背景图像 [3]背景平铺 [4]背景定位 [5]背景关联 [6]背景原点 [7]背景裁切 [8]背景尺寸 [9]复合背景 前面的话 背景和字体一样，是一个复合属性，而且它是一个使用频率很高的属性。在CSS3中，背景属性在保持以前用法的同时，增加了新的相关属性。本文将详细介绍关于背景的知识 background-color背景颜色 背景色接受所有合法的颜色，还可以接受...
在网站的欢迎页面加入 HTML5 视频 越来越受欢迎,因为它们可以创造一个有趣的视界环境，来吸引游客的注意力。 如果使用得当, 视频 可以通过讲述一个故事让游客更好地了解网站从而建立忠诚度。 还可以建立一个好的氛围,从而取代单调静态的背景图像。 由于 HTML5 支持各种新的多媒体，你可以分享高质量、大尺寸的视频娱乐来激励观众。 Art, Copy & Code ONY Agency Made by Hangar Lois Jeans Spring ...
css3背景颜色渐变属性 兼容性测试基础环境为：windows系统；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法： <linear-gradient>：linear-gradient([ ,]? <color-stop>[, <color-stop>]+); ：[ left | right ]? [ top | bottom ]? || ? <color-stop>： [ | ]? 取值： left： 设置左边为渐变起点的横坐标值。 right： 设置右边为渐变起点的横坐标值。 top： 设置顶部为渐变起点...
边框 和边框相关的属性如下。 border-width 用于设置边框的宽度，可选择包括： 1）：将边框宽度设为以CSS度量单位（如em、px、cm）表达的长度值； 2）：将边框宽度值设为边框绘制区域的宽度的百分数； 3）thin、medium和thick：将边框宽度设为预设宽度，这三个值的具体意义是由浏览器定义，三个值代表的宽度一次增大，边框宽度的默认值是medium。 border-style 用于设置绘制边框使...
只把关键部分贴出来，这是我的实现思路： 思路就是通过点击div实现播放和停止。用flag得知目前的状态，播放的话就停止，反之亦然。但是不知道怎么控制audio这个标签里的音乐播放，百度了半天，都说的是document.getElementById("music").play()和document.getElementById("music").pause()，但是我试了根本没这两种方法额。。。 回复讨论(解决方案) 就是用do...
昨天在做输入框的时候，遇到了点问题，先给效果图吧。 效果图如下： 源代码如下： #search-input{ border: none; border-radius: 6px; height: 35px; width: 62%; margin-left: 3%; margin-ri...
我想问一下 我想给一个select元素里的option 在鼠标悬浮的时候改变它的 背景颜色和字体颜色 我select>option:hover{}这样没有效果 为什么呢 该怎么写才对呢？ 回复讨论(解决方案) option的:hover样式是浏览器系统默认且固定的，用户无法修改 你只能做个模拟的select option的:hover样式是浏览器系统默认且固定的，用户无法修改 网上很多模拟select写的 div+ul 你可以看看
《 CSS Secrets 》是 @Lea Verou 最新著作，这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书，经过一段时间的阅读，我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感，与大家一起分享。 几年前，我们第一次接触伪元素 :nth-child() / :nth-of-type() 的时候，最常见的用例之一就是“斑马条纹”的表格。 这在以前需要服务器端的代码，客户端的脚本，或繁琐的手工代码，现在它已经只需...
http://mindhacks.com/ 需用电脑访问，手机看不到效果，请问这种背景黑框固定的效果如何实现的？不管右侧浏览器滚动条如何滚动，黑色背景边框都不变，我研究了半天没想明白，是css还是js？请大神指导！ 回复讨论(解决方案) 通过CSS实现的，手机看不到效果的原因是响应式页面 原理如下： 设置body的背景色为#1a1a1a 深灰，这样左右的黑框就有了 然后通过伪类选择器:befo...
知识储备 1.2-5小节的linear-gradient() 展示 lea.verou.me/css3patterns 1.png 2.png 3.png 4.png 5.png 6.png 7.png 8.png 测试 示例1html c...
效果体验：http://hovertree.com/texiao/css3/10/ 一般做图片切换效果，都会使用JS或者jQuery脚本，今天发现，其实只用CSS也可以实现。试试效果吧。 效果图：代码如下： 纯CSS3实现全屏背景切换焦点图效果 - 何问起图片切换1图片切换2图片切换3图片切换4图片切换5何问起 纯CSS3实现全屏背景切换焦点图效果原文 首页 特效 转自：http://hovertree.com/h/bjaf/8c5uhche.htm 更多特效：
为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。rgba()后面的百分比表示位置。 具体代码： background: -webkit-linear-gradient(top, rgba(255,255,255,0.4)0%, rgba(255,255,255,0.2)75%, rgba(255,255,255,0)98%);/* Safari、Chrome */background: -o-linear-gradient(bottom, rgba(255,255,...
.linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8); /*IE 6 7 8*/ background: -ms-linear-gradient(top, #fff, #0000ff); /* IE 10 */ background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/ background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#...
1.使用css缩写 使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，css缩写的主要规则如下： 颜色 16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369; 注意:在同一个CSS配置节中，不要交错使用全写和缩写的颜色配置，在系统资源极低时，会导致浏览器渲染失败。 盒尺寸 通常有下面四种书写方法: prop...