首页 > 5811标准 > 开始

开始一个项目

开始一个项目

新建一个项目文件夹


文件目录


image.png 


项目文件夹目录名为www 包含以下文件


image.png


目录说明


css/ 目录

image.png


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) {

 

}


上一篇:概述