马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2019-9-4 22:59 编辑
最近 《零基础入门学习Web开发》（HTML5 & CSS3）进入了 CSS 部分，围观：传送门
废话不多说，直接说正题感受一下 CSS 的强大
1、每个单词的首字母大写
例如有这么一段 html 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C</title>
</head>
<body>
<p>ilovefishc.com</p>
</body>
</html>
一般人初学者看到这个需求，可能很容易就想到要用 JS 来实现。
于是绞尽脑汁写了一段 JS 代码：
function capitalizeFirst( str ) {
let result = '';
result = str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
return result
}
其实呢，这个用 CSS 就能完美搞定：
<style>
p{
text-transform: capitalize;
}
</style>
text-transform 属性的详细用法，可以参看鱼C速查宝典：传送门
简单介绍一下它自带的参数：
- none： 默认。定义带有小写字母和大写字母的标准的文本
- capitalize： 文本中的每个单词以大写字母开头
- uppercase： 定义仅有大写字母
- lowercase： 定义无大写字母，仅有小写字母
上面用的就是 capitalize 首字母大写。
2、单选高亮
还是一段基础代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C</title>
</head>
<body>
<div class="single-check">
<input class="input" type="radio" name="colors" value="1">
<span class="colors">世界地图</span>
</div>
</body>
</html>
<style>
.input:checked + .colors {
color: red;
}
</style>
两个选择器的区别：
- ~ 选择器：查找某个元素后面的所有兄弟元素
- + 选择器：查找某个元素后面紧邻的兄弟元素
这个技巧也完全可以使用在导航栏的交互效果，后续来实践一下。
3、多列等高
一段基础代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C</title>
</head>
<body>
<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" value="发送">
</div>
</body>
</html>
我们要实现当输入验证均合法时才弹出发送提交按钮。
上 CSS：
<style>
input[type="text"]:invalid ~ input[type="submit"] {
display: none
}
</style>
:invalid 伪类简要说明：
- valid 伪类，匹配通过 pattern 验证的元素
- invalid 伪类，匹配未通过 pattern 验证的元素
如果喜欢，别忘了评分 ：
这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ） | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2019-9-4 22:13:31
置顶卡
千斤顶
显身卡
发表于 2019-9-6 17:43:33
发表于 2020-3-31 09:18:01