开始一个项目
新建一个项目文件夹
文件目录
项目文件夹目录名为www 包含以下文件
目录说明
css/ 目录
index.html 初始化模板
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> <meta name="renderer" content="webkit" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <meta name="format-detection" content="telephone=no" /> <title>index</title> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" href="css/cui.css" /> <link rel="stylesheet" href="css/cui-rel.css" /> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/style-rel.css" /> <script type="text/javascript" src="js/jquery.js"></script> <!--[if IE]> <script src="js/html5.js"></script> <script src="js/respond.js"></script> <![endif]--> </head> <body> <div class="wp"> </div> </body> </html>
cui.css 是初始化样式和默认常用类库
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; } body, button, input, select, textarea { font-size: 14px; line-height: 1.41176471; font-family: "微软雅黑"; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } address, cite, dfn, em, var { font-style: normal; } code, kbd, pre, samp { font-family: couriernew, courier, monospace; } small { font-size: 12px; } ul, ol { list-style: none; } a { text-decoration: none; } a:hover { text-decoration: underline; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } legend { color: #000; } fieldset, img { border: 0; } button, input, select, textarea { font-size: 100%; } table { border-collapse: collapse; border-spacing: 0; } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .l,.col-l,.col_l,.col-c,.col_c { float: left; } .r,.col-r,.col_r,dt span,.ul-txt li span,.ul_txt li span { float: right; } .c { clear: both; } .n,em { font-weight: normal; font-style: normal; } .b { font-weight: bold; } .i { font-style: italic; } .fa { font-family: Arial; } .fg { font-family: Georgia; } .ft { font-family: Tahoma; } .fl { font-family: Lucida Console; } .fs { font-family: '宋体'; } .fw { font-family: '微软雅黑'; } .tc { text-align: center; } .tr { text-align: right; } .tl { text-align: left; } .tdu { text-decoration: underline; } .tdn,.tdn:hover,a.tdl:hover { text-decoration: none; } .fc0 { color: #000000; } .fc3 { color: #333333; } .fc6 { color: #666666; } .fc9 { color: #999999; } .fcr { color: red; } .fcw { color: white; } .fcb { color: blue; } .fcg { color: green; } .f0 { font-size: 0; } .f10 { font-size: 10px; } .f12 { font-size: 12px; } .f13 { font-size: 13px; } .f14 { font-size: 14px; } .f16 { font-size: 16px; } .f20 { font-size: 20px; } .f24 { font-size: 24px; } .vm { vertical-align: middle; } .vtb { vertical-align: text-bottom; } .vt { vertical-align: top; } .vn { vertical-align: -2px; } .vimg { margin-bottom: -3px; } .m0 { margin: 0; } .ml0 { margin-left: 0; } .ml5 { margin-left: 5px; } .ml10 { margin-left: 10px; } .ml20 { margin-left: 20px; } .mr0 { margin-right: 0; } .mr5 { margin-right: 5px; } .mr10 { margin-right: 10px; } .mr20 { margin-right: 20px; } .mt5 { margin-top: 5px; } .mt10 { margin-top: 10px; } .mt20 { margin-top: 20px; } .mb5 { margin-bottom: 5px; } .mb10 { margin-bottom: 10px; } .mb20 { margin-bottom: 20px; } .ml-1 { margin-left: -1px; } .mt-1 { margin-top: -1px; } .p1 { padding: 1px; } .pl5 { padding-left: 5px; } .p5 { padding: 5px; } .pt5 { padding-top: 5px; } .pr5 { padding-right: 5px; } .pb5 { padding-bottom: 5px; } .p10 { padding: 10px; } .pl10 { padding-left: 10px; } .pt10 { padding-top: 10px; } .pr10 { padding-right: 10px; } .pb10 { padding-bottom: 10px; } .p20 { padding: 20px; } .pl20 { padding-left: 20px; } .pt20 { padding-top: 20px; } .pr20 { padding-right: 20px; } .pb20 { padding-bottom: 20px; } .rel,.pr { position: relative; } .abs,.pa { position: absolute; } .dn { display: none; } .db { display: block; } .dib { -moz-inline-stack: inline-block; display: inline-block; } .di { display: inline; } .ovh { overflow: hidden; } .ovs { overflow: scroll; } .vh { visibility: hidden; } .vv { visibility: visible; } .lh14 { line-height: 14px; } .lh16 { line-height: 16px; } .lh18 { line-height: 18px; } .lh20 { line-height: 20px; } .lh22 { line-height: 22px; } .lh24 { line-height: 24px; } .fix { *zoom: 1; } .fix:after,.fix:before { display: block; content: "clear"; height: 0; clear: both; overflow: hidden; visibility: hidden; } .z { _zoom: 1; } .h1 { height: 1px; } .h5 { height: 5px; } .h10,.h { height: 10px; } .h15 { height: 15px; } .h20 { height: 20px; } .h1,.h5,.h10,.h15,.h20,.h { font-size: 0px; line-height: 0; overflow: hidden; clear: both; }
style.css 为自己写的样式
/* 公共 ----------------------------------------------------- */ body{} a{} a:hover{} /* 通用模块 -------------------------------------------------- */ /* 布局 */ .wp{ width:1200px; margin:0 auto;}
cui-rel.css 响应式框架
/* [cui响应式框架使用说明] 按比例分配网格 5%-100% .g-* 默认 大屏幕电脑 .p-g-* 1200以下 普通屏幕电脑 .t-g-* 960以下 平板电脑 .m-g-* 768以下 手机 .s-g-* 480以下 手机 .*-g-p0 左右间距清零,默认间距是5*2=10 .*-li-2 3 4 5 6 7 8 9 10 写在ul上控制li的宽度 */ .g-5, .m-g-5, .t-g-5, .p-g-5, .g-10, .m-g-10, .t-g-10, .p-g-10, .g-15, .m-g-15, .t-g-15, .p-g-15, .g-20, .m-g-20, .t-g-20, .p-g-20, .g-25, .m-g-25, .t-g-25, .p-g-25, .g-30, .m-g-30, .t-g-30, .p-g-30, .g-35, .m-g-35, .t-g-35, .p-g-35, .g-40, .m-g-40, .t-g-40, .p-g-40, .g-45, .m-g-45, .t-g-45, .p-g-45, .g-50, .m-g-50, .t-g-50, .p-g-50, .g-55, .m-g-55, .t-g-55, .p-g-55, .g-60, .m-g-60, .t-g-60, .p-g-60, .g-65, .m-g-65, .t-g-65, .p-g-65, .g-70, .m-g-70, .t-g-70, .p-g-70, .g-75, .m-g-75, .t-g-75, .p-g-75, .g-80, .m-g-80, .t-g-80, .p-g-80, .g-85, .m-g-85, .t-g-85, .p-g-85, .g-90, .m-g-90, .t-g-90, .p-g-90, .g-95, .m-g-95, .t-g-95, .p-g-95, .g-100, .m-g-100, .t-g-100, .p-g-100, .g-33, .m-g-33, .t-g-33, .p-g-33, .g-66, .m-g-66, .t-g-66,.p-g-66, .g-16,.m-g-16,.t-g-16,.p-g-16, .g-14,.p-g-14 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 10px; /* 默认的间距如果是5就是间距是10,如果写成10,间距就是20px , 如果调整请和g-row里的一起调整*/ padding-right: 10px; float: left; } .g-row { margin-left: -10px; margin-right: -10px; } .g-row > div,.g-row > li { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 10px; /* 默认的间距如果是5就是间距是10,如果写成10,间距就是20px , 如果调整请和g-row里的一起调整*/ padding-right: 10px; float: left; } /*Common For Max 1200*/ .g-5 {width: 5%;} .g-10 {width: 10%;} .g-15 {width: 15%;} .g-20 {width: 20%;} .g-25 {width: 25%;} .g-30 {width: 30%;} .g-35 {width: 35%;} .g-40 {width: 40%;} .g-45 {width: 45%;} .g-50 {width: 50%;} .g-55 {width: 55%;} .g-60 {width: 60%;} .g-65 {width: 65%;} .g-70 {width: 70%;} .g-75 {width: 75%;} .g-80 {width: 80%;} .g-85 {width: 85%;} .g-90 {width: 90%;} .g-95 {width: 95%;} .g-33 {width: 33.33333%;} .g-16 {width: 16.66666%;} .g-14 {width: 14.28571%;} .g-66 {width: 66.66667%;} .g-100 { clear: both; width: 100%;} /* 列表*/ .g-li-2 li{width:50%;} .g-li-3 li{width:33.33%;} .g-li-4 li{width:25%;} .g-li-5 li{width:20%;} .g-li-6 li{width:16.66%;} .g-li-7 li{width:14.28%;} .g-li-8 li{width:12.5%;} .g-li-9 li{width:11.11%;} .g-li-10 li{width:10%;} /*Common For Max 960 普通电脑尺寸 */ @media only screen and (max-width: 1199px) { .p-g-5 {width: 5%;} .p-g-10 {width: 10%;} .p-g-15 {width: 15%;} .p-g-20 {width: 20%;} .p-g-25 {width: 25%;} .p-g-30 {width: 30%;} .p-g-35 {width: 35%;} .p-g-40 {width: 40%;} .p-g-45 {width: 45%;} .p-g-50 {width: 50%;} .p-g-55 {width: 55%;} .p-g-60 {width: 60%;} .p-g-65 {width: 65%;} .p-g-70 {width: 70%;} .p-g-75 {width: 75%;} .p-g-80 {width: 80%;} .p-g-85 {width: 85%;} .p-g-90 {width: 90%;} .p-g-95 {width: 95%;} .p-g-16 {width: 16.66666%;} .p-g-14 {width: 14.28571%;} .p-g-33 {width: 33.33333%;} .p-g-66 {width: 66.66667%;} .p-g-100 { clear: both; width: 100%;} /* 列表*/ .p-li-2 li{width:50%;} .p-li-3 li{width:33.33%;} .p-li-4 li{width:25%;} .p-li-5 li{width:20%;} .p-li-6 li{width:16.66%;} .p-li-7 li{width:14.28%;} .p-li-8 li{width:12.5%;} .p-li-9 li{width:11.11%;} .p-li-10 li{width:10%;} } /*Common For Max 768 平板电脑尺寸 */ @media only screen and (max-width: 959px) { .t-g-5 {width: 5%;} .t-g-10 {width: 10%;} .t-g-15 {width: 15%;} .t-g-20 {width: 20%;} .t-g-25 {width: 25%;} .t-g-30 {width: 30%;} .t-g-35 {width: 35%;} .t-g-40 {width: 40%;} .t-g-45 {width: 45%;} .t-g-50 {width: 50%;} .t-g-55 {width: 55%;} .t-g-60 {width: 60%;} .t-g-65 {width: 65%;} .t-g-70 {width: 70%;} .t-g-75 {width: 75%;} .t-g-80 {width: 80%;} .t-g-85 {width: 85%;} .t-g-90 {width: 90%;} .t-g-95 {width: 95%;} .t-g-16 {width: 16.66666%;} .t-g-33 {width: 33.33333%;} .t-g-66 {width: 66.66667%;} .t-g-100 { clear: both; width: 100%;} .t-li-2 li{width:50%;} .t-li-3 li{width:33.33%;} .t-li-4 li{width:25%;} .t-li-5 li{width:20%;} .t-li-6 li{width:16.66%;} .t-li-7 li{width:14.28%;} .t-li-8 li{width:12.5%;} .t-li-9 li{width:11.11%;} .t-li-10 li{width:10%;} } /*Common For Max 480 手机尺寸*/ @media only screen and (max-width: 767px) { .m-g-5 {width: 5%;} .m-g-10 {width: 10%;} .m-g-15 {width: 15%;} .m-g-20 {width: 20%;} .m-g-25 {width: 25%;} .m-g-30 {width: 30%;} .m-g-35 {width: 35%;} .m-g-40 {width: 40%;} .m-g-45 {width: 45%;} .m-g-50 {width: 50%;} .m-g-55 {width: 55%;} .m-g-60 {width: 60%;} .m-g-65 {width: 65%;} .m-g-70 {width: 70%;} .m-g-75 {width: 75%;} .m-g-80 {width: 80%;} .m-g-85 {width: 85%;} .m-g-90 {width: 90%;} .m-g-95 {width: 95%;} .m-g-16 {width: 16.66666%;} .m-g-33 {width: 33.33333%;} .m-g-66 {width: 66.66667%;} .m-g-100 { clear: both; width: 100%;} .m-li-2 li{width:50%;} .m-li-3 li{width:33.33%;} .m-li-4 li{width:25%;} .m-li-5 li{width:20%;} .m-li-6 li{width:16.66%;} .m-li-7 li{width:14.28%;} .m-li-8 li{width:12.5%;} .m-li-9 li{width:11.11%;} .m-li-10 li{width:10%;} } /*Common For Max 320*/ @media only screen and (max-width: 479px) { .s-g-5 {width: 5%;} .s-g-10 {width: 10%;} .s-g-15 {width: 15%;} .s-g-20 {width: 20%;} .s-g-25 {width: 25%;} .s-g-30 {width: 30%;} .s-g-35 {width: 35%;} .s-g-40 {width: 40%;} .s-g-45 {width: 45%;} .s-g-50 {width: 50%;} .s-g-55 {width: 55%;} .s-g-60 {width: 60%;} .s-g-65 {width: 65%;} .s-g-70 {width: 70%;} .s-g-75 {width: 75%;} .s-g-80 {width: 80%;} .s-g-85 {width: 85%;} .s-g-90 {width: 90%;} .s-g-95 {width: 95%;} .s-g-16 {width: 16.66666%;} .s-g-33 {width: 33.33333%;} .s-g-66 {width: 66.66667%;} .s-g-100 { clear: both; width: 100%;} .s-li-2 li{width:50%;} .s-li-3 li{width:33.33%;} .s-li-4 li{width:25%;} .s-li-5 li{width:20%;} .s-li-6 li{width:16.66%;} .s-li-7 li{width:14.28%;} .s-li-8 li{width:12.5%;} .s-li-9 li{width:11.11%;} .s-li-10 li{width:10%;} } /* -------------------- 区域设置 ------------------------- */ /*1200*/ @media only screen and (min-width: 1200px) { .hide { display: none; } .g-p0 { padding-left: 0; padding-right: 0; } .g-pl0{ padding-left: 0; } .g-pr0{ padding-right: 0; } } /*960*/ @media only screen and (min-width: 960px) and (max-width: 1199px) { .hide-p { display: none; } .p-g-p0 { padding-left: 0; padding-right: 0; } .p-g-pl0{ padding-left: 0; } .p-g-pr0{ padding-right: 0; } } /*768*/ @media only screen and (min-width: 768px) and (max-width: 959px) { .hide-t { display: none; } .t-g-p0 { padding-left: 0; padding-right: 0; } .t-g-pl0{ padding-left: 0; } .t-g-pr0{ padding-right: 0; } } /*480*/ @media only screen and (max-width: 767px) { .hide-m { display: none; } .m-g-p0 { padding-left: 0; padding-right: 0; } .m-g-pl0{ padding-left: 0; } .m-g-pr0{ padding-right: 0; } } /*480*/ @media only screen and (max-width: 479px) { .hide-s { display: none; } .s-g-p0 { padding-left: 0; padding-right: 0; } .s-g-pl0{ padding-left: 0; } .s-g-pr0{ padding-right: 0; } }
style-rel.css 自定义响应式样式
/*Common For Max 960*/ @media only screen and (max-width: 1199px) { .wp {width: 960px;} } /*Common For Max 768*/ @media only screen and (max-width: 959px) { .wp {width: 768px;} } /*Common For Max 480*/ @media only screen and (max-width: 767px) { .wp {width: 98%;} } /*Common For Max 320*/ @media only screen and (max-width: 479px) { } /* --------------------------- 固定屏幕样式 ---------------------------------------- */ /*960*/ @media only screen and (min-width: 960px) and (max-width: 1199px) { } /*768*/ @media only screen and (min-width: 768px) and (max-width: 959px) { } /*480*/ @media only screen and (min-width: 480px) and (max-width: 767px) { } /*320*/ @media only screen and (min-width: 320px) and (max-width: 479px) { } /*240*/ @media only screen and (max-width: 319px) { }
上一篇:概述