足球游戏_中国足彩网¥体育资讯$

网页切图的css和布局经验与要点
来源:易贤网 阅读:819 次 日期:2016-06-27 10:28:40
温馨提示:易贤网小编为您整理了“网页切图的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控制:先把浮动,与宽度,全部计算好。

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

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

中国足彩网信息请查看网页制作
易贤网手机网站地址:网页切图的css和布局经验与要点
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标