CSS网页切图经验与要点

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

第一点：一般我们网站LOGO部分通常使用H1+a链接的方式，在CSS上采用以图换字技术，指定对象的宽与高，把A元素设为块状元素。这样有利于后期的网站优化。

background:url(../p_w_picpaths/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>这是可以放www.divcss8.com标题</dd>

<dd>这是可以放具体的描述</dd>

</dl>

第六点：网站的主要内容区域，无非就是两列布局，三列布局，或者是四列布局这样的形式。那我要给大家强调的是

：一切皆盒子，以盒模型的方式去计算，咱们的这些块元素，三个值宽类加起来。不能超过外侧DIV的宽度，width

+border+padding+margin=外层宽度

给大家推荐一个初学时的写法，怎么写：

先写出三列内容，如下所示：

</div>

</div>

</div>

然后进行CSS控制：先把浮动，与宽度，全部计算好。

最后：在给每一列里面进行填内容

希望我说的这些给你们带来帮助吧

转载于:https://blog.51cto.com/jiefei/1624485

CSS网页切图经验与要点相关推荐

DIV+CSS 之网页切图过程中div+css命名规则
网页切图过程中div+css命名规则内容:content/container 导航:nav 侧栏:sidebar 栏目:column 标志:logo 页面主体:main 广告:banner 热点:h ...
html css ps切图教程,Photoshop（PS）CSS切图必用工具
Adobe PHOTOSHOP日常咱们又被称为PS. div CSS必备切图工具PS截图多数人对于PHOTOSHOP的了解仅限于"一个很好的图象编辑软件",并不晓得它的诸多使用方 ...
完成css的切图图片任意,css切图是什么意思
css切图是指DIV CSS开发的意思,表示从一张网页美工图切片到HTML代码开发与CSS样式开发,完成HTML静态网页:css切图包含两部分,分别是:1.网页美工图素材切出:2.DIV+CSS代码开 ...
html中sprite标签,网页切图 CSS Sprites（CSS精灵）介绍和图文使用教程
CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.这个被国内开发者昵称为CSS精灵.CSS雪碧的家伙到底解决了什么问题,我们又怎样合理使用这个技术呢?下面让我们详细的聊聊. 在大 ...
css网页布局兼容性有哪些要点与诀窍
IE vs FF CSS 兼容要点:DOCTYPE 影响 CSS 处理 FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 FF: bod ...
css网页布局血泪经验
刚开始学css,没想到写页面刚写个banner就出了不少问题,写了几个下午都没有搞定对齐问题,现在从分析源码开始,尽量理解,总结,记住一般页面是从哪里开始布局的... 有些页面文字居中,其实不是用di ...
PSD网页切图制作HTML全过程教程 1
http://www.uimaker.com/uimakerhtml/uistudy/2010/0430/3379.html
ps html css 工具,认识Photoshop（PS）CSS切图必用工具
Adobe PHOTOSHOP平时我们又被称为PS. div CSS必备切图工具PS截图多数人对于PHOTOSHOP的了解仅限于"一个很好的图像编辑软件",并不知道它的诸多应用方 ...
div css切图在线
div css切图在线(divcss.hailanyun.com)我们拥有精湛的div css切图,psd转静态页面,psd转html,网页切图技术,主要提供div css切图,psd转静态页面,ps ...
切图案例实操课程二-姜威-专题视频课程
切图案例实操课程二-199人已学习课程介绍本课程以主要目的是引导初入前端的小白,了解前端是如何工作的,通过正确建立构建环境,解构任务, 课程收益讲师介绍姜威 ...

CSS网页切图经验与要点

CSS网页切图经验与要点相关推荐

最新文章

热门文章