直接入题
text-transform 简单介绍
这是 CSS2 中的属性,参数有 capitalize | uppercase | lowercase | none
参数介绍:
none: 默认。定义带有小写字母和大写字母的标准的文本。
capitalize: 文本中的每个单词以大写字母开头。
uppercase: 定义仅有大写字母。
lowercase: 定义无大写字母,仅有小写字母。
从这个属性我们可以知道全部大写(小写)的需求这个属性也能轻易实现。
不知道你是否第一次看到这种单选高亮的需求时,是怎么处理的。我第一次直接是用 JS 控制的。后来我发现这个需求用 CSS 更方便处理。
主要代码就是一段 CSS 代码:
// 省略部分代码,详细代码看仓库
.input:checked + .colors {
border-color: #e63838;
color: #e63838;
}
<div class="single-check">
<input class="input" type="radio" name="colors" value="1">
<div class="colors">天空之境</div>
</div>
复制代码看效果:
两个选择器的区别
~ 选择器:查找某个元素后面的所有兄弟元素
每列设置一个很大的 padding,再设置一个很大的负的 margin
使用 display: table;
第一种有明显的缺陷:
border-bottom 看不到了
设置的下方的两个圆角也不见了
所以我使用了 display: table; 的方式来实现等高,可以说非常的方便。
建议不要一味的抵触 table,有的场景还是可以使用的。
4、表单验证
先声明:这里没有用到 JS,不过用到了 HTML5 关于 <input> 的新属性 —— pattern( 检查控件值的正则表达式 )。
还有一点:其实我在实际项目中没这么用过。
代码如下:
input[type="text"]:invalid ~ input[type="submit"] {
display: none
}
<div class="form-css">
<input type="text" name="tel" placeholder="输入手机号码" pattern="^1[3456789]\d{9}$" required><br>
<input type="text" name="smscode" placeholder="输入验证码" pattern="\d{4}" required><br>
<input type="submit" ></input>
</div>
复制代码效果如下(样式不好看的问题请忽略):
invalid 伪类和 vaild 伪类
valid 伪类,匹配通过 pattern 验证的元素
invalid 伪类,匹配未通过 pattern 验证的元素
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站题目:这些功能其实不需要JS,CSS就能搞定-创新互联
链接分享:https://www.cdcxhl.com/article4/disdie.html
成都网站建设公司_创新互联,为您提供服务器托管、电子商务、品牌网站建设、定制开发、软件开发、域名注册
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联