国产激情视频专区在线观看_av天堂最新一区二区三区_人妻系列无码不卡免费专区_亚洲欧美日韩综合在线一

返回列表2015.09.23

CSS 代碼規(guī)范

良好的 CSS 書(shū)寫(xiě)規(guī)范在類名命名、代碼定位、后續(xù)開(kāi)發(fā)等負(fù)面都能大大提高效率。同時(shí)也方便不同的開(kāi)發(fā)者進(jìn)行理解。


1、以模塊為單位進(jìn)行派生(模塊+派生),書(shū)寫(xiě)順序?yàn)閺纳系较?,從外到里,如?/h3>
/*文章列表*/
ul.list .li{}
ul.list .li .cover{}
ul.list .li .cover img{}
ul.list .li .summary{}
ul.list .li .summary p{}
ul.list .li .data{}
ul.lise .li .data span{}

/*文章列表頁(yè)邊欄*/
.news-sidebar ul{}
.news-sidebar ul li{}
.news-sidebar ul li a{}
.news-sidebar ul li a .line{}
.news-sidebar ul li a .data{}


2、需要定義命名空間的以中橫桿進(jìn)行間隔(不要用駝峰法或下橫杠法) 如:

.list-left:{} 
.list-right:{} 
.news-sidebar{}


3、PC 瀏覽器寬度兼容

非特殊情況都將網(wǎng)頁(yè)主體寬度定位 1188px,所以默認(rèn)樣式是基于 1188px 進(jìn)行布局的

當(dāng)瀏覽器寬度小于等于 1366 時(shí)候網(wǎng)頁(yè)主體寬度切換為 960px;

需要做 960px 兼容時(shí)只需在對(duì)應(yīng)的樣式前面加 .w960 派生,如:

.list-left:{ fone-size:14px;}
.w960  .list-left:{ fone-size:12px;}


4、移動(dòng)端兼容書(shū)寫(xiě)順序(以MAX值為界,值越大越靠前)。如:

  注: 1024 為pad 橫版 768 為 pas 豎版 480 為觸屏手機(jī)

max width:1024px
max width:1024px and min width:xxx
max width:768px
max width:768px and min width:xxx
max width:480px
max width:480px and min width:xxx		


5、CSS 所有兼容版本書(shū)寫(xiě)順序?yàn)?以模塊為單位):主體寬度1188px、主體寬度960px、移動(dòng)版。如:

ul.list .li{}
ul.list .li .cover{}
ul.list .li .cover img{}
ul.list .li .summary{}
ul.list .li .summary p{}
ul.list .li .data{}
ul.lise .li .data span{}
.w960 ul.list .li{}
.w960 ul.list .li .cover{}
.w960 ul.list .li .cover img{}
.w960 ul.list .li .summary{}
.w960 ul.list .li .summary p{}
.w960 ul.list .li .data{}
.w960 ul.lise .li .data span{}
@media screen and (max-width:1024px){ 
	ul.list .li{}
	ul.list .li .cover{}
	ul.list .li .cover img{}
	ul.list .li .summary{}
	ul.list .li .summary p{}
	ul.list .li .data{}
	ul.lise .li .data span{}
}
@media screen and (max-width:768px) and (min-width:480px){ 
	ul.list .li{}
	ul.list .li .cover{}
	ul.list .li .cover img{}
	ul.list .li .summary{}
	ul.list .li .summary p{}
	ul.list .li .data{}
	ul.lise .li .data span{}
}
@media screen and (max-width:480px){ 
	ul.list .li{}
	ul.list .li .cover{}
	ul.list .li .cover img{}
	ul.list .li .summary{}
	ul.list .li .summary p{}
	ul.list .li .data{}
	ul.lise .li .data span{}
}


6、其他規(guī)范

    1)盡可能的使用百分比進(jìn)行布局,可以減少版本兼容的工作難度


    2)非特殊情況 不要使用兩種尺寸單位對(duì)同一個(gè)盒模型進(jìn)行操作。如:

    div{ width:50%; height:300px;} //這樣是不正確的


    3)非特殊情況 不可以為 css 創(chuàng)建 id 選擇器


    4)兄弟選擇器要進(jìn)行換行。如:

    .news-list,
    .show-list,
    .abot-list{/*...*/}


    5)CSS 單類書(shū)寫(xiě)順序?yàn)椋?/p>

        顯示:diplay

        定位:position、top、right、buttom、left

         層級(jí):z-index

        浮動(dòng):float

        盒模型:width、height、margin、padding、border

        文本:color、font、text-decoration、line-height

        背景:background


    6)多個(gè)屬性之間必須換行,選擇器里就單個(gè)屬性的 可以不換行但是左花括號(hào)要向前留一個(gè)空格 如:

        .news-list{
    	    width:87%;
	    margin-left:2%;
	}
        .news-list li a{ display:block;}


    7)最后一個(gè)屬性值必須以封號(hào)結(jié)束。


7、基礎(chǔ)CSS,以下樣式為系統(tǒng)內(nèi)置,無(wú)需在模板開(kāi)發(fā)是重復(fù)書(shū)寫(xiě)

        /*初始化*/
		@charset "utf-8";
		body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;}
		body{font:12px Arial,"Microsoft Yahei","微軟雅黑","宋體",Helvetica,sans-serif; -webkit-text-size-adjust:100%; }
		h1,h2,h3,h4,h5,h6{ font-weight:400;}
		a{color:#333;text-decoration:none; transition:color .3s;}
		a:hover{text-decoration:none;}
		li{list-style:none;}
		img{border:0;vertical-align:middle;}
		table{border-collapse:collapse;border-spacing:0;}
		p{word-wrap:break-word}

		/*文章內(nèi)容樣式初始化*/
        .default-article-content a{ color:blue;}
        .default-article-content ul{ padding-left: 20px;}
        .default-article-content li{ list-style-type: inherit;}
                
		/*網(wǎng)頁(yè)寬度*/
		.wp{ width:1188px; margin:0 auto;}
		.w960 .wp{ width:960px;}

		/*左右浮動(dòng)*/
		.l{float:left;}
		.r{float:right;}

		/*清除浮動(dòng)*/
		.cl{zoom:1;}
		.cl:after{content:"."; display:block; height:0px; clear:both; visibility:hidden;}

		/*強(qiáng)制單行文本*/
		.s{white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block;}

		/*邊距*/
		.mr0{ margin-right:0 !important;}

		/*快轉(zhuǎn)化 可見(jiàn)*/
		.block{ display:block !important;}
		
		/*加入收藏 關(guān)聯(lián)了功能*/
		#SetHome,
                #collection{
	            cursor:pointer;
                }


8、規(guī)范是開(kāi)放式的,隨時(shí)可以補(bǔ)充,有好的想法和建議,可以對(duì)規(guī)范或者內(nèi)置 基CSS 進(jìn)行補(bǔ)充和修改