寫(xiě)css的毛病

wenyiweb 發(fā)布于2019-08-28 17:56 / 1456人閱讀

摘要：最近公司要做手機(jī)端頁(yè)面，之前沒(méi)做過(guò)，也只是給另一邊的美工指點(diǎn)一下，不過(guò)發(fā)現(xiàn)現(xiàn)在寫(xiě)有一個(gè)毛病那就是類(lèi)型下面的代碼為什么這樣寫(xiě)，原因是在寫(xiě)或看別人的代碼時(shí)，會(huì)發(fā)現(xiàn)有很多代碼都重復(fù)于是遵循個(gè)人感覺(jué)找頁(yè)面中的共同點(diǎn)來(lái)封裝，如大小，字體等做到對(duì)

最近公司要做手機(jī)端頁(yè)面，之前沒(méi)做過(guò)，也只是給另一邊的美工指點(diǎn)一下，

不過(guò)發(fā)現(xiàn)現(xiàn)在寫(xiě)css有一個(gè)毛病

那就是類(lèi)型下面的代碼

.text-blue{color:blue}
.text-left{text-alitn:left}

.layoutLeft{float:left}
.layoutRight{float:right}

form labelCom input[type="xx"]{//code}

為什么這樣寫(xiě)，原因是在寫(xiě)或看別人的代碼時(shí)，會(huì)發(fā)現(xiàn)有很多代碼都重復(fù)

于是遵循個(gè)人感覺(jué)

找頁(yè)面中的共同點(diǎn)來(lái)封裝，如大小，字體等

做到對(duì)封裝后的class只需寫(xiě) color,background,width,height等即可重用

給標(biāo)簽找好父級(jí)，防止一些裸生效

  我說(shuō)的裸生效是指類(lèi)型

.button{width,padding,height,color}亂亂的全生效了

  舉個(gè)例子

  比如在非塊元素里用的Button那么就給Button設(shè)置為非塊的

  反之~~~

  好了，不扯了

云服務(wù)器 GPU云服務(wù)器如何寫(xiě)css html寫(xiě)css css樣式怎么寫(xiě) css的樣式

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/110901.html

相關(guān)文章

學(xué)不動(dòng)了?可能方法不太對(duì)-Grid 網(wǎng)格布局

摘要：前情提要本人是一個(gè)學(xué)渣非科班入行年了吧前端東西真的好多啊又不斷更新需要不斷的學(xué)學(xué)學(xué)在去年年底開(kāi)始我就開(kāi)始不斷的尋找學(xué)習(xí)的方法如何更加高效的學(xué)習(xí)如何才能學(xué)的又快又好在這半年來(lái)不斷的總結(jié)慢慢找到了一些方法和訣竅此文章不是網(wǎng)格布局的教學(xué)文章只前情提要 ??本人是一個(gè)學(xué)渣,非科班入行2年了吧,前端東西真的好多啊,又不斷更新.需要不斷的學(xué)學(xué)學(xué), showImg(https://user-gold-c...

happyfish 2019-05-22 16:41 評(píng)論0 收藏0
XSS全解析—初探

摘要：持久型相當(dāng)于存儲(chǔ)型跨站腳本。這玩意兒涉及到一點(diǎn)和瀏覽器引擎解析的問(wèn)題。說(shuō)正事，是支持碼形式的。的調(diào)用有幾個(gè)概念我們先來(lái)了解一下。本來(lái)說(shuō)的只用天完成的，沒(méi)想到各種事兒拖了兩天，。前些時(shí)間準(zhǔn)備面試的時(shí)候一直會(huì)遇到這個(gè)XSS，寥寥幾句話好像很簡(jiǎn)單，后來(lái)看到同學(xué)的《XSS跨站腳本攻擊剖析與防御》這本書(shū)，稍微翻看了一下，其中的學(xué)問(wèn)還是挺多的。這系列的文章就當(dāng)做讀書(shū)筆記吧。什么是XSS 聽(tīng)過(guò)很...

Lucky_Boy 2019-08-20 12:09 評(píng)論0 收藏0
【移動(dòng)端web開(kāi)發(fā)】（二）深入viewport

摘要：當(dāng)你進(jìn)行頁(yè)面放大的時(shí)候，原本在未縮放的頁(yè)面上看起來(lái)很小的尺寸，現(xiàn)在通過(guò)看上去變大了，事實(shí)上這部分的的值并沒(méi)有變化，僅僅是因?yàn)檫M(jìn)行放大后，的的值所占的屏幕分辨率的值變大了。同理的的值并沒(méi)有發(fā)生變化但是值所占的屏幕分辨率的值變小了。前言通過(guò)上一篇我們已經(jīng)大概明白viewport是什么，但是viewport并沒(méi)有那么簡(jiǎn)單，一包研究得身心疲憊，腦子一個(gè)不夠用哈哈，讓我們一起看看吧！三個(gè)v...

Baoyuan 2019-08-22 16:58 評(píng)論0 收藏0
使用GrumPHP來(lái)糾正代碼“毛病”

摘要：默認(rèn)的配置不會(huì)檢測(cè)任何代碼。參數(shù)列表質(zhì)量檢測(cè)包其他有人問(wèn)，你為什么要這么折磨自己呢其實(shí)像類(lèi)型代碼質(zhì)量工具，不是僅僅自己拿來(lái)玩的，在開(kāi)發(fā)人員略多的技術(shù)團(tuán)隊(duì)，可以通過(guò)使用它來(lái)達(dá)到代碼規(guī)范一致，如果每個(gè)人代碼都不一樣，后果不堪設(shè)想。 showImg(https://segmentfault.com/img/bVbtfeF?w=1796&h=724); 前言我一生的文章都會(huì)放在這里，我的博客...

jubincn 2019-07-01 12:50 評(píng)論0 收藏0
墨瞳漫畫(huà)h5一期 vuejs總結(jié)

摘要：歡迎體驗(yàn)提墨瞳漫畫(huà)這里踩的坑主要是組件的重用。這樣可以防止圖和圖片大小不一樣引起的頁(yè)面跳動(dòng)繼而導(dǎo)致的加載圖片時(shí)機(jī)錯(cuò)誤?？缬驎r(shí)，會(huì)先發(fā)送一個(gè)空的請(qǐng)求來(lái)查看接口是不是支持跨域，再發(fā)送一次真實(shí)請(qǐng)求。前言博主也是vuejs萌新，公司僅我一個(gè)前端，收到做h5的需求后，馬上想到要用下vuejs，于是說(shuō)服領(lǐng)導(dǎo)，開(kāi)始慢慢鉆研，現(xiàn)在記錄一下踩到的坑。這些坑主要是在一些組件的使用上，其它的只要好好看官...

王巖威 2019-08-20 11:10 評(píng)論0 收藏0