| 标题 | 网页切图的css和布局经验与要点 |
| 内容 | 很多初学者在刚学完css基础要去实际操作进行网页切图的时候，总感觉无从下手。在这里我为大家简单总结一下，一些网页切图的经验与要点。 第一点：一般我们网站logo部分通常使用h1+a链接的方式，在css上采用以图换字技术，指定对象的宽与高，把a元素设为块状元素。这样有利于后期的网站优化。 代码如下: background:url(../images/logo.jpg) left top no-repeat;width:300px;height:75px;text-indent:300px; white-space:nowrap; overflow:hidden; 第二点：在这个网站中logo右侧一个电话。其实我们可以把这一个部分理解为是两列布局。同样这个地方。你可以采用以图换字。在结合使用两列布局。是不是很轻松就能实现了。 第三点：两列布局。中间空出了一定间距。但是我想要强调的是实现布局不一定非得是div与div，记住这句话，只要是块状元素都可以实现布局，如下所示： div 与 div h1 与 p li 与 li（导航不就是吗？） ps:很重要：只要是块状元素（h1，li,div），宽高，都可以实现浮动 第四点：在实现布局的时候，我们通常要碰到两种情况： 1、把宽度计算合适。一个像素不差。那 2、就像第三点所示那样，如果宽度没有计算到位，可能在中间会产生一些间距，那么在下边的布局就要考虑使用清除浮动了。 清除浮动： 代码如下: .clear{clear:both;} 第五点、导航，一般在我们制作导航的时候，都是基于ul，li，大多的时候是一个基于背景图片的控制,这个没有太多好说的。 第六点、很多网站上都会有网站产品展示，一定要学会使用 dl dt dd 如下所示 代码如下: <dl> <dt>这里可以放图片</dt> <dd>这是可以放标题</dd> <dd>这是可以放具体的描述</dd> </dl> 第七点：网站的主要内容区域，无非就是两列布局，三列布局，或者是四列布局这样的形式。那我要给大家强调的是：一切皆盒子，以盒模型的方式去计算，咱们的这些块元素，三个值宽类加起来。不能超过外侧div的宽度，width+border+padding+margin=外层宽度 给大家推荐一个初学时的写法，怎么写： 先写出三列内容，如下所示： 代码如下: <div class=left> 1 </div> <!--左侧结束--> <div class=center> 2 </div></p> <p><div class=right> 3 </div> 然后进行css控制：先把浮动，与宽度，全部计算好。 最后：在给每一列里面进行填内容 希望我说的这些给你们带来帮助吧 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。