css3偽類選擇器enabled的使用方法

這篇文章將為大家詳細講解有關css3偽類選擇器enabled的使用方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯公司公司2013年成立，是專業(yè)互聯網技術服務公司，擁有項目成都網站建設、做網站網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元晉中做網站,已為上家服務,為晉中各地企業(yè)和個人服務,聯系電話:028-86922220

:enabled 選擇器匹配每個啟用的的元素（主要用于表單元素）。:enabled 選擇器不匹配任何無法禁用的元素。

問題：

1、實現以下表單，且使用純DIV+CSS，必須使用選擇器—enabled

css3偽類選擇器enabled的使用方法

附加說明：

1、年齡，身份證，手機號，均是可以輸入的，但是地址輸入框不可以輸入，默認就是湖南

2、整體寬度380,上下左右padding為20，整體居中顯示

3、頭像圖標寬為40，其他圖標大小也是40

現在來具體操作

1、準備素材：根據目標得知，看到的圖標都是要切的素材

2、創(chuàng)建好index.html，寫好架構，架構如何分析呢

思路分析：

1、目標分為一個標題+一個表單

2、表單我們可以通過ul來布局，且li里的圖標我們將他們作為背景這樣可以很簡單的讓圖標在li內垂直居中，且居左

好，先按照分析，寫好思路，暫時不管css的實現

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>屬性選擇器:enabled</title>
</head>
<body>
    <div class="container">
        <h3 class="title">
            請完善信息
        </h3>
        <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、寫樣式，創(chuàng)建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，且?guī)A形邊框，上下左右均有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;
}

h3 標題設置

1、標題要居中，且上下存在padding

所以index.css中添加代碼如下：

h3{
    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;
}
h3{
    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">
        <h3 class="title">
            請完善信息
        </h3>
        <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>

運行結果如下：

css3偽類選擇器enabled的使用方法

仔細觀察，發(fā)現Ul沒有居中，所以還要對ul設置一下

把以下代碼加入css中

分析：

1、因為li有50的左padding,然后每個文本框都有邊框，且有自己的寬度，所以寬度355，要居中，所以需要margin

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

運行效果如下：

css3偽類選擇器enabled的使用方法

關于css3偽類選擇器enabled的使用方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享文章：css3偽類選擇器enabled的使用方法
分享鏈接：http://jinyejixie.com/article18/ijjhdp.html

成都網站建設公司_創(chuàng)新互聯，為您提供靜態(tài)網站、企業(yè)網站制作、用戶體驗、品牌網站制作、域名注冊、Google

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯

猜你還喜歡下面的內容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

css3偽類選擇器enabled的使用方法

問題：

現在來具體操作