对于css3的学习,更多的是在于对新特性和基础理论的熟悉, 这篇文章通过一个案例带领大家了解css3里一些理论知识,也将一些技巧加以总结,从而提高大家的开发效率: 本次案例为(水纹波动),不用js写动画,只要善于运用css3就能实现水纹层层扩散的效果. <<!DOCTYPE html> <html> <head> <style> .wave { margin-left: auto; margin-right: auto; width: 100px; h

吐槽啦:Yeah  明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言归正传,我们回到我们的主题来看看CSS之全屏背景图.Nowdays,满屏大图的网页成为了一种fashion,网页的模板.布局是用CSS.HTML……来设计的,这里就以CSS来聊全屏背景图. 简单点,对于全屏背景图,我们只需用CSS的一个background-size属性就可以了. 当backgrou

在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样注意:在HTML当中,要为某个对象加上背景色只有一种办法,那就是先做一个表格,在表格中设置完背景色,再把对象放进单元格.这样做比较麻烦,不但代码较多,还要为表格的大小和定位伤些脑筋.现在用CSS就可以轻松地直接搞定了,而且对象的范围很广,可以是一段文字,也可以只是一个单词或一个字母.例子:给部分文字加背景颜色

接着上一篇总结一些css的相关知识 ㈠背景 背景属性 1.background-color 背景颜色   rgb函数设置 2.background-image   背景图片  url(“logo.jpg”) 添加一个url函数,这个函数括号括起来,参数双引号之内带有的是添加成背景图片的这个图片的完整路径(相对路径)和文件名. 3.background-repeat   背景填充方式   (棋盘格的填充) ⑴取值为repeat,作为背景图片填充整个页面. ⑵取值为repeat-x,单向填充,横向填

引用css 设置背景色: 背景图片 整个页面的背景图片 图片当局部背景图 也可以简写 css /* css基本样式 */ /* 设置p标签的文字前景色.背景色 */p{ /*字体颜色为蓝色*/ color: blue; /*背景色为黑色*/ background-color: black;} /*把图片当整个页面的背景*/body{ /*图片的地址*/ background-image: url("../img/timg.jpg"); /*固定背景图,当文字过长拖动的时候,不跟随文字滚

css中用一张背景图做页面的技术有什么优势? 简单介绍一下 CSS Sprites 的优点: 当用户往U盘中拷200张图片,会等很久.但是如果弄成一个文件,再拷贝就会快很多. CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载 速度. 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位.background-position:-8px -95px;或者简写background:url(图片路径) no-repeat 8p

先上效果图 HTML代码: 123456789 <div class="header"> <h1>GCCHRN'S BLOG</h1> <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">首页</a></li>

background-origin(背景原点) 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat属性才能生效. background-origin:border-box|padding-box|content-box: border-box 这是用border-box时图片位于边框左上角 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g

背景颜色 background-color 语法: background-color:<color> 默认值:transparent  透明 适用于:所有元素 继承性:无 动画性:是 计算值:指定值 取值: <color>: 指定颜色. 说明: 设置或检索对象的背景颜色. 当同时定义了背景颜色和背景图像时,背景图像覆盖在背景颜色之上. 如果设置了 <' background-image '>,同时也建议设置 <' background-color '> 用于

在之前的博客CSS hack中我有提到,一个问题的解决让我对CSS hack的态度从不屑一顾,到认真研究了实验一下,事情是这样的,最近产品发布,向来狂妄的我被一个bug纠缠住了,甚至丧气的表示我做不出来,说来也惭愧,难住我的并不是造火箭这样的难题,只是个背景图片... 前世今生 最近为产品做了一个扁平化的新Theme,看起来很美观,公司的艺术家看后表示需要一张有深意的背景图片,发给我了 放上去后一看艺术家就是艺术家,果真和Theme很搭而且让网站高端了很多(自我感脚),兴冲冲的就发布了上去,主要

背景: 最近就遇到一个同事的项目,还是像平常一样小心切图,认真对像素. 一切测试都没有问题,顺利上线. 但是,上线之后,产品经理跑过来说,有BUG. BUG描述:(不认为是BUG) 前端页面上的图标是虚的. 环境:mackbook pro retina屏 现象: 给了一个截图 图标是虚的 BUG修复要求: 对图标进行修正,使在retina屏上图标依旧是清晰的. 分析: 到这里,做过移动端页面的都知道,这是没有双倍图呀. 修复方法: 第一步,让设计师出对应图标的双倍图 第二步,使用css的medi

用css实现一个椭圆形状的背景框很好实现 css: div{ width:200px; height:80px; background-color: #78DDF8; border-radius:10px; } html: <div></div> 重点在于边上的小三角,这里用到css的伪类 :before  (:after/:first-letter/:first-line都是) div::before{ content:''; display:'block'; border:20

一.网址:http://www.csszengarden.com/?cssfile=213/213.css 二.效果 三.CSS body { background-color:#F0ECD6; background-image:Url(Images/water.png); background-position:top; background-repeat:repeat-x; } 四.说明 网页背景色与大海融为一体,这个是非常唯美的艺术效果.而更大的亮点则是,背景图片的左右两边各有一条没有特别

设定颜色 背景使用 图像使用 1.设定颜色 红色的几种合法定义;     #f00;     #ff0000;     Red;     Rgb(255,0,0);     Rgb(100%,0%,0%);   2.十六进制三元组       第一个字节:红色的值;     第二个字节:绿色的值;     第三个字节:蓝色的值;     简化写法:#cccccc 可写成 #ccc, #ff6633可以写成 #f63   3.使用17种具名颜色     黑色(black)     000000  

第一种方法不设为背景图片,通过css来控制样式,可兼容到IE6,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author" content="chaozhang5"> <meta name="mail" content=&qu

当网站页面的整体布局设计好后,接下来有很多细节的实现是很让人头疼的.其中之一就是圆角矩形的实现. 在网上看了很多圆角矩形的实现方法,基本有两种,一种是用纯css实现,不需要背景图片:另一种是用背景图像实现.但是,不管是哪一种,都有一个共同的缺点:需要使用很多代码来嵌套,而这些代码对搜索引擎来说毫无意义. 在<css cookbook>一书中介绍了一种实现圆角矩形十分简洁的方法,那就是用Nifty Corners Cube 先看一个简单的例子:http://www.sz137.com/sz137

在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的下载次数,获得更好的用户体验. 然而在版本升级或做一些css.js等调整的时候,缓存导致用户无法显示更新后的样式,这是另人头头疼的问题.除非用户自行手动升级缓存,不过几乎所有用户不会为了正常访问这个网站而去手动清除缓存,因为用户根本不知道是不是缓存的问题,而归根结底,用户就是认为你的页面存在问题,不

直接看代码: background: blue; /*页面背景为蓝色,很简单的代码*/background-image:url(small.jpg); /*页面背景是名字叫small.jpg的图片*/background-repeat: no-repeat; /*水平方向显示图片repeat-x 竖直方向显示图片repeat-y 不重复图片no-repeat*/ background-attachment: fixed; /*在页面特别长有滚动条时,可以固定图片*/ 相关知识点: 1.背景图与背

样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head> 外链式写法 写在head里,<link rel="stylesheet" href = "1.css"> 行内样式表/内联式 <h1 style = "font - size : 30px ; color : red;">

前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度较慢.下面示例代码是我自己写的,若有错误,欢迎指正 注:我会在在最开头附上每个相关示例所需CSS属性链接作为补充,以供查阅和学习 我会在每个示例最后附上书中提供的在线示例代码链接: 我会从书中选择一些css技巧来分享,有兴趣的小伙伴可以去看看这本书,你不会失望的 CSS需知: background-posit

1. 设定颜色 2. 背景使用 3. 图像使用 1.设定颜色 红色的几种合法定义; #f00; #ff0000; Red; Rgb(255,0,0); Rgb(100%,0%,0%); 2.十六进制三元组 第一个字节:红色的值; 第二个字节:绿色的值; 第三个字节:蓝色的值; 简化写法:#cccccc 可写成 #ccc, #ff6633 可以写成 #f63 3.使用 17 种具名颜色 黑色(black) 000000 藏蓝色(navy) 000080 绿色(green) 008000 海蓝色(t