怎么把body设置成跟浏览器一样的宽高，因为body默认是没有高度的，如果你不设置body的宽高，有时你在注册body事件时，是不能注册的。在css3中Background后面可以跟很多属性：Background-size：它是调整图片的大小的，它可以直接设置宽高，也可以设置两个特殊的值。Cover和contain，他们两个意思是不一样的：Background-origin：它是指图片开始的位置，它一般有三个值：分别是从边框，边框内部，内容区域开始。Content-box这个是用在...
要求必备知识基本了解CSS语法,初步了解CSS3语法知识。和JS/JQuery基本语法。开发环境Adobe Dreamweaver CS6演示地址演示地址预览截图(抬抬你的鼠标就可以看到演示地址哦):制作步骤:一, html结构<div id="home"><form id="login" class="current1" method="post"><h3>用户登入</h3><img class="avator" src="images/avatar.png" width="96" height="96"/><label>邮箱/名称<input type="text" name="name" style="width:215px;"/><s...
transition(过渡动画)transition：过渡的属性名字（transition-property） 过渡的时长（transition-duration） 过渡的曲线（transition-timing-function） 延时（transtion-delay）transformtransition-timing-function:linear(匀速的)ease（慢快慢）ease-in(慢速开始)ease-out（慢速结束）ease-in-out（慢速开始慢速结束）1、位移translate(x,y):x:x轴的坐标点 y：y轴的坐标点的位置translate3d（x，y，z）x:x轴的坐标点 y：y轴的...
CSS概述 css：层叠样式表（Cascading Style Sheets），由于多个选择器的样式可以叠加在一起，所有叫层叠样式表，主要是用来美化界面。 css可放在页面head的<style></style>内、行内、外部css文件中 1<!DOCTYPE html> 2<html> 3 4<head> 5<meta charset="UTF-8"> 6<title>Document</title> 7<!-- 外链样式 --> 8<link rel="stylesheet" href="a.css"/> 9<!-- 页面css -->10<style>11 div{12 color...
转自：http://www.pengyaou.com/codecss3/POKDNMS_112.htmlCSS3 -webkit-scrollbar滚动条皮肤美化实现，利用-webkit-scrollbar，-webkit-scrollbar-track，-webkit-scrollbar-thumb这2个属性设置不同样式的滚动条。下面是5个滚动条样式。css代码 1.test1::-webkit-scrollbar {2 width: 8px;3 }4 .test1::-webkit-scrollbar-track {5 background-color:#808080;6 -webkit-border-radius: 2em;7 -moz-border-radius: 2em;8 border-ra...
今天分享一个如何使用纯CSS3创建手风琴风格菜单教程，菜单主要通过使用:target伪类来实现。 :target使用介绍 CSS3 target伪类是众多实用的CSS3特性中的一个。它用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说，URI中的标志符通常会包含一 个”#”字符，然后后面带有一个标志符名称，比如#respond，target就是用来匹配ID为respond的元素的。 现在在页面中，点击一个ID链接后，页面只会跳转到相应的位置，但是并不会有比较...
我们在做js动画的时候，很多时候都需要做回调处理，如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等，但在使用CSS3动画时能不能捕获到运动的状态做回调处理呢？CSS3动画也是可以做回调处理的，这里分为两个属性，一个是transition[w3c文档]，另外一个是animation[w3c文档]。1、transition对于transition，可以监听transitionend事件，当动画完成时触发，可以这样使用：复制代码代码如下:<!DOCTYPE html>...
效果图：演示：http://demo.jb51.net/js/2012/css3/css3_tmall.html代码：需要注意两个css文件复制代码代码如下:<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <meta name="author" content="xdf@TmallUED" /> <meta name="copyright" content="dafeng.xdf@taobao.com" /> <meta name="keywords" content="CSS3 Tmall" /> <meta name="description" content="CSS3TmallLogo" /> <title>CSS3 Tmall Logo</title> <link r...
今天写了个小demo想要利用transition
和transform以及transition-delay来实现鼠标移上去的延时动画，结果发现不能实现transition的变化效果。调试后发现只有把-webkit-transition放到css属性最后才能实现动画。。原文：http://www.cnblogs.com/strangerqt/p/3541672.html
css中可以通过box-sizing来指定盒模型,有两个值,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。可以分成两种情况：
1.box-sizing:content-box 盒子为width + paddinf + border(以前默认的)2.box-sizing: border-box 盒子大小为width如果盒子模型我们改为了box-sizing:border-box,那padding和border就不会撑开盒子了（前提padding和border不会超过当前width宽度）原文：https://www.cnblogs.com/qjul...
直接上图（原网址），自己CSS3练习demo。 【demo】【HTML】<div class="tree"><ul><li><a href="#">parent</a><ul><li><a href="#">child</a><ul><li><a href="#">Grant child</a></li></ul></li><li><a href="#">child</a><ul><li><a href="#">Grant child</a></li><li><a href="#">Grant child</a><ul><li><a href="#">Great Grant child</a></li><li><a href="#">Great Grant child</a></li><li><a href="#">Great Grant child<...
第21章 Media Queries相关样式该模块中允许添加媒体查询（media query）表达式，用以指定媒体类型，根据媒体类型来选择使用的样式（显示器、便携设备、电视机）使用方法@media 设备类型 and (设备特性) {样式代码}大部分设备特性的指定值接受min/max的前缀，表示大于等于或小于等于的逻辑使用and关键字来指定某种设备类型的某些特性满足某个条件时使用的样式，下列表示设备窗口小于640px时所使用的样式@media screen and (max-widt...
参考地址：http://www.w3cplus.com/css3/new-css3-linear-gradient.htmlbackground-image: linear-gradient(to bottom, //渐变方向#d9edf7 //开始颜色0px, //？？？？？#b9def0 //结束颜色100%); //透明 百分比background-image: -webkit-linear-gradien(to bottom, #d9edf7 0px, #b9def0 100%); 原文：http://www.cnblogs.com/oiliu/p/4712624.html
接第一式之后的进阶招式，加入一些组合动画，剧情、动画啥的都是随意瞎想的，纯粹是为了熟悉2D、3D和过渡等css3代码写法。效果见下图：代码如下（有点长，折叠一下）： <!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>test</title><style>ul,ol,li {list-style: none;margin: 0;padding: 0;}.box {position: relative;margin-top: 50px;height: 135px;}.talkBox {position: absolute;overflow: hidden;}.t...
CSS3.0中有一个border-radius属性，这个属性允许向 div
元素添加圆角边框，也就是div边角不再一直是直角，在CSS3.0中可以做成圆角了，所以我们可以用这个属性用div画一个圆，或者同心圆。圆 代码：<div style="width:100px; height:100px; border-radius:100px;
background-color:#eeeef4;"></div>同心圆代码：<div style="width:200px; height:200px; background-color:#FF9;
border-radius:200px; "> <div style="width:10...
