自由缩放属性resize 为了增强用户体验,CSS3增加了很多新的属性,其中resize就是一个重要的属性,它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小.到目前为止,可以使用overflow属性的任何容器元素. 在此之前,Web设计师为了要实现这样具有拖动效果的UI,使用大量的脚本代码才能实现,这样费时费力,效率极低. resize属性主要是用来改变元素尺寸大小的,其主要目的是增强用户体验.但使用方法却是极其的简单,先从其语法入手. resize: none | both | hor…

课程地址:http://www.imooc.com/learn/33 第1章 初识CSS3 CSS3课程列出第一站,先带领大家进入CSS3的世界,探索CSS3的魅力! 你做好准备了吗? 第2章 边框 本课程主要解说border-color .border-image .border-radius 及box-shadow 相关知识 第3章 颜色相关 学习CSS3中与颜色有关的属性,包含RGBA colors和Gradient.来实如今此之前仅仅能通过其他手段如背景图片才干得到的绚丽效果. 第4章…

CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后面紧跟着是动画名称加上一对花括号"{-}",括号中就是一些不同时间段样式规则. @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } } 在一个"@keyframes"中的样式…

第8章 CSS3中的变形与动画(上) 变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时针旋转:如果这个值为负值,元素相对原点中心逆时针旋转.如下图所示: HTML代码: <div class="wrapper"> <div></div> </div> CSS代码: .wrapper { w…

第6章 征服CSS3选择器(上) 属性选择器 在HTML中,通过各种各样的属性可以给元素增加很多附加的信息.例如,通过id属性可以将不同div元素进行区分. 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器.如下表所示: (单击可放大)  实例展示: html代码: <a href="xxx.pdf">我链接的…

http://www.imooc.com/learn/33 第1章 初识CSS3 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了. 在编写CSS3样式时,不同的浏览器可能需要不同的前缀.它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都…

Media Queries——媒体类型(一) 随着科学技术不断的向前发展,网页的浏览终端越来越多样化,用户可以通过:宽屏电视.台式电脑.笔记本电脑.平板电脑和智能手机来访问你的网站.尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样,但至少要让你的Web页面能适配用户的终端,让他更好的呈现在你的用户面前.在本节中,将会学到如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺寸),从而让你的页面让用户有一个更好的体验. Media Queries…

多列布局——Columns 为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module).它主要应用在文本的多列布局方面,这种布局在报纸和杂志上都使用了几十年了,但要在Web页面上实现这样的效果还是有相当大的难度,庆幸的是,CSS3的多列布局可以轻松实现.接下来咱们一起学习多列布局相关的知识. 语法: columns:<column-width> || <column-count&…

Keyframes介绍 Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则. @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } } 在一个“@keyframes”中的样式规则可以由多个百分比构成的,如在“0%”到“100%”之间创建更多个百分比,分别给每个百分比…

变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时针旋转:如果这个值为负值,元素相对原点中心逆时针旋转.如下图所示: HTML代码: <div class="wrapper"> <div></div> </div> CSS代码: .wrapper { width: 200px; height…

:enabled选择器 在Web的表单中,有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态,比如输入框,密码框,复选框等.在默认情况之下,这些表单元素都处在可用状态.那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式. 示例演示 通过“:enabled”选择器,修改文本输入框的边框为2像素的红色边框,并设置它的背景为灰色. HTML代码: <form action="#">   <div>     <labe…

属性选择器 在HTML中,通过各种各样的属性可以给元素增加很多附加的信息.例如,通过id属性可以将不同div元素进行区分. 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器.如下表所示: (单击可放大)  实例展示: html代码: <a href="xxx.pdf">我链接的是PDF文件</a>…

background-origin 设置元素背景图片的原始起始位置. 语法: background-origin : border-box | padding-box | content-box; 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示. 效果如下: 需要注意的是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示. background-clip 用来将背景图片做适当的裁剪以适应实际需要. 语法: background-clip : borde…

颜色之RGBA RGB是一种色彩标准,是由红(R).绿(G).蓝(B)的变化以及相互叠加来得到各式各样的颜色.RGBA是在RGB的基础上增加了控制alpha透明度的参数. 语法: color:rgba(R,G,B,A) 以上R.G.B三个参数,正整数值的取值范围为:0 - 255.百分数值的取值范围为:0.0% - 100.0%.超出范围的数值将被截至其最接近的取值极限.并非所有浏览器都支持使用百分数值.A为透明度参数,取值在0~1之间,不可为负值. 代码示例: background-color…

什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了. 在编写CSS3样式时,不同的浏览器可能需要不同的前缀.它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的. 前缀 浏览器 -webki…

text-overflow 与 word-wrap text-overflow用来设置是否使用一个省略标记(...)标示对象内文本的溢出. 语法: 但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果,代码如下: text-overflow:ellipsis;  overflow:hidden…

圆角效果 border-radius border-radius是向元素添加圆角边框. 使用方法: border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角.右上角.右下角和左下角,顺时针 */ 不要以为border-radius的值只能用px单位,你还可以用百分比或者em,但兼容性目前还不太好. 实心上半圆: 方法:把高度(height)设为宽度(width)的一半,并且只…

不得不佩服京东的速度,昨天刚下单的两本书今天上午就到了.其中一本是全彩页的<众妙之门 - 精通CSS3>,细看了前几十页,书上的叙述方式给我的印象其实不如“彩页”来的讨喜——接连说上几个例子,扔个例子的链接(没源码下载,要自己手动输入,而且近乎所有的例子页面均已失效),未经细剖便草草了事,感觉倒是适合作为厕所读物(汗).... 虽然书中不细剖,却也不能白花银子,不妨自己实打实地查资料.记笔记,不辜负了早上送出的老毛. 如果你也买了这本书,那这篇文章会给你一定的辅助. (本文依照我翻阅书籍的进度…

Bootstrap入门(十八)组件12:徽章与巨幕 1.徽章 2.巨幕 1.徽章 给链接.导航等元素嵌套 <span class="badge"> 元素,可以很醒目的展示新的或未读的信息条目. 首先,引入CSS文件 <link href="bootstrap.min.css" rel="stylesheet"> 我们需要创建一个容器div,让它承载这个徽章 (<a><button>都可以使用) &l…

十二. Python基础(12)--生成器 1 ● 可迭代对象(iterable) An object capable of returning its members one at a time. Examples of iterables include all sequence types (such as list, str, and tuple) and some non-sequence types like dict and file and objects of any clas…

CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释     CSS3提供了一个新的属性集合,用这几个属性可以嵌入图片形式的边框.这样,边框就可以自定义了.     1.border-image-source                      //引入背景图片地址     2.border-image-slice                        …

CSS3背景渐变效果 学习要点: 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变. 一．线性渐变 linear-gradient背景颜色的渐变功能 CSS3提供了linear-gradient属性实现背景颜色的渐变功能.在以前,这种效果必须采用图片才能实现的.首先,我们先看一下它的样式表,如下: linear-gradient(方位,起始色,末尾色)                  方位          可选参数,…

第12章   CSS3+HTML5网页排版 [学习重点] 正确使用HTML5结构标签 正确使用HTML5语义元素 能够设计符合标准的网页结构 12.1  使用结构标签 在制作网页时,不仅需要使用<div>标签来构建网页,还要使用下面几类标签完善网页结构: <h1>.<h2>.<h3>.<h4>.<h5>.<h6>:定义文档标题: <p>:定义段落文本: <ul>.<ol>.<li&…

参考:http://www.w3school.com.cn/css3/css3_user_interface.asp 在 CSS3 中,新的用户界面特性包括重设元素尺寸.盒尺寸以及轮廓等. 新的用户界面属性 下面的表格列出了所有的转换属性: 属性 描述 CSS appearance 允许您将元素设置为标准用户界面元素的外观 3 box-sizing 允许您以确切的方式定义适应某个区域的具体内容. 3 icon 为创作者提供使用图标化等价物来设置元素样式的能力. 3 nav-down 规定在使用…

参考:http://www.w3school.com.cn/css3/css3_animation.asp 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. CSS3 动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 属性 描述 CSS @keyframes 规定动画. 3 animation 所有动画属性的简写属性,除了 animation-play-state 属性. 3 animation-name 规定…

参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵. translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素. translateX(n) 定义 2D 转换,沿着 X 轴移动元素. translateY(n) 定义 2D 转换,沿着 Y 轴移动元素. scale(x,y) 定义 2D 缩放转换,改…

CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一．动画简介     CSS3提供了类 Flash关键帧控制的动画效果,通过animation属性实现.     animation实现动画效果主要由两个部分组成:     1.通过类 Flash动画中的关键帧声明一个动画:     2.在animation属性中调用关键帧声明的动画.     CSS3提供的animation是一…

CSS3文本效果 一．文本阴影 CSS3提供了text-shadow文本阴影效果,这个属性在之前讲过,只是没有涉及浏览器 支持情况. 浏览器支持情况 text-shadow       Opera     Firefox     Chrome        IE      Safari                            9.5+       3.5+        4+               10+       3.1+ 这里有几个注意点:1.text-shadow在C…

Spring Security provides comprehensive integration with Spring MVC Test Spring Security提供与Spring MVC Test的全面集成 12.1 Setting Up MockMvc and Spring Security In order to use Spring Security with Spring MVC Test it is necessary to add the Spring Security…

如何实现下图的效果-—这里就用到了滤镜 给灰色弹框这个标签元素加“伪类”如下: #nearStoreContent .popChoose li:before { 1. z-index:; 2. position: absolute; 3. content: "123131"; 4. font-size: 18px; 5. color: #000; 6. -webkit-filter: blur(4px); 7. filter: blur(4px); 8. display: block;…