css3学习笔记之用户界面
CSS3 调整尺寸(Resizing)
CSS3中,resize属性指定一个元素是否应该由用户去调整大小。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html> < html > < head > < style > div { border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; } </ style > </ head > < body > < b >调整前</ b > < div >The resize property specifies whether or not an element is resizable by the user.</ div > < b >调整后</ b > < div >The resize property specifies whether or not an element is resizable by the user.</ div > </ body > </ html > |
CSS3 方框大小调整(Box Sizing)
box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html> < html > < head > < style > div.container { width:80%; border:1em solid; } div.box { box-sizing:border-box; width:50%; border:1em solid red; float:left; } </ style > </ head > < body > < div class = "container" > < div class = "box" >This div occupies the left half.</ div > < div class = "box" >This div occupies the right half.</ div > </ div > </ body > </ html > |
CSS3 外形修饰(outline-offset )
outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同:
- 轮廓不占用空间
- 轮廓可能是非矩形
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html> < html > < head > < style > div { margin:20px; width:150px; padding:10px; height:70px; border:2px solid black; outline:2px solid red; outline-offset:15px; } </ style > </ head > < body > < p >< b >Note:</ b > Internet Explorer does not support the outline-offset property.</ p > < div >This div has an outline border 15px outside the border edge.</ div > </ body > </ html > |
新的用户界面特性



属性 | 说明 | CSS |
---|---|---|
appearance | 允许您使一个元素的外观像一个标准的用户界面元素 | 3 |
box-sizing | 允许你以适应区域而用某种方式定义某些元素 | 3 |
icon | Provides the author the ability to style an element with an iconic equivalent | 3 |
nav-down | 指定在何处使用箭头向下导航键时进行导航 | 3 |
nav-index | 指定一个元素的Tab的顺序 | 3 |
nav-left | 指定在何处使用左侧的箭头导航键进行导航 | 3 |
nav-right | 指定在何处使用右侧的箭头导航键进行导航 | 3 |
nav-up | 指定在何处使用箭头向上导航键时进行导航 | 3 |
outline-offset | 外轮廓修饰并绘制超出边框的边缘 | 3 |
resize | 指定一个元素是否是由用户调整大小 | 3 |
css3学习笔记之用户界面的更多相关文章
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- Java学习笔记--Swing用户界面组件
很多与AWT类似. 事件处理参考:Java学习笔记--AWT事件处理 1.设计模式: 模型:存储内容视图:显示内容控制器:处理用户输入· 2. 文本输入常用组件 2.1 文本域: JLabel lab ...
- CSS3学习笔记之linear-gradient
我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...
- CSS3学习笔记1-选择器和新增属性
前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...
- 十天精通CSS3学习笔记 part4
CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
- HTML5+CSS3学习笔记(一)
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...
- CSS3学习笔记——伪类hover
最近看到一篇文章:“Transition.Transform和Animation使用简介及应用展示” ,想看看里面 “不同缓动类效果demo”例子的效果,发现了一个问题如下: .Trans_Bo ...
- css3学习笔记三
css3有些特殊的元素选择器这和jquery相似.效果图如下
随机推荐
- cocos2dx 3.0 触摸机制
在cocos2dx 3.0版本号中,废弃了以往2.x版本号的写法,我们先来看一下Layer.h中的一段代码 /* Callback function should not be deprecated, ...
- Codeforces gym 100685 C. Cinderella 水题
C. CinderellaTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100685/problem/C ...
- HashMap解决hash冲突的方法
HashMap 采用一种所谓的“Hash 算法”来决定每个元素的存储位置.当程序执行 map.put(String,Obect)方法 时,系统将调用String的 hashCode() 方法得到其 h ...
- js实现自己定义鼠标右键-------Day45
又是周末了,只是事实上这在国外应该算是一周的開始吧,无论怎么说,今天是在歇息,放松我紧绷的神经,放松我有些疲惫的精神,昨晚上要裂了般的头疼,仿佛全部的数据都在脑子字面飞舞旋转,伴着一阵阵的恶心,当时把 ...
- ext_EditorGridPanel (8)
EditorGridPanel ExtJS 中的可编辑表格由类Ext.grid.EditorGridPanel 表示,xtype 为editorgrid,和gridPanel的区别就是,这个表格中的内 ...
- python 学习(一)
python的基础看完了之后,有点像简化并提供了一定优化后的java基础,看java多了的人看python还是比较别扭的.看完别人对于java和python的对比,我只能感慨一句,还有什么是java办 ...
- 进程间通信之FIFO
FIFO有时被称为命名管道.管道只能由相关进程使用,这些相关进程的共同祖先进程创建了管道.但是,通过FIFO,不相关的进程也能交换数据. FIFO是一种文件类型(参考http://www.cnblog ...
- Java_eclipse软件与git配合使用创建git仓库
一.在eclipse上安装git,和安装其他插件一样 help->Install new software->add... 在弹出框中输入name,location;点击-->ok ...
- C#_uploadify_mvc_version
jQuery Uploadify在ASP.NET MVC3中的使用 1.Uploadify简介 Uploadify是基于jQuery的一种上传插件,支持多文件.带进度条显示上传,在项目开发中常被使用. ...
- Windows 之 删除文件出现“该项目不在请确认该项目的位置”
原理为通过 DOS 命令自建一个 .bat 批处理文件. 第一步,首先桌面新建TXT文档: 第二步,主要使用DEL 和 RD 命令,打开文档复制下面内容里面: DEL /F /A /Q \\?\%1 ...