HTML5和css3超实用的新属性集合
来源:互联网 发布:网络选修课刷课软件 编辑:程序博客网 时间:2024/06/01 10:37
1.用CSS美化被鼠标选中的文字的样式
Windows自身提供的是一种很难看的墨绿色的颜色,而苹果电脑上提供的是浅绿色。火狐浏览器,IE9,Opera和谷歌浏览器允许我们自定义被选择文字的颜色。
/* webkit, opera, IE9 */::selection { background:lightblue; }/* mozilla firefox */::-moz-selection { background:lightblue; }
2.HTML5里的placeholder属性
placeholder属性能够让你在文本框里显示提示信息,一旦你在文本框里输入了什么信息,提示信息就会隐藏。
<input type="text" name="first_name" placeholder="你的姓名..." />
3.HTML5里download属性
当用户点击这个链接,download属性值里的新名称就会显示到弹出的下载框里。这样你保存的文件名称是“预算表.pdf”。
<!-- 下载时使用"预算表.pdf"名称 --><a href="/files/adlafjlxjewfasd89asd8f.pdf" download="预算表.pdf">下载支出费用表</a>
4.HTML5里autofocus属性
这里要讲的一个简单的HTML5功能是当页面加载完成时让输入焦点自动落到某个元素上
<!-- These all work! --><input autofocus="autofocus" /><button autofocus="autofocus">Hi!</button><textarea autofocus="autofocus"></textarea>
5.HTML5的hidden属性
当一个网页元素有了hidden属性后,它的表现跟CSS的display: none;作用非常相似,元素将会消失,而且不占用任何页面空间
<div hidden> You can't see me!</div>
如果你使用的是老式浏览器,不支持这个属性,你可以在CSS里添加下面的代码来支持它
*[hidden] { display: none; }
6.CSS里的:target伪选择器
当浏览器地址里的hash(地址里#号后面的部分)和:target伪选择器指定的ID匹配上时,它的样式就会在这个ID元素上生效。
/* would apply to all targetted elements */:target { color: #000;}/* applies to H2's */h2:target { color: #f00;}
7.在CSS里用calc进行计算
这个calc计算器在计算相对宽度时非常的有用。它能执行加、减、乘、除。看看下面的代码写法:
/* basic calc */.simpleBlock { width: calc(100% - 100px);}/* calc in calc */.complexBlock { width: calc(100% - 50% / 3); padding: 5px calc(3% - 2px); margin-left: calc(10% + 10px);}
8.使用HTML5中的element.dataset操作自定义data-*数据
<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>
要想获取这个data-id属性,你的代码应该写成这样
// Get the elementvar element = document.getElementById("myDiv");// Get the idvar id = element.dataset.id;
jquery 写法
$("#myDiv").data("id")
0 0
- HTML5和css3超实用的新属性集合
- html5新标签和css3的新属性
- 什么是HTML5和CSS3?HTML5和CSS3的新特性
- HTML5+CSS3+JS(第二课).HTML5保留的常用元素(三)和新通用属性
- HTML5--CSS3在线编辑工具 超酷!!!(24款非常实用的CSS3工具终极收藏)
- 实用的css3属性
- HTML5和CSS3的属性笔记
- html5和css3新特性
- css3和html5新特性
- CSS3的新属性
- HTML5、CSS3新标签、属性概况
- 比较实用的 css3属性
- HTML5的语法和新属性
- Html5和Css3的基础标签及常用属性
- css3的Background新属性
- CSS3的新属性animation
- CSS3的一些新属性
- css3 的一些新属性
- .九图片详解和制作
- iOS工程自动打包并发布通过脚本实现
- AIR移动(Starling)开发笔记基础篇
- myeclipse个人注释模板
- excel文件导入
- HTML5和css3超实用的新属性集合
- 169. Majority Element 破解思路
- 关于native,transient,volatile,synchronized四个关键字的使用
- Hibernate之No row with the given identifier exists
- 关于UIScollView及其子类的在导航控制器
- 53.View the Exhibit and examine the data in the PROMOTIONS table.
- vsftp出现cannot change directory问题的解决方法
- 【杂谈】RBF径向基核函数&径向基网络
- 论copy_to_user返回值处理的重要性