经验汇总：HTML+CSS项目开发

今天分享下”经验汇总：HTML+CSS项目开发“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 好几天没升级blog了，刚实战完一个HTML CSS的简易项目。通过几日的探索，发觉盈利甚多。以前仅仅单纯性得写demo，看知识要点，沒有亲自实战项目。但实战之后才会掌握，怎样才能够更好的提高自己的技术性。对于此次项目开发设计，我汇总了以下几点：

一.专业技术总结

1.公共性款式的设置

在逐渐项目以前，我们可以先大致了解一下项目中每一个网页的內容，例如字体效果，文章段落构造，字体大小等。我们可以对于这一些內容来确定一个稳定的款式文档。在开发设计中 就可以立即引入此文档，而不用再反复敲CSS编码。

CSS Code复制内容到剪贴板
/基本样式/

• {
  margin:0;
  padding:0;
  }
  body {
  font-family: “微软雅黑”;
  }
  .clear { /清除两边浮动/
  clear: both;
  }
  .fl { /清除左浮动/
  float: left;
  }
  .fr { /清除右浮动/
  float: rightright;
  }

a { /去掉链接的默认下划线/
text-decoration: none;
}
li { /去掉列表默认样式/
list-style: none;
}
需要用到时就直接在类名后加上所要用到的类名即可：

XML/HTML Code复制内容到剪贴板

2、整体布局

开发项目过程时，若事前先将每一页的框架搭建好，而后期就只需把具体内容填充进去就可以了。而我就习惯用以下框架来实现页面整体布局：

XML/HTML Code复制内容到剪贴板

一般来说，设定好页面大体框架后，剩下的就直接一块一块地填充进去就方便些了，这样开发起来思路也比较清晰。当然还要设定相应的CSS样式，但这个要视项目的具体 　要求来做。

3、切图要素

当大体布局弄好后，接下来应该就是从切图开始入手了，虽然没有太多技术性的操作，但也有些要注意的地方。比如在切图中，要特别注意的是尺寸。虽然有些是比较细微 的部分，需要耐心处理。因为细节性的问题往往也会导致结果的不同。其实不要认为差不多就可以了，有时候差一点就是差一点，当效果不尽人意的时候，到头来还是得再去花时间去修改。再者，在保存切图时，由于会自动生成一个images文件，所以我们不用再自己新建目录，或者也不用进入到某个目录中，不然它还是会在相应的位置出现images这个文件夹。

4、命名、代码书写规范

规范的命名有助于提高代码可读性。在网上也有挺多相关的规范，在这里我也简单罗列几点：

（1）、直观命名

当在设计Web页面以及需要对一个div进行标识的时候，最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。

例如： top-panel

    horizontal-nav

    left-side

（2）、结构化命名

例如： main-nav

subnav

（3）、基于成员的命名规范

基于成员的命名规范是指按照文件,文件夹的从属关系,通过归类的方法进行命名,这样可以使文件的排列具有较强的逻辑性.

例如:一个图片文件是在鼠标点击之前为"file_on".而在点击后的图片文件命名为"file_off"根据这个类别命名.更加的清晰.

5、学会制作“雪碧图”

在项目开发中少不了会加入许多小图标，小图片。若一张张切下来后保存起来后，使用起来也比较麻烦，加之所占内存也大，如此一来页面加载速度就慢了许多。这可不是 什么好事，大大降低了用户体验度。所以，我们可以事先把小图片切下来放在同一张页面，到时候开发时就只需要把这张图片引入即可。然后再跟进情况调整背景图片的位 置，利用background-position这个属性可以设置。

6、知识点的清晰

在做项目时，我由于对某些知识点不够熟悉，不能熟练运用，所以导致开发速度慢。当我们熟练掌握了一个知识点后，是可以快速地写出代码实现相应的效果。在这个项目开发过程中，我主要是对以下知识点不够熟悉：

（1）、关系选择符的使用

（2）、伪类选择符的使用

特别是E:first-of-type与E：first-child 。其实它两最大的区别在于前者是父元素下的第一个结构标签，而后者不需要一定是第一个结构标签。如下例子：

XML/HTML Code复制内容到剪贴板

p标签

a标签 a标签

　　 a:first-child是.test下的第一个结构标签，而且是a标签，不是则不起效果 。

a:first-of-type不需要是第一个子元素只需要.test下的a标签的第一个即可。

（3）、CSS属性之opacity、z-index 、display

a、opacity

在这次项目开发中，有一个效果是需要用到遮蔽层的效果。如下图。一开始我的做法是写两个div，然后将第二个div设置透明。然后再用hover后，将它透明度调回不透明。 同时也将第二个div定位，与第一个div重合。但我发现这样写下来代码多且容易乱。而参考了其他小伙伴的代码，发现其实灵活运用z-index也可以做到此效果。下面是具体实现

CSS代码：

CSS Code复制内容到剪贴板

.div1 {
width: 200px;
height: 200px;
background-color: #ccc;
position: relative;
font-size: 20px: http://www.qlyl1688.com/products/ycxsyw.html ;
text-align: center;
line-height: 200px;
}

.div2 {
width: 200px;
height: 200px;
position: absolute;/使其与父元素重合/
top:0;
left:0;
background: rgba(21,85,144,0.2);
opacity: 0;/先设置为透明/
transition: all 0.3s;/过渡效果/
cursor: pointer;

        }   
        .div2:hover {   

opacity: 1;
}
HTML代码：

XML/HTML Code复制内容到剪贴板

请把鼠标放在这里

b.z-index

查找或设定对象的堆叠次序。

并级的对象，此属性变量值越大，则被堆叠在最上边。

如2个对象的此属性具备一样的值，那麼将根据他们在HTML文本文档中流的次序堆叠，写在后面的可能遮盖前边的。

务必定position属性数值absolute.relative或fixed，此选值即可起效。

c.display

none：掩藏对象。与visibility属性的hidden值不一样，其不以被掩藏的对象保存其物理学室内空间

inline：指定对象为内联元素。block：指定对象为块原素。

list-item：指定对象为目录新项目。

inline-block：指定对象为内联块原素。（CSS2）

二.心理状态汇总

通过此次的新项目训练，我发现了实际上许多情况下并不是立即的作用难题，反而是心态难题。一开始，十几个网页页面要赶在几日内进行，我对自身最终作出的结论是猜疑的。但我就想起，倘若之后工作中了，也防止不得会"髙压"工作。也就是会很有可能在短期内把工作目标进行及时。全过程一直坚辛的，但通常他人考虑的仅有結果。結果没出去，便是工作中没及时，尽管如此说来挺激烈的，但客观事实的确这般。此次的新项目进行幅度大约90%，还差一些实际效果沒有完成。但随后发觉还得做电脑浏览器兼容，这的确是个头痛的难题。尽管不便，但这也是不可或缺的一部分。对于此次的新项目训练，我汇总了以下几个方面，我觉得自身能够提高的地区：

1.了解并娴熟应用每一个HTML便笺和CSS属性。我觉得造成开发设计速度慢的因素之一是由于自身对知识要点的把握不足。例如，要完成某一实际效果，但却因为记不起来使用了什么属性，或是忘记了属性名字，又得花时间去搜索材料。无形之中時间就消耗掉了。

2.降低沉余，提升编码。能够省去的或是省去为好，由于编码多了占有运行内存，页面加载速度也会减缓。在敲代码的环节中，还可以先思索一下有哪些较为简约的书写，提升 编码撰写速度。自然这也是一点点累积下来的，训练多了当然也会渐渐地掌握怎样才会提升 编码撰写速度及其减少沉余。

3.网页切图速度。或许是较为少用设计工具，对程序界面的实际操作不太了解。但网页切图实际上也不用太高新技术，但特别注意的一点是精确性。与此同时也可以提升 潜心度。

4.多思多练.敏而好学。在碰到一个瓶颈问题时，我一般的作法是先自身想，确实搞不懂的能够百度搜索，参照在网上的，随后再完成自身的。若在网上的材料不太清楚或是不太了解的情形下。我认为或是问同学们或教师，根据相互之间学习交流，实际上是能够非常迅速地掌握知识要点，而且察觉自己存在的不足。与此同时学习培训参考他人做的好的层面。

5.塑造认真细致的心态

有关细致入微的难题，是很多人都相对比较非常容易忽视的。而自己来看，我并不感觉自已是个认真细致的人。有一些情况下也是由于自身的粗心大意而造成結果不佳。因此，在了解了这一点以后，我能每时每刻提示自身。不可以由于追求完美速度而忽视了一些看起来无关痛痒的物品。

以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！