很多初学者在刚学完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控制:先把浮动,与宽度,全部计算好。
最后:在给每一列里面进行填内容
希望我说的这些给你们带来帮助吧
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- [雨果唱片]李冰《地方民歌·戏曲系列-爱的颂歌》WAV
- 《模拟人生》真人电影官宣!玛格特·罗比担任制片人
- 《星战绝地》系列玩家数超4000万!续作表现超预期
- EA称AI是其业务核心!能提高开发效率、节约成本
- 《十年经典成名好歌 高品质最佳音乐 2CD》[WAV/分轨][1GB]
- 《8个男人的故事 2CD》[WAV/分轨][1GB]
- 《粤语超白金 百听不厌的经典金曲 2CD》[WAV/分轨][1.3GB]
- 群星.1994-全世界精丫华星】【WAV+CUE】
- 杜德伟.1997-知.解2CD【滚石】【WAV+CUE】
- 群星.2022-一不小心喵上你原声大碟【TME影音】【FLAC分轨】
- 《战锤40K星际战士2》卡在正在加入服务器解决方法
- 《勇者斗恶龙怪物仙境3》玩法内容介绍
- 《幸福工厂》无限报错解决方法
- 交错战线原始交易所推荐角色一览
- 战锤40K星际战士2战术职业介绍|战术职业技能效果一览