HTML+CSS 项目总结-html教程-PHP中文网

HTML+CSS 项目总结

php中文网

发布： 2016-08-25 10:20:43

原创

1077人浏览过

　　在过去的大概一个月的学习，基本掌握了html+css的用法和特性。

　　这个星期老师给我们布置了一个PC端的实战项目，并且要求在3-4天内完成，我不惜废寝忘食，在紧迫的时间内大致地完成了，但是有些效果不能像想象中的那样实现出来，毕竟时间有限，能力有限。经过了这次的实战之后，我对此有各方面的总结：

一、技术总结

　　1. 在开发之前必须要先把这个项目的所有设计图从头到尾看一遍，注意观察相同的部分，比如说每个页面的头部和底部都是相同的，那么就把他们提取出来，应用到每个页面当中，这样可以大大提高了开发的效率。

　　2.在开发过程中，肯定写了很多重复的css样式，拖慢了开发速度，这样可以根据个人的习惯和爱好给自己做一套css框架——base.css，作用是重置默认样式和提供通用样式。不过在团队开发中，当然最好就是每个成员都用同一套"base.css"，这样更容易理解，以提高团队开发的效率。

　　以下是我个人初步用的一套base.css：

<span style="color: #008000;">/*</span><span style="color: #008000;">
    @ 重置默认样式
</span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;"> 去除默认内外边距 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
* </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 去除默认边框 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
img </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> none</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 根据要求设定默认字体 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
body </span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> "微软雅黑"</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">
    @ 提供通用样式
</span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;"> 设置左浮动 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.fl </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 设置右浮动 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.fr </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> right</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 清除浮动 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.clear </span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;"> both</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 去掉列表前的标识 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.li-none </span>{<span style="color: #ff0000;">
    list-style</span>:<span style="color: #0000ff;"> none</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 去掉a链接下划线 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.a-none </span>{<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> none</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 设置行内块级元素 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.in-bl </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;
}

登录后复制

　　3.HTML的编码规范：在遵循HTML标准和语义的前提下，尽量使用最少的标签并保持最小的复杂度。

　　　比如：如果单独引入一张图片可以直接用 HTML+CSS 项目总结标签，而不需要再用一个

标签去包着这个

标签。

　　4.在bootstrap中有很多关于CSS的编码规范，在这里我说几个最实用的，

　　　　①有多项选择器时，将选择器单独放在一行。

　　　　②为了代码的易读性，在每个声明块的左花括号前加一个空格，每一个声明块的右花括号单独成行，每条声明独占一行。

　　　　③以逗号分隔的属性值，每个逗号后面都应该插入一个空格。

　　　　④省略小于1的小数前面的0 （如：用.5代替0.5）。

　　　　⑤当值为0时，省略单位（如：margin: 0;）

　　5.代码注释：在我的理念中，注释分为两种，一种是用于划分内容区块，一种是对某些代码进行描述。编写代码注释，更方便于后期维护，并且易于他人理解。

　　　　举个简单的例子：

<span style="color: #008000;">/*</span><span style="color: #008000;"> content 开始 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
#content </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">500px</span>;    <span style="color: #008000;">/*</span><span style="color: #008000;">content的宽高均为500px</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 500px</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> content 结束 </span><span style="color: #008000;">*/</span>

登录后复制

　　6.至于clss和id的命名，最好还是用英文单词吧，不要用拼音和纯数字。如果英文单词过长，可以用缩写，不过要在别人都能理解的情况下使用缩写。如果一个类有多项的时候，可以用英文单词+数字，比如（.box01 .box02 .box03 ……）。