开始一个项目
新建一个项目文件夹
文件目录
项目文件夹目录名为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) {
}
上一篇：概述