Rumah > hujung hadapan web > html tutorial > HTML+CSS 项目总结

HTML+CSS 项目总结

WBOY
Lepaskan: 2016-08-25 10:20:43
asal
1242 orang telah melayarinya

  在过去的大概一个月的学习,基本掌握了HTML+CSS的用法和特性。

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

一、技术总结

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

 

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

<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>;

}

Salin selepas log masuk

 

 

 

   

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

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

标签去包着这个HTML+CSS 项目总结标签。

 

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

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

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

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

    ④省略小于1的小数前面的0 (如:用.5代替0.5)。

    ⑤当值为0时,省略单位 (如:margin: 0;)

 

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

    举个简单的例子:

1

2

3

4

5

6

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

Salin selepas log masuk

 

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

 

二、心态总结

  在长时间编写代码的时候,难免会感到烦躁,甚至抓狂。如果不调整好心态,就很难继续下去。还有些时候,会被周围的环境影响到自己。我呢,平时在编写代码时,会带上耳机,听着音乐,与世隔绝。

 

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan