css3偽類(lèi)選擇器enabled的使用方法-創(chuàng)新互聯(lián)

創(chuàng)新互聯(lián)www.cdcxhl.cn八線(xiàn)動(dòng)態(tài)BGP香港云服務(wù)器提供商，新人活動(dòng)買(mǎi)多久送多久，劃算不套路！

成都創(chuàng)新互聯(lián)長(zhǎng)期為上千客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為湘潭企業(yè)提供專(zhuān)業(yè)的網(wǎng)站建設(shè)、網(wǎng)站制作，湘潭網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

這篇文章將為大家詳細(xì)講解有關(guān)css3偽類(lèi)選擇器enabled的使用方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

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

問(wèn)題：

1、實(shí)現(xiàn)以下表單，且使用純DIV+CSS，必須使用選擇器—enabled

css3偽類(lèi)選擇器enabled的使用方法

附加說(shuō)明：

1、年齡，身份證，手機(jī)號(hào)，均是可以輸入的，但是地址輸入框不可以輸入，默認(rèn)就是湖南

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

3、頭像圖標(biāo)寬為40，其他圖標(biāo)大小也是40

現(xiàn)在來(lái)具體操作

1、準(zhǔn)備素材：根據(jù)目標(biāo)得知，看到的圖標(biāo)都是要切的素材

css3偽類(lèi)選擇器enabled的使用方法     css3偽類(lèi)選擇器enabled的使用方法     css3偽類(lèi)選擇器enabled的使用方法

css3偽類(lèi)選擇器enabled的使用方法      css3偽類(lèi)選擇器enabled的使用方法

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

思路分析：

1、目標(biāo)分為一個(gè)標(biāo)題+一個(gè)表單

2、表單我們可以通過(guò)ul來(lái)布局，且li里的圖標(biāo)我們將他們作為背景這樣可以很簡(jiǎn)單的讓圖標(biāo)在li內(nèi)垂直居中，且居左

好，先按照分析，寫(xiě)好思路，暫時(shí)不管css的實(shí)現(xiàn)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>屬性選擇器:enabled</title>
</head>
<body>
    <div class="container">
        <h3 class="title">
            請(qǐng)完善信息
        </h3>
        <form action="#">
            <ul>
                <li class="avatar">
                    <img src="images/avatar.jpg" />
                </li>
                <li class="item age">
                    <input type="text" id="enabled" value="請(qǐng)輸入年齡" />
                </li>
                <li class="item sfz">
                    <input type="text" id="enabled" value="請(qǐng)輸入身份證"/>
                </li>
                <li class="item sj">
                    <input type="text" id="enabled" value="請(qǐng)輸入手機(jī)號(hào)" />
                </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、寫(xiě)樣式 ，創(chuàng)建css文件夾，里面新建index.css，里面的樣式怎么寫(xiě)了，以下是分析思路

思路分析：

.container * 公共樣式

1、寫(xiě)了這么多案例，這一步基本上是必不可少的，也是為了減少代碼冗余性，所以在這里我們可以定義公共的樣式

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

.container *{
    padding:0;
    margin:0;
}

.container 外層容器

1、根據(jù)附加說(shuō)明得知，寬380px,居中顯示，所以需要margin:0 auto,上下左右均有間距

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

.container{
    width:380px;
    margin:0 auto;
    padding:20px;
}

form 表單

1、根據(jù)目標(biāo)得知，它有一個(gè)灰色邊框

所以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不帶黑色圓點(diǎn)，所以無(wú)樣式

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

ul li{
    list-style: none;
}

.item li的公共樣式設(shè)置

1、左邊因?yàn)橛斜尘皥D標(biāo)，所以需要padding-left,高度60，為了讓他居中，所以line-height也要設(shè)置成一樣

2、背景圖標(biāo)大小40，且水平方向上居左，垂直方向上居中

3、背景圖標(biāo)不重復(fù)

所以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的背景圖標(biāo)設(shè)置

1、為每個(gè)li設(shè)置自己的背景圖片

所以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類(lèi)型輸入框 公共樣式設(shè)置

1、寬度為300,高30，存在上間距

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

input[type="text"]{
    width:300px;
    height:30px;
    margin-top: 10px!important;

}

可編輯的輸入框設(shè)置

1、這里我們可以使用enabled知識(shí)點(diǎn)來(lái)設(shè)置了，input[type="text"]:enabled來(lái)匹配，然后帶2個(gè)像素的灰色左邊邊框，且背景色為淺綠

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

input[type="text"]:enabled {
    border-left:2px solid lightgray;
    background-color:lightgreen;
}

按鈕設(shè)置

1、寬度為150px，高40px

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

input[type="button"]{
    width:150px;
    height:40px;
}

h3 標(biāo)題設(shè)置

1、標(biāo)題要居中，且上下存在padding

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

h3{
    text-align:center;
    padding:10px 0!important;
}

好，到目前為止，我們把想到的樣式全部寫(xiě)好了，具體不對(duì)，我們?cè)賮?lái)修改

目前為止，css所有內(nèi)容如下：

.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">
            請(qǐng)完善信息
        </h3>
        <form action="#">
            <ul>
                <li class="avatar">
                    <img src="images/avatar.jpg" />
                </li>
                <li class="item age">
                    <input type="text" id="enabled" value="請(qǐng)輸入年齡" />
                </li>
                <li class="item sfz">
                    <input type="text" id="enabled" value="請(qǐng)輸入身份證"/>
                </li>
                <li class="item sj">
                    <input type="text" id="enabled" value="請(qǐng)輸入手機(jī)號(hào)" />
                </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>

運(yùn)行結(jié)果如下：

css3偽類(lèi)選擇器enabled的使用方法

仔細(xì)觀察，發(fā)現(xiàn)Ul沒(méi)有居中，所以還要對(duì)ul設(shè)置一下

把以下代碼加入css中

分析：

1、因?yàn)閘i有50的左padding,然后每個(gè)文本框都有邊框，且有自己的寬度，所以寬度355，要居中，所以需要margin

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

運(yùn)行效果如下：

css3偽類(lèi)選擇器enabled的使用方法

關(guān)于css3偽類(lèi)選擇器enabled的使用方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

名稱(chēng)欄目：css3偽類(lèi)選擇器enabled的使用方法-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://bm7419.com/article18/cecjgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)站營(yíng)銷(xiāo)、網(wǎng)站維護(hù)、網(wǎng)站排名、建站公司、定制網(wǎng)站

廣告

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

h5響應(yīng)式網(wǎng)站建設(shè)