一个简单的操作技巧
可以为你的代码编程提高质量
以及……
再装一波逼
好,话不多说
你们是否遇到过这样的页面需求:
一个评论框,后面的按钮有点赞或者发送评论两种状态,其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。
需求:
没有文字,没有聚焦——点赞
没有文字,聚焦——灰色发送
有文字——红色发送
如果用JS实现,需要监听输入框的change和focus事件,比较麻烦。但是用CSS中的伪类就可以实现相近效果。
<inputtype="text"class="input"required>
<divclass="like">点赞</div>
<divclass="send">发送</div>
.send {
display: none;
}
.input:focus ~ .send {
display: block;
}
.input:valid ~ .send {
display: block;
color: red;
}
.input:focus ~ .like, .input:valid ~ .like {
display: none;
}
(如果评论框用contenteditable属性的div元素实现,可以用:empty伪类代替:valid。)
所以CSS3中的伪类和伪元素非常多,其中一些如果用的巧妙,可以实现很多原本需要JS才可以实现的效果。
contenteditable属性的div的placeholder
因为一些原因,我们有时候用带有contenteditable属性的div而不是input或者textarea来作为输入框。比如,div可以根据内容自动调整高度。但是div元素不支持placeholder属性。怎么在div内容为空的时候显示一个默认文字呢?可以利用:empty伪类。
<divclass="input"contenteditableplaceholder="请输入文字"></div>
.input:empty::before {
content: attr(placeholder);
}
画格子
这个是在美团的移动端页面上看到的:
我们需要在城市列表这个区域画一个格子。我们当然首先想到的是用border属性,但是设计师有个要求是,如果最后一行只有一个或者两个城市,为了美观后面也要有空白的格子。像这样子:
美团的页面中,格子的竖线是怎么画的呢?是用::after和::before元素画的。
.table:before {
content:'';
position:absolute;
width:25%;
left:25%;
height:100%;
border-left:1pxsolid #ddd8ce;
border-right:1pxsolid #ddd8ce;
}
.table:after {
content:'';
position:absolute;
width:10%;
left:75%;
height:100%;
border-left:1pxsolid #ddd8ce;
border-right:none;
}
分别创造了两个高度为100%的伪元素,利用它们的边框作为表格的竖线。这种方案可以实现设计师的要求,又不会增加空白的页面元素,破坏语义。但是局限性就是最多只能画四条竖线,也就是说表格最多有5列。
Tab切换
纯CSS实现Tab切换也是可以的。主要是利用了单选框元素的:checked伪类和相邻选择器。因为是单选框,所以保证了同一时间只有一个tab处于激活状态。如果不要求更复杂的效果,这样纯CSS实现的tab切换效果,要比JS简单可靠很多。
<inputid="tab1"type="radio"name="tabs"checked><labelfor="tab1">TAB1 </label><inputid="tab2"type="radio"name="tabs"><labelfor="tab2">TAB2 </label><divid="content1"class="tab-content">CONTENT1 <div><divid="content2"class="tab-content">CONTENT2 </div>input, .tab-content{ display: none; } #tab1:checked ~ #content1, #tab2:checked ~ #content2 { display: block; }
另外利用表单元素的伪类,可以label元素来代替单选框、复选框等表单元素的本身,因为为表单元素本身定义样式十分困难。
感知子元素的个数
我看过一个很复杂的技巧,不依靠JS实现了根据子元素的个数来应用不同的样式。
比如这样的CSS:
.list li:nth-last-child(n+4)~li,
.list li:nth-last-child(n+4):first-child {
color:red
}
可以实现这样的效果:如果.list里面li元素个数大于等于4,则显示为红色。
这是怎么实现的呢?
:nth-last-child(n+4)这一个选择器的意思就是倒数第四个以及之前的元素,后面加了~ li,就是表示符合前面条件的元素之后的li元素。
如果元素总数不足4,则不会存在符合:nth-last-child(n+4)的元素(一共没有四个,也就不存在倒数第四个),那么li:nth-last-child(n+4) ~ li就不会选择任何的元素了。
但是如果只用~ li,是不会匹配到第一个li的,所以又加上了li:nth-last-child(n+4):first-child。
这样也就实现了根据元素个数的多少来应用不同的样式。
重磅福利!
【150G】Adobe CC2017
全套软件+教程+插件大礼包
点我领取
本文章来自互联网分享如涉及到版权问题请联系小编处理谢谢!
温馨提示
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请后台提交工单处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请后台提交工单!
【免责声明】:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
【关于转载】:
本站尊重互联网版权体系,本站部分图片、文章大部分转载于互联网、所有内容不代表本站观点、不对文章中的任何观点负责、转载的目的只用于给网民提供信息阅读,无任何商业用途,所有内容版权归原作者所有
如本站(文章、内容、图片、视频)任何资料有侵权,先说声抱歉;麻烦您请联系请后台提交工单,我们会立即删除、维护您的权益。非常感谢您的理解。
【附】:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!
注:本站资源来自网络转载,版权归原作者和公司所有,如果有侵犯到您的权益,请第一时间联系我们处理!
-----------------------------------------------------------------------------------------------------------
【版权声明】:
一、本站致力于为源码爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、如有内容侵犯您的版权或其他利益的,请编辑邮件并加以说明发送到站长邮箱。站长会进行审查之后,情况属实的会在三个工作日内为您删除。
-----------------------------------------------------------------------------------------------------------
源码村资源网 » iishtml映射(映射webdav)
1 评论