2.相关技术介绍
在网站设计阶段采用Ps来设计效果图,在制作过程中使用DIV+CSS技术完成页面的布局,用JavaScript、Jquery技术来实现网页的动态效果。
2.1 CSS3+HTML5的技术应用
本网站的主力军为CSS3代码,Html5和它相结合,有着很强的优势,HTML5在浏览器的兼容性上面有着很强的支持性,利用它编写的网页可以在减少代码的同时,更迅速的改善网页的兼容性。而CSS3则在文字图片的显示效果上有着很好的效果,可以使用渐变色,阴影,圆角等这些以前的CSS样式表不可以实现的效果。下面详细介绍一下网站中有关使用CSS代码的一些优势。
2.1.1 代码的重用率
代码的重用是现在web标准的一大优势,如果不考虑这一特性来设计网站,会给源代码带来很大的效率损失,也就会让内存增加,网页打开速度减慢。
代码重用性最明显的表现就是样式表的复用,就是使用同一个class名称来制定多个元素的样式,id在很多时候也可以重用部分属性。重用代码一般都是在样式表的开端,便于修改和使用。
2.1.2 代码的常规重置
这是一个网页建设时样式表编写的第一步,提前清理掉网页中的默认属性,便于下面代码的继续编写,例如margin:0;padding:0;这就是最简单的常规性提前重置代码,如果不提前重置限定,在网页编写中就会出现空白部分删除不了或者布局出现错乱难以解决的问题。
在HTML标签中存在着很多的默认样式属性,例如p标签会存在有上下边距样式,em标签中则会存在有字体倾斜的样式。并且不同的浏览器也有不同的默认样式,为了减少它对于我们编写带来的麻烦,所需要的解决办法就是一开始将浏览器的默认属性样式全部去掉,更准确的说就是重新定义下标签的样式。
2.1.3 代码的缩写
为了编写CSS代码方便,样式更加简练,在编写时通常会使用属性值缩写的方法。也就是说用少的代码编写出同样的网页效果,例如文字样式代码的缩写,font:font-style font-variant font-weight font-size line-height font-family;很多属性值限定用一句话概括,其中需要注意的点是规定的属性值必须按照顺序来写,否则没有效果。
颜色值的缩写、背景属性值的缩写、列表属性的缩写、边框的缩写、内外边距属性值的缩写等都是参考上面文字样式代码的缩写方法,编写时注意项都是相同的。在编写初期,可以使用缩写的就尽量使用缩写,养成良好的编写代码习惯,并且可以增加制作网页的效率,减少负担。 CSS3+HTML5公司网站的设计与实现+源代码(2):http://www.youerw.com/jisuanji/lunwen_34467.html