名站导航为爱好css的朋友们提供相关的知识。
深入理解hTML5实现图片压缩上传功能
上篇文章中提到移动端上传图片,我们知道现在流量还是挺贵的,手机的像素是越来越高,拍个照动不动就是好几M,伤不起。虽然客户端可以轻轻松松实现图片压缩再上传,但是我们的应用还可能在浏览器里面打开,怎么办呢,图片压缩。受以前PC上的开发思维影响,尼玛js哪有权限去操作文件,哪有资格压缩图片啊,搞不了,你们客户端去整吧。只能说自己还是有些井底之蛙了。在hTML5的影响下,前端能干的事情越来越多了,开发的功能逼格也越来越高了,h5万岁!前端的魅力也在这,过去不可能的并不意味现在、以后不可能,努力吧,骚年!
- 此篇文章具体介绍如下
css教程属性选择器语法:
[attribute=value] 如:[target=-blank] /*选择所有使用target="-blank"的元素*/
或
[attribute~=value] 如:[title~=flower] /*选择标题属性包含单词"flower"的所有元素*/
或
[attribute|=language] 如:[lang|=en] /*选择一个lang属性的起始值="EN"的所有元素*/
css教程属性选择器实例一:
选择所有使用target="_blank"的a元素
<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank]
{
background-color:yellow;
}
</style>
</head>
<body>
<p>The link with target="_blank" gets a yellow background:</p>
<a href="http://www.manongjc.com">manongjc.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
在线运行
css教程属性选择器实例二:
选择标题属性包含单词"flower"的所有元素
<!DOCTYPE html>
<html>
<head>
<style>
[title~=flower]
{
border:5px solid yellow;
}
</style>
</head>
<body>
<p>The image with the title attribute containing the word "flower" gets a yellow border.</p>
<img src="/images/online_demo/klematis.jpg" title="klematis flower" />
<img src="/images/online_demo/klematis.jpg" title="flowers" />
<img src="/images/online_demo/klematis.jpg" title="landscape" />
<p><b>Note:</b> For [<i>attribute</i>~=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
在线运行
css教程属性选择器实例二:
选择一个lang属性的起始值="en"的所有元素
<!DOCTYPE html>
<html>
<head>
<style>
[lang|=en]
{
background:yellow;
}
</style>
</head>
<body>
<p lang="en">hello!</p>
<p lang="en-us">hi!</p>
<p lang="en-gb">Ello!</p>
<p lang="us">hi!</p>
<p lang="no">hei!</p>
<p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
在线运行
名站网址导航
css教程选择器
关于css的相关的知识就说到这里希望能够可以帮助更多的朋友们。,css属性选择器移动web如何实现类似客户端多方框输入密码功能
不知道怎么描述标题,先看截图吧,大致的效果就是一个框输入一位密码。