CSS属性选择器:enabled的案例解析(代码实例)
码农天地 -本文目标:
1、掌握CSS中结构性伪类选择器—enabled的用法
问题:1、实现以下表单,且使用纯DIV+CSS,必须使用选择器—enabled
附加说明:
1、年龄,身份证,手机号,均是可以输入的,但是地址输入框不可以输入,默认就是湖南
2、整体宽度380,上下左右padding为20,整体居中显示
3、头像图标宽为40,其他图标大小也是40
现在来具体操作1、准备素材:根据目标得知,看到的图标都是要切的素材
2、创建好index.html,写好架构,架构如何分析呢
思路分析:
1、目标分为一个标题+一个表单
2、表单我们可以通过ul来布局,且li里的图标我们将他们作为背景这样可以很简单的让图标在li内垂直居中,且居左
好,先按照分析,写好思路,暂时不管css的实现
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>属性选择器:enabled</title></head><body> <div class="container"> <h2 class="title"> 请完善信息 </h2> <form action="#"> <ul> <li class="avatar"> <img src="images/avatar.jpg" /> </li> <li class="item age"> <input type="text" id="enabled" value="请输入年龄" /> </li> <li class="item sfz"> <input type="text" id="enabled" value="请输入身份证"/> </li> <li class="item sj"> <input type="text" id="enabled" value="请输入手机号" /> </li> <li class="item addr"> <input type="text" id="disabled" value="湖南" disabled="disabled" /> </li> <li class="item"> <input type="button" value="提交" /> <input type="button" value="取消" /> </li> </ul> </form> </div></body></html>3、写样式 ,创建css文件夹,里面新建index.css,里面的样式怎么写了,以下是分析思路
思路分析:
.container * 公共样式
1、写了这么多案例,这一步基本上是必不可少的,也是为了减少代码冗余性,所以在这里我们可以定义公共的样式
所以index.css中添加代码如下:
.container *{ padding:0; margin:0;}.container 外层容器
1、根据附加说明得知,宽380px,居中显示,所以需要margin:0 auto,上下左右均有间距
所以index.css中添加代码如下:
.container{ width:380px; margin:0 auto; padding:20px;}form 表单
1、根据目标得知,它有一个灰色边框
所以index.css中添加代码如下:
form{ border:1px solid lightgray;}.avatar .avatar img 头像
1、头像要居中,且上下也存在padding
2、头像图片宽度为40,且带圆形边框,上下左右均有padding
所以index.css中添加代码如下:
.avatar{ text-align: center; padding:10px 0!important;}.avatar img{ width: 40px; border: 1px solid gray; border-radius: 40px; padding: 10px;}ul li
1、li不带黑色圆点,所以无样式
所以index.css中添加代码如下:
ul li{ list-style: none;}.item li的公共样式设置
1、左边因为有背景图标,所以需要padding-left,高度60,为了让他居中,所以line-height也要设置成一样
2、背景图标大小40,且水平方向上居左,垂直方向上居中
3、背景图标不重复
所以index.css中添加代码如下:
.item{ padding-left: 50px; height: 60px; line-height: 60px; background-size: 40px; background-position-y: center; background-position-x: left; background-repeat: no-repeat;}li的背景图标设置
1、为每个li设置自己的背景图片
所以index.css中添加代码如下:
.age{ background-image: url(../images/age.png);}.sfz{ background-image: url(../images/sfz.png);}.sj{ background-image: url(../images/sj.png);}.addr{ background-image: url(../images/addr2.png);}text类型输入框 公共样式设置
1、宽度为300,高30,存在上间距
所以index.css中添加代码如下:
input[type="text"]{ width:300px; height:30px; margin-top: 10px!important;}可编辑的输入框设置
1、这里我们可以使用enabled知识点来设置了,input[type="text"]:enabled来匹配,然后带2个像素的灰色左边边框,且背景色为浅绿
所以index.css中添加代码如下:
input[type="text"]:enabled { border-left:2px solid lightgray; background-color:lightgreen;}按钮设置
1、宽度为150px,高40px
所以index.css中添加代码如下:
input[type="button"]{ width:150px; height:40px;}h2 标题设置
1、标题要居中,且上下存在padding
所以index.css中添加代码如下:
h2{ text-align:center; padding:10px 0!important;}好,到目前为止,我们把想到的样式全部写好了,具体不对,我们再来修改
目前为止,css所有内容如下:
.container *{ padding:0; margin:0;}.container{ width:380px; margin:0 auto; padding:20px;}form{ border:1px solid lightgray;}.avatar{ text-align: center; padding:10px 0!important;}.avatar img{ width: 40px; border: 1px solid gray; border-radius: 40px; padding: 10px;}ul li{ list-style: none;}.item{ padding-left: 50px; height: 60px; line-height: 60px; background-size: 40px; background-position-y: center; background-position-x: left; background-repeat: no-repeat;}.age{ background-image: url(../images/age.png);}.sfz{ background-image: url(../images/sfz.png);}.sj{ background-image: url(../images/sj.png);}.addr{ background-image: url(../images/addr2.png);}input[type="text"]{ width:300px; height:30px; margin-top: 10px!important;}input[type="text"]:enabled { border-left:2px solid lightgray; background-color:lightgreen;}input[type="button"]{ width:150px; height:40px;}h2{ text-align:center; padding:10px 0!important;}将css加入html中
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>属性选择器:enabled</title> <link href="css/index.css" rel="stylesheet" type="text/css"></head><body> <div class="container"> <h2 class="title"> 请完善信息 </h2> <form action="#"> <ul> <li class="avatar"> <img src="images/avatar.jpg" /> </li> <li class="item age"> <input type="text" id="enabled" value="请输入年龄" /> </li> <li class="item sfz"> <input type="text" id="enabled" value="请输入身份证"/> </li> <li class="item sj"> <input type="text" id="enabled" value="请输入手机号" /> </li> <li class="item addr"> <input type="text" id="disabled" value="湖南" disabled="disabled" /> </li> <li class="item"> <input type="button" value="提交" /> <input type="button" value="取消" /> </li> </ul> </form> </div></body></html>运行结果如下:
仔细观察,发现Ul没有居中,所以还要对ul设置一下
把以下代码加入css中
分析:
1、因为li有50的左padding,然后每个文本框都有边框,且有自己的宽度,所以宽度355,要居中,所以需要margin
ul{ width: 355px; margin: 0 auto!important;}运行效果如下:
总结:1、学习了结构性伪类选择器—enabled用法,它可以批量获取到所有可编辑的元素
以上就是CSS属性选择器:enabled的案例解析(代码实例)的详细内容,更多请关注php中文网其它相关文章!
微信分享相关标签:CSS属性 enabled本文原创发布php中文网,转载请注明出处,感谢您的尊重!上一篇:CSS中单位px、rem、em浅析下一篇:10个 你可能不熟悉的 css伪类 及其用例介绍相关文章
相关视频
disabled和enabled怎么用?disab...css3 如何实现进度条效果CSS中单位px、rem、em浅析10个 你可能不熟悉的 css伪类 及其用例介绍CSS属性选择器:enabled的案例解析(代码实...使用CSS3过渡属性使用CSS3渐变、倒影属性使用CSS3多列布局属性使用CSS3服务器端字体属性网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论立即提交专题推荐独孤九贱-php全栈开发教程全栈 100W+
主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门
玉女心经-web前端开发教程入门 50W+
主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门
天龙八部-实战开发教程实战 80W+
主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习
作者信息易达
有偿投稿用户
最近文章CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析(代码实例)122CSS3中结构性伪类选择器—:first-of-type实现名言标签(代码实例 )143结构性伪类选择器—nth-child实现彩色表格案例(代码实例 )163发布技术文章最新文章热门排行10个 你可能不熟悉的 css伪类 及其用例介绍CSS属性选择器:enabled的案例解析(代码实例)CSS中单位px、rem、em浅析css3 如何实现进度条效果css实现背景图片拉伸填充CSS 实现拖拽改变布局大小CSS3 实现响应式手风琴如何实现css代码复用html怎么添加背景图片且让图片平铺整个页面?(代码示例)css如何设置背景图片?background属性添加背景图片css如何设置背景颜色透明?css设置背景颜色透明度的两种方法介绍html a标签怎么设置颜色?超链接的颜色设置总结(css样式)使用css3在网页中实现各种三角形样式集合(原理解析)css如何设置透明度?设置透明度的两种方法(代码实例)css实现背景颜色半透明的两种方法css3如何设置边框颜色渐变?css3边框颜色渐变的两种实现方法推荐视频教程CSS3进阶视频教程CSS 4.2.4参考手册CSS视频教程-玉女心经版CSS 代码实例CSS3 极速入门视频教程分类php视频教程html视频教程css视频教程JS视频教程jQuery视频教程mysql视频教程Linux视频教程Python视频教程article_status = 500596;网站首页 PHP视频PHP实战PHP代码PHP手册词条手记编程词典php中文网:公益在线php培训,帮助PHP学习者快速成长! 合肥彼岸互联信息技术有限公司
Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 皖B2-20150071-9 皖公网安备 34010402701654号 关于我们免责申明赞助与捐赠广告合作
座机号码:0551-64933227 安徽省合肥市政务新区置地广场D座2101
var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?8cc45d54c337ca616c34b1cf747da91c";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();$('.content').viewer();