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

网页制作 2024/12/24 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

很多初学者在刚学完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控制：先把浮动，与宽度，全部计算好。
最后：在给每一列里面进行填内容

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

网页切图,CSS,布局经验,要点

标签：

网页切图,CSS,布局经验,要点

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“网页切图的CSS和布局经验与要点”

暂无网页切图的CSS和布局经验与要点的评论...

www.hbtsch.com 蝙蝠岛资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年12月24日

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

网页切图,CSS,布局经验,要点

纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)

用CSS3写的模仿iPhone中的返回按钮

评论“网页切图的CSS和布局经验与要点”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接