网页切图的CSS和布局经验与要点

很多初学者在刚学完CSS基础要去实际操作进行网页切图的时候，总感觉无从下手。在这里我为大家简单总结一下，一些网页切图的经验与要点。

第一点：一般我们网站LOGO部分通常使用H1+a链接的方式，在CSS上采用以图换字技术，指定对象的宽与高，把A元素设为块状元素。这样有利于后期的网站优化。
新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

复制代码

代码如下:

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），宽高，都可以实现浮动

第四点：在实现布