总结之前做项目中要注意的一些书写规范

　　通过这次的《小巨蛋项目》网站的实战中，最主要的还是代码的书写规范吧，可能在这次的网站的实战中代码不是写的很好，没有好好的去规划规划再做，导致了给人的感觉就是有点乱的感觉，所以要求以后的项目中书写代码要更加的好点。要学会在制作之前要规划好，在制作的过程中才会少些功夫，才会事半功倍。所以事先先规划好还是挺重要的。接下来就是来说说一些学到的小知识点吧。

要制作网站前，浏览器给的一些默认的样式还是要去除下的，还有一些禁止事情，比如禁止别人对你网站复制文字。

以下通过老师同学们知道的一些清除默认样式的代码：

比如我是创建一个css文件reset.css。把以下放在reset.css里面，在链接<link rel="stylesheet" type="text/css" href="css/reset.css"/>到html页面，就可以调用了，方便。

body,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,select,textarea,button,th,td,menu{margin:0;padding:0;}
ul,dl,ol{list-style:none;}
img,fieldset,input[type="submit"]{border:0 none;}
em{font-style:normal;}
strong{font-weight:normal;}
table{border-collapse:collapse;border-spacing:0;}
button,input[type="button"]{cursor:pointer;border:0 none;}
a,button,input,img{-webkit-touch-callout:none;}
img{pointer-events:none;/*禁止图片的点击事件，例如长按保存图片*/}
input,select,textarea{outline:none;}
a{text-decoration:none;}
.fl{ float: left}
.fr{ float: right}
.clear{clear:both;}
html,body{
/*禁止用户选择元素*/
-moz-user-select:none;-webkit-user-select: none;
-ms-user-select: none;-khtml-user-select:none; /*禁止元素点击出现半透明黑色背景*/-webkit-tap-highlight-color:rgba(0, 0, 0, 0); }
html {height: 100%;width: 100%;font-family: 'Heiti SC', 'Microsoft YaHei';outline: 0;-webkit-text-size-adjust:none;}
body {height: 100%;margin: 0;position: relative;}

在做项目中，发现做一个网站难免不了有一些同样的代码，做的页面多了，同样的代码只多不减的，所以可以自己创建一个公共样式，以下也是通过小组、同学和自己的总结学到的一个小技巧吧：

/*公共样式 开始*/
body {font-family: "微软雅黑";font-size: 12px;
}
/*文字效果*/
.text-align{text-align: center;
}
/*浮动用的*/
.fl {float: left;
}
.fr {float: right;
}
.clear {clear: both;
}/*容器*/
.container {width: 1000px; /*可改动*/margin: 0 auto;}
.box{width: 1000px;/*可改动*/margin: 0 auto;
}
.button { cursor: pointer; }/*公共样式 结束*/

还有一些代码的规范吧，使总体的代码看起来舒服点，以下就是通过这次总结的几个代码书写规范：

/*使用规范*/
1、命名必须用英文,太长可以以首字母缩写,缩写的链接用横杠"-",子类的话用child或者son,后面接着01,02,03...这样来命名.
2、缩进用统一使用tab键,不能用空格
3、将左花括号与选择器放在同一行。
4、左花括号与选择器间添加以空格。
5、冒号与属性值之间添加已空格。
6、逗号和符号之后使用一个空格。
7、每个属性与值结尾都要使用符号。
8、只有属性值包含空格时才使用引号。
9、右花括号放在新的一行。

下面是通过transition过度实现的导航条，鼠标移上就有动画效果如下：

（兼容现在主流的浏览器）

集团简介
- 株洲小巨蛋
- 总体规划
- 展贸中心
- 区位介绍
- 配送中心
项目简介
- 株洲小巨蛋
- 总体规划
- 展贸中心
- 区位介绍
- 配送中心
新闻更新
- 株洲小巨蛋
- 总体规划
- 展贸中心
- 区位介绍
- 配送中心

代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>ul{list-style: none;}.nav a{text-decoration: none;color: white;}.nav > li{width: 130px;height: 50px;line-height: 50px;float: left;margin-left: 5px;border-radius: 10px;background: #ccc;text-align: center;transition: all 1s ease-in;overflow: hidden;}.nav > li:hover{height: 269px;　　　　　　/*一个简单好看的过渡效果主要还是通过这绿色的三行代码实现的*/}.nav-child li{width: 150px;height: 43px;line-height: 43px;text-align: center;background: #dfdfdf;margin-left: -50px;border-bottom:1px solid #c4c4c4;}.nav-child li:hover{background: #d0d1d2;}.nav-child li a{color: #535353;}
</style>
</head>
<body><ul class="nav"><li><a href="#">集团简介</a><ul class="nav-child"><li><a href="#">株洲小巨蛋</a></li><li><a href="#">总体规划</a></li><li><a href="#">展贸中心</a></li><li><a href="#">区位介绍</a></li><li><a href="#">配送中心</a></li></ul></li><li><a href="#">项目简介</a><ul class="nav-child"><li><a href="#">株洲小巨蛋</a></li><li><a href="#">总体规划</a></li><li><a href="#">展贸中心</a></li><li><a href="#">区位介绍</a></li><li><a href="#">配送中心</a></li></ul></li><li><a href="#">新闻更新</a><ul class="nav-child"><li><a href="#">株洲小巨蛋</a></li><li><a href="#">总体规划</a></li><li><a href="#">展贸中心</a></li><li><a href="#">区位介绍</a></li><li><a href="#">配送中心</a></li></ul></li></ul>
</body>
</html>

转载于:https://www.cnblogs.com/dadayang/p/5797612.html

总结之前做项目中要注意的一些书写规范相关推荐

uniapp结合uView组件库做项目中遇到的系列问题（一）
一.使用u-image组件显示图片时 H5正常显示小程序显示不了 //小程序不能显示 H5可以显示 <u-image width="100%" mode="wid ...
关于做项目中关于文件读取遇到的一个问题（0x80070299）
目前维护的正在用的一个项目中,有xml记录和推送的部分,突然有一天,发现xml推送都失败了,查了原因发现是在某一时间点后程序在生成xml时都出现了错误,随后就觉得可能是文件夹读取权限的问题,遂去查存储 ...
【工具与解决方案】从做项目中积累学习
[Java-Swing] 1.http://java-mans.iteye.com/blog/1650786 JAVA-SWT如何在Jtable单元格中加入复选框Jcheckbox,Jbutt ...
在做项目中遇到的JS问题
name和value: 例如: <input type="text" name="txt"/> name用于定义这个input收到的值的变量名,在上 ...
css样式有行内式还有什么,在行内式CSS样式中,属性和值的书写规范与CSS样式规则不相同...
摘要: 下列护棚料的对防顶材说法,行则正确的是,棚顶,能力棚顶具有应当防护抗砸.下列原始的是属于数据,样S样统计体单特征掌握征的总体明总据B部门位特的数的数.说数据说明.式中属性式规同度同度综合指数中 ...
算法练习day14——190402（贪心：切金条、做项目、会议室安排）
1. 切金条一块金条切成两半,是需要花费和长度数值一样的铜板的. 比如长度为20的金条, 不管切成长度多大的两半,都要花费20个铜板. 一群人想整分整块金条, 怎么分最省铜板? 例如,给定数组{10 ...
今天项目中遇到的一个问题：判断新闻Id是否存在
今天做项目中,写了个类,中间用于判断新闻是否存在.其中我的记录只有8条,Id分别为7,8,9,10,11,12,13,14,当用sql语句: private const string SQL_SELE ...
java编码规范文档下载_软件项目实训及课程设计指导——制定待开发项目中各种文档的规范...
软件项目实训及课程设计指导--制定待开发项目中各种形式文档的规范 1.制定对课程设计项目开发过程中的规范性要求 (1)从"形式"到"内容"两个方面控制和要求开发 ...
关于项目中的封装、重构
最近看了一些牛人的博客,多次提到封装.重构. 今天我也谈谈自己对封装.重构的理解,说的对希望大家共勉,不对的话还希望大家多多指教. 以前一听到封装重构,感觉很高深的技能,其实在我理解所谓的封装就是对程 ...

总结之前做项目中要注意的一些书写规范

下面是通过transition过度实现的导航条，鼠标移上就有动画效果如下：

总结之前做项目中要注意的一些书写规范相关推荐

最新文章

热门文章