热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS属性选择器:enabled的案例解析(代码实例)

本文目标:1、掌握CSS中结构性伪类选择器—enabled的用法问题:1、实现以下表单,且使用纯DIV+CSS,必须使用选择器—enabled附加说明...

本文目标:

1、掌握CSS中结构性伪类选择器—enabled的用法

问题:

1、实现以下表单,且使用纯DIV+CSS,必须使用选择器—enabled

2、创建好index.html,写好架构,架构如何分析呢

思路分析:

1、目标分为一个标题+一个表单

2、表单我们可以通过ul来布局,且li里的图标我们将他们作为背景这样可以很简单的让图标在li内垂直居中,且居左

好,先按照分析,写好思路,暂时不管css的实现




    
    


    

请完善信息

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中




    
    
    



    

请完善信息

运行结果如下:

仔细观察,发现Ul没有居中,所以还要对ul设置一下

把以下代码加入css中

分析:

1、因为li有50的左padding,然后每个文本框都有边框,且有自己的宽度,所以宽度355,要居中,所以需要margin

ul{
    width: 355px;
    margin: 0 auto!important;
}

运行效果如下:

总结:

1、学习了结构性伪类选择器—enabled用法,它可以批量获取到所有可编辑的元素

以上就是CSS属性选择器:enabled的案例解析(代码实例)的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • 本文介绍了如何处理MySQL数据库中表 'xdb.auditlog' 被标记为已损坏的问题,并提供了解决方案。 ... [详细]
  • 本文介绍了多种Eclipse插件,包括XML Schema Infoset Model (XSD)、Graphical Editing Framework (GEF)、Eclipse Modeling Framework (EMF)等,涵盖了从Web开发到图形界面编辑的多个方面。 ... [详细]
  • 本文详细介绍了一种实现PopupWindow全屏显示且能有效隐藏虚拟按键的技术方案,适用于Android开发。此方法经过实际测试,表现良好,兼容性优秀。 ... [详细]
  • BeautifulSoup4 是一个功能强大的HTML和XML解析库,它能够帮助开发者轻松地从网页中提取信息。本文将介绍BeautifulSoup4的基本功能、安装方法、与其他解析工具的对比以及简单的使用示例。 ... [详细]
  • 本文介绍了如何使用Maven命令对Spring Boot项目中的子模块进行独立打包,包括依赖树的查看、项目的运行和打包等基本操作。 ... [详细]
  • 深入理解异步多线程编程模型
    现代计算机系统中的CPU通过并行处理提高效率,但所谓的并发处理实际上是一种基于轮询的模拟并行。本文探讨了现代处理器如何通过虚拟化技术实现更高的并发性能,以及在.NET框架中如何有效利用线程和异步编程模式。 ... [详细]
  • 本文探讨了 Boost 库中的 Program Options 组件,这是一个强大的工具,用于解析命令行参数和配置文件。文章介绍了如何正确设置和使用该组件,包括处理复杂选项和负数值的方法。 ... [详细]
  • 本文通过具体示例详细介绍了 Python 中的装饰器和装饰类的使用方法,包括带参数的装饰器和装饰类的应用场景。 ... [详细]
  • 解决 Pytest 运行时出现 FileNotFoundError 的方法
    在使用 Pytest 进行测试时,可能会遇到 FileNotFoundError 错误,提示无法找到指定的文件或目录。本文将探讨该错误的原因及解决方案。 ... [详细]
  • HDU1085 捕获本·拉登!
    问题描述众所周知,本·拉登是一位臭名昭著的恐怖分子,他已失踪多年。但最近有报道称,他藏匿在中国杭州!虽然他躲在杭州的一个洞穴中不敢外出,但近年来他因无聊而沉迷于数学问题,并声称如果有人能解出他的题目,他就自首。 ... [详细]
  • SpringBoot新手入门指南
    本文旨在为初次接触SpringBoot的开发者提供一份详细的入门指导,包括如何快速搭建并运行一个简单的SpringBoot应用。通过本文,读者将了解Maven项目的构建、必要的配置文件设置以及基本的应用开发流程。 ... [详细]
  • 本视频详细介绍了如何利用J2EE、JBPM 3.x/4.3、Flex流程设计器、jQuery以及授权认证机制构建高效的企业普及版贝斯OA及工作流管理系统。 ... [详细]
  • BL550721、特点液晶驱动输出:Common输出4线,Segment输出36线内置显示寄存器364144bit2线串行接口(SCL,SDA)内置震荡电路内置液晶驱动电源电路13 ... [详细]
  • 本文介绍了如何在Windows操作系统中安装FFTW库,并详细说明了使用Visual Studio 2010进行4096点快速傅里叶变换(FFT)的步骤。包括下载预编译文件、生成库文件以及配置环境等关键环节。 ... [详细]
  • javascript——对象的概念——函数 1 (函数对象的属性和方法)
    一、创建函数函数是一种对象:Function类是对象,可以通过Function实例化一个函数,不过最多的还是利用function来创建函数。方式一:利用Function类来实例化函 ... [详细]
author-avatar
YW1232602897663_231
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有