直接入題

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、五蓮ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的五蓮網(wǎng)站制作公司

1. 每個(gè)單詞的首字母大寫(xiě)
   其實(shí)我第一次看到這個(gè)功能的時(shí)候就是使用 JS 去實(shí)現(xiàn)這個(gè)功能，想都沒(méi)想 CSS 可以完成這個(gè)功能。馬上就屁顛屁顛的寫(xiě)了一個(gè)方法：
   function capitalizeFirst( str ) {
   let result = '';
   result = str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
   return result
   }
   復(fù)制代碼寫(xiě)完這個(gè)方法后，還有點(diǎn)小得意，也就沒(méi)想其他方案。直到有一天看到 CSS 也能做這個(gè)功能的時(shí)候，我才反應(yīng)過(guò)來(lái)明明一句 CSS 就能解決的問(wèn)題，我卻使用了更復(fù)雜的方案。
   CSS 方案如下：
   .capitalizeFirst-css {
   text-transform: capitalize;
   }
   復(fù)制代碼是不是特別簡(jiǎn)單（代碼在上面的 blog 倉(cāng)庫(kù)，訪問(wèn) cssDo 路由便可，下面的案例都是這個(gè)路由下）：

text-transform 簡(jiǎn)單介紹

這是 CSS2 中的屬性，參數(shù)有 capitalize | uppercase | lowercase | none

參數(shù)介紹：

none： 默認(rèn)。定義帶有小寫(xiě)字母和大寫(xiě)字母的標(biāo)準(zhǔn)的文本。
capitalize： 文本中的每個(gè)單詞以大寫(xiě)字母開(kāi)頭。
uppercase： 定義僅有大寫(xiě)字母。
lowercase： 定義無(wú)大寫(xiě)字母，僅有小寫(xiě)字母。

從這個(gè)屬性我們可以知道全部大寫(xiě)（小寫(xiě)）的需求這個(gè)屬性也能輕易實(shí)現(xiàn)。

2. 單選高亮
   可能你看到“單選高亮”沒(méi)反應(yīng)過(guò)來(lái)，直接來(lái)張圖片你就馬上清楚了：

不知道你是否第一次看到這種單選高亮的需求時(shí)，是怎么處理的。我第一次直接是用 JS 控制的。后來(lái)我發(fā)現(xiàn)這個(gè)需求用 CSS 更方便處理。
主要代碼就是一段 CSS 代碼：
// 省略部分代碼，詳細(xì)代碼看倉(cāng)庫(kù)
.input:checked + .colors {
border-color: #e63838;
color: #e63838;
}

<div class="single-check">
<input class="input" type="radio" name="colors" value="1">
<div class="colors">天空之境</div>
</div>
復(fù)制代碼看效果：

兩個(gè)選擇器的區(qū)別
~ 選擇器：查找某個(gè)元素后面的所有兄弟元素

• 選擇器：查找某個(gè)元素后面緊鄰的兄弟元素
  擴(kuò)展
  其實(shí)這個(gè)技巧也完全可以使用在導(dǎo)航欄的交互效果，個(gè)人覺(jué)得可以簡(jiǎn)化一部分工作。
  3、多列等高問(wèn)題
  之前做 pc 端的客戶畫(huà)像需求時(shí)，遇到需要左右兩邊等到的需求（左邊塊的高度會(huì)隨著內(nèi)容變化）。
  最初我使用的 JS 計(jì)算高度再賦值，可是這樣會(huì)有頁(yè)面閃動(dòng)的效果。所以找到了兩種 CSS 的處理方案：

每列設(shè)置一個(gè)很大的 padding，再設(shè)置一個(gè)很大的負(fù)的 margin
使用 display: table;

第一種有明顯的缺陷：

border-bottom 看不到了
設(shè)置的下方的兩個(gè)圓角也不見(jiàn)了

所以我使用了 display: table; 的方式來(lái)實(shí)現(xiàn)等高，可以說(shuō)非常的方便。

建議不要一味的抵觸 table，有的場(chǎng)景還是可以使用的。

4、表單驗(yàn)證

先聲明：這里沒(méi)有用到 JS，不過(guò)用到了 HTML5 關(guān)于 <input> 的新屬性 —— pattern( 檢查控件值的正則表達(dá)式 )。
還有一點(diǎn)：其實(shí)我在實(shí)際項(xiàng)目中沒(méi)這么用過(guò)。

代碼如下：
input[type="text"]:invalid ~ input[type="submit"] {
display: none
}

<div class="form-css">
<input type="text" name="tel" placeholder="輸入手機(jī)號(hào)碼" pattern="^1[3456789]\d{9}$" required><br>
<input type="text" name="smscode" placeholder="輸入驗(yàn)證碼" pattern="\d{4}" required><br>
<input type="submit" ></input>
</div>
復(fù)制代碼效果如下（樣式不好看的問(wèn)題請(qǐng)忽略）：

invalid 偽類和 vaild 偽類
valid 偽類，匹配通過(guò) pattern 驗(yàn)證的元素
invalid 偽類，匹配未通過(guò) pattern 驗(yàn)證的元素

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站題目：這些功能其實(shí)不需要JS，CSS就能搞定-創(chuàng)新互聯(lián)
鏈接分享：http://jinyejixie.com/article4/disdie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、電子商務(wù)、品牌網(wǎng)站建設(shè)、定制開(kāi)發(fā)、軟件開(kāi)發(fā)、域名注冊(cè)

廣告

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