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

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

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

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

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

問題：

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

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

附加說明：

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

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

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

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

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

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

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

思路分析：

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

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

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

<!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="請輸入手機(jī)號" />
                </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、根據(jù)附加說明得知，寬380px,居中顯示，所以需要margin:0 auto,上下左右均有間距

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

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

form 表單

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

所以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的公共樣式設(shè)置

1、左邊因為有背景圖標(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、為每個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類型輸入框公共樣式設(shè)置

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

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

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

}

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

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

所以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;
}

好，到目前為止，我們把想到的樣式全部寫好了，具體不對，我們再來修改

目前為止，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">
            請完善信息
        </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="請輸入手機(jī)號" />
                </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>

運行結(jié)果如下：

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

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

把以下代碼加入css中

分析：

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

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

運行效果如下：

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

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

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

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

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

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

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