zoukankan      html  css  js  c++  java
  • 网站项目的规范

    工作多年了,一直不爱讲规范,因为凭自己经验做出来的东西不会有太多乱子,但是从开始进行项目管理以来,发现没有规矩真会出问题,

    所以经过两个中小型项目,自己做了些总结,希望能和看到此文的朋友讨论,如果您有任何看法或者建议,可以留言指正、补充,也可以邮件到

    28181305#qq.com,谢谢。

    所以总结前台UI开发相关的必须预订的几个项目:

    1 一个所有页面都包含一个php文件,这个php文件去链接css需要的样式表文件,不允许出现其它对样式表文件的引用的出现

    —— 因为样式表文件太多,会增加http请求次数,而且不同的文件出现相同的class名字也会引起冲突,修改时会导致顾此失彼;放在一个动态的php文件之后,如果用户可选皮肤也可以在此文件中实现,整个项目都只需要关注少数的1-2个css文件即可。

    2 项目开始之初,首相要做的是在css文件的最前面规定div,input、p、span、td、a(html tag)的字体大小、行间距、文字的颜色、边距;input、textarea的边框样式;table tr td的样式;a的文字颜色、鼠标经过文字颜色;其它任何地方不得再次定义这些html tag的样式(换言之对html的样式的定义只能出现在css文件的最前面)

    3 接着定义几种标题格式——包括文字大小、文字颜色、是否加粗、边框样式、背景图片、高度,所有的标题只允许使用这几种样式

    4 各种列表页面的翻页的样式——包括翻页链接的文字大小、文字颜色、边框样式、内边距、外边距,所有的翻页全部使用这个样式

    5 定义一个用于筛选条件的tab的样式(选中状态、非选中状态、基本样式)的文字颜色、文字大小、高度、行高、内外边距、文字位置,所有的筛选都只使用这个样式。

    6 定义几个按钮类如:button_green button_red button_gray button_hilight,所有按钮性质的东西,只允许用这几个类,或者用浏览器自己的input,禁止自定义按钮样式。

    7 对于文内容的内边距要注意保持一致,在项目最初就规定上边距,开发过程当中禁止开发人员自行定制内外边距,也就是禁止规定margin和padding

    8 所有图标的高度与line-height或者与文字大小,避免图标与文字不对齐。

    9 按钮背景图、标题背景图、图标全部使用textpacker打包成单个图片文件。

    后端规范:

    1 文件名、目录名、变量名及数据库表名、字段名,一律使用小写字母,单词之间下划线分隔:new_rows,user_name
    2 类名函数名,首字母小写,后面的每个单词首字母大写:newRows,userName
    3 所有文件使用utf8编码
    4 SQL语句关键词一律大写:SELECT id,name FROM user
    5 所有用户参数:$_GET、$_POST、$_COOKIE、$_FILES['col']['name']一律不得直接使用,期望是数字的一律用intval转换,期望是字符串的一律至少使用safestr(自定义函数)过滤:$id=intval($_GET['id']);$name=safestr($_GET['name']);
    6 文件上传,不得使用$_FILES['col']['name']中的任何部分,必须全部自己构建存储路径和文件名:

    $path_parts = pathinfo($_FILES['col']['name']);
    if($path_parts["extension"]=='png')
    $filename=$user_id.'.png';
    else if($path_parts["extension"]=='jpg')
    $filename=$user_id.'.jpg';
    else
    $filename=$user_id.'.gif';

    7 jq绑定事件必须使用dom的id,禁止使用selector,如$('p[class=cls1]').bind(...,应该使用$('#p_cls1').bind,原因在于修改时直接查找p_cls1就可以找到绑定的函数,并且效率更好。

    8 mysql字段不要使用datetime或者time,用int类型来表示时间

    9 表的自增id字段一律用id,不要使用tablename_id,这样不方便写一些自动化程序。

    10 js函数尽量根据功能个性化,比如不要使用add,update,post这样的函数名,这种名字容易冲突,为了减少http请求次数,需要合并js时,遇到冲突就很难搞定,应该使用news_add,news_update,product_post这样的名字

     付一个css基础文件,由于时间关系没有完成:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>基础样式及预览</title>
    
    		<link rel="stylesheet" href="css.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
    	</head>
    	<style>
    		*{word-break: break-all}
    		/* html tag 定义开始 */
    		td,a,input,div,span,p{
    			font-size: 12px;
    			line-height: 18px;
    			margin: 0px;
    			padding: 0px;
    			margin: 0px;
    			color: #EFEFEF;						
    		}
    		a{
    			color: blue;
    			text-decoration: none;
    		}
    		a:hover{
    			color: red;
    		}
    			/* 列表类定义开始 */
    		table{}
    		tr{}
    		th{}
    		ul{}
    		li{}
    		/* --------------------------------------- */
    		
    		/* 容器类定义开始 */
    		.main{100%; margin: 0 auto;font-size:12px}
    		.container{1000px; margin:0 auto;}
    		.right,.middle,.left{padding-left:12px;padding-right:12px; float: left}
    		.left{116px;}
    		.middle{576px;}
    		.right{136px;}
    		.content{}
    		.content_main{}
    		/* --------------------------------------- */
    		
    		/* 标题类定义开始 */
    		.title_color01{}
    		.title_color02{}
    		.title_picture01{}
    		.title_picture02{}
    		.tilte_of_section{}
    		/* --------------------------------------- */
    		
    		/* 标题类定义开始 */
    		.button_green{}
    		.button_red{}
    		.button_gray{}
    		.button_hilight{}
    		/* --------------------------------------- */
    		
    		/* 分页类定义开始 */
    		.page{}
    		.page .head{padding-left:12}
    		.page a{}
    		.page .current{}
    		.page .end{}
    		/* --------------------------------------- */
    		
    		/* TAB切换类定义开始 */
    		.tab{}
    		.tab .normal{}
    		.tab .active{}
    		/* --------------------------------------- */
    		   
    	</style>
    	<body>
    		<div class="main">
    			<div class="container">
    				<div class="left">
    					<div class="title_color01">阅读排行</div>
    					<div class="content">
    						
    					</div>
    					<div class="title_picture01">活跃用户</div>
    					<div class="content">
    						
    					</div>
    				</div>
    				<div class="middle">
    					<div class="title_color01"></div>
    					<div class="content content_main"></div>
    					<div class="title_color01"></div>
    					<div class="content">
    						<div class="tilte_of_section">填写信息</div>
    						<div class="form">
    							
    						</div>
    						<div>
    							<a class="button_green">提交</a>
    							<a class="button_gray">重置</a>
    						</div>
    						<div class="tab">
    							<div class="active"></div>
    							<div class="normal"></div>	
    						</div>
    						<div class="content_main">
    							<div class="page">
    								<a class="head">首页</a>
    								<a>第三页</a>
    								<a class="current">第四页</a>
    								<a>第五页</a>
    								<a class="end">末页</a>
    							</div>
    						</div>
    						<div class="content_main">
    							
    						</div>
    					</div>					
    				</div>
    				<div class="right">
    					<div class="title_color01"></div>
    					<div class="content"></div>
    					<div class="title_picture01"></div>
    					<div class="content"></div>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>


     

  • 相关阅读:
    损失函数相关
    半监督学习
    自监督学习
    leetcode相关
    深度学习中的Normalization
    TCN
    用户行为序列相关
    损失函数loss相关
    MapReduce编程之实例分析:wordCount
    MapReduce编程之初学概念篇
  • 原文地址:https://www.cnblogs.com/lein317/p/5067635.html
Copyright © 2011-2022 走看看