页面设计注意事项

页面设计中应该注意的问题

一、页面布局

 在设计页面时，我们习惯将将整个页面的宽高量好，再用一个大的div包裹整个页面，其实这个是很不可取的，原因在于一个页面是一块块lodding出来的，如果将所有内容包含在一个大块中的话，用户就得等到一大块全部lodding完菜可以看见页面，这样不仅影响页面加载速度，同样也影响了用户体验。同理，在tableb布局时，lodding只有读到table的闭合标签才能lodding完，这样都是很影响用户体验的，所以我们在制作页面时，布局是非常重要的，最好一块一块往下排列制作，页面才会一块一块往下排着lodding出来，这样至少在页面lodding过程中用户会看到一些信息。

二、logo部分

 一个页面最主要的部分就是logo部分，在制作时应采用嵌套：

<h1>

<a href="###">

<img src="images/logo.png" alt="">

</a>

</h1>

这样嵌套的原因在以下3点：

1、h1代表权重比最高的标题，理论上讲一个页面中只有h1标签最合理，当然要放在权重性最高的位置，所以我们将logo的第一层设为h1，也能让爬虫更好的解析出来。

2、一般页面的logo都是链接，a标签也是锚文本，所以我们要将第二层嵌套设为a标签。

3、由于img标签具有alt的属性，所以logo不要用背景图，要用img标签，alt中添加关键字，这对于页面优化和搜索引擎都是非常有帮助的。

三、banner部分

Banner指页面中的导航，虽然大多数导航都是横向的，其实导航还是列表的形式，所以在做导航时我们要用li标签将a标签包裹起来，再向左浮动就好了。

五、内容部分

这里我总结了一些页面制作过程中的注意事项;

1、上面说到logo要使用h1标签嵌套，h1-h5都要在初始化时设定margin：0；否则会出现默认的上间距。

2、Html里面是不能有空标签的，哪怕是clear，我们也应该在空标签中放上 ； 这样是为了防止兼容问题的存在。

3、Class名不能以数字开头，最好要根据命名规范外加网页信息进行命名。

常用的css命名：

 

4、a标签不要嵌套块级标签，更不能嵌套a标签。

5、任何标签的嵌套最好不要超过四层。

6、字体设置最好分开写，各浏览器解析不一样，背景设置最好集合写。

7、清浮动是一定要注意的，http://www.jb51.net/css/67471.html

8、对标签设置完relative后还可以用margin，但是不能再浮动了，设置完absolute后padding对它就不好用了。

9、一个ul列表中其中一个li的内容是图片其他li都是文字，我们给ul设了行高，那么IE6里面只有字体设置了行高才有作用，图片是不会有变化的。

10、先设置字体再设行高有效，先设置行高，再设置字体是无效的。

11、父子之间最好用padding控制，兼容性很好，兄弟之间的间距一定要用margin控制。

12、IE浏览器是不读取单数的，所以在设置字体大小的时候，为了考虑到兼容性问题都要设置成双数的。

13、已经在使用css在制作页面时，在html中就最好不要再出现style命令了。

14、对于一些没有意义的背景小图我们最好截取保存为gif格式，选择像素要求不是最高，清晰度好点儿就可以了，大图的话一般保存为jpg格式，对于页面中的logo、广告这类的一定要选择像素高的，介于上面来两种格式之间的png就很不错。

六、制作过程中遇到的问题解析：

在制作博客图的头部时，为什么只给块设置了半透明，字体为什么也跟着半透明了？

一张背景图上层要实现半透明，而半透明上又有几行文字，我们第一反应就是用半透明层嵌套几行文字实现效果，其实是不对的，这样的情况下半透明层和文本层是父子关系，所以当背景层使用滤镜的同时字体也会跟着产生相同的半透明效果，我们应该把这两部分设置为同级标签的格式，而不是父子嵌套，文本层采用position定位，这样不会再有字体变得半透明。

七、精简代码总结

1、三层嵌套

Html代码为：

<div class="center">

<div class="left">

<div class="right"><i>文本</i></div>

</div>

</div>

Css代码为：

.center{width:200px; margin: 200px auto;}

  .center i{background:url(images/yuan.gif) 15px 0px no-repeat;padding:0 41px; font-style: normal;}

      .right{height:26px;}

      .center{background:url(images/buttom_center.gif) 0 0 repeat-x;}

      .left{background:url(images/buttom_left.gif) 0 0 no-repeat;}

      .right{background:url(images/buttom_right.gif) right 0 no-repeat;}

2、四层嵌套

Html代码为：

<div class="div">

<div class="left"></div>

<div class="center"><i>文本</i></div>

<div class="right"></div>

</div>

Css代码为：

.div{width:200px;height: 26px;} /*  可以去掉div */

    .left,.right{width: 36px; height: 26px;}

    .center{width:128px;height: 26px;}

.left{background: url(images/buttom_left.gif) 0 0 no-repeat;}

.center{background: url(images/buttom_center.gif) 0 0 repeat-x;}

.right{background: url(images/buttom_right.gif) 0 0 no-repeat;}

.left,.center,.right{float: left;}

在三层嵌套中，一二层都不设高，而在最高层设高，就可以把上两层支撑开，非常得节省代码，兼容性也同样稳固。

 

转载于:https://www.cnblogs.com/zhru/p/3643719.html