切版切版網(wǎng)框架
切版css1.0是切版網(wǎng)目前內(nèi)部使用的框架，甚至于不算是一個框架，它只是提供了一個可靠的基礎去創(chuàng)建你一個前端項目，提供了一段來自經(jīng)驗的css重寫，并且約束了一些命名上的規(guī)范。
它沒法和成熟的css框架媲美，只是一些樂于分享的代碼片段。
關于命名的極簡主義
view--vw
nav--nv
left--lt
right--rt
head -- hd
body --bd
foot --ft
list--lst
wrap--wp
標配
.about_view_left{
width:auto;
}
.about_list_right{
width:auto;
}
瘦身
.ab_vw_lt{
width:auto;
}
.ab_lst_rt{
width:auto;
}
圖片規(guī)范
圖片命名以img_01.png 依次往后面順，大banner圖片，數(shù)據(jù)圖片均保存為jpg圖片，透明圖片、小圖標之類都存儲為png24圖片。
結構用途的圖片放入img目錄，數(shù)據(jù)圖片放入images目錄下。
如果涉及到多人協(xié)作
如果涉及到多人協(xié)作，通過 style_wz（人名首字母）.css命名；圖片命名以人名（wz_1.png）命名。
文檔
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> <title>切版</title> <!--基礎樣式--> <link rel="stylesheet" href="css/qieban.css"> <!--css3動畫庫--> <link rel="stylesheet" href="css/animate.min.css"> <!--自己書寫css的地方--> <link rel="stylesheet" href="css/style.css"> <!--書寫響應式代碼的地方--> <link rel="stylesheet" href="css/responsive.css"> <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" /> <!--低版本瀏覽器添加html5支持--> <!--[if lt IE 9]> <script src="js/html5.js"></script> <![endif]--> </head> <body> <!--添加jquery庫文件--> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <!--好用小巧的響應式幻燈片--> <script type="text/javascript" src="js/jquery.glide.js"></script> <!--添加css3前綴支持--> <script type="text/javascript" src="js/prefixfree.min.js"></script> <!--快速讓網(wǎng)站絢麗起來--> <script type="text/javascript" src="js/wow.min.js"></script> <!--自己寫JS的地方--> <script type="text/javascript" src="js/script.js"></script> </body> </html>
響應式
@media only screen and (max-width:800px) {
}
旋轉
/*360旋轉*/
@keyframes spin {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(-360deg);
}
}評論
圖片
表情