您现在的位置是:首页 > 网站建设常见问答网站建设常见问答
PSD切片的CSS和布局经验与要点
2015-04-13【网站建设常见问答】2851 人已围观
简介 做网站特别是前台呈现的美工在刚学完CSS基础要去实际操作进行网页切图的时候,总感觉无从下手。在这里我为大家简单总结一下,一...
做网站特别是前台呈现的美工在刚学完CSS基础要去实际操作进行网页切图的时候,总感觉无从下手。在这里我为大家简单总结一下,一些网页切图的经验与要点。
1:一般我们网站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;
2:在这个网站中LOGO右侧一个电话。其实我们可以把这一个部分理解为是两列布局。同样这个地方。你可以采用以图换字。在结合使用两列布局。是不是很轻松就能实现了。
3:两列布局。中间空出了一定间距。但是我想要强调的是实现布局不一定非得是DIV与DIV,记住这句话,只要是块状元素都可以实现布局,如div,h1,p,li等li是导航常见使用案例。
PS:重要:只要是块状元素(H1,li,div),宽高都可以实现浮动
4:在实现布局的时候,我们通常要碰到的情况:
A、把宽度计算合适。一个像素不差。就像第三点所示那样,如果宽度没有计算到位,可能在中间会产生一些间距,那么在下边的布局就要考虑使用清除浮动了。
清除浮动:
.clear{clear:both;}
5、导航.一般在我们制作导航的时候,都是基于UL,LI,大多的时候是一个基于背景图片的控制,这个没有太多好说的。
6、很多网站上都会有网站产品展示,一定要学会使用 dl dt dd 如下所示
代码代码如下:
<dl>
<dt>这里可以放图片</dt>
<dd>这是可以放标题</dd>
<dd>这是可以放具体的描述</dd>
</dl>
7:网站的主要内容区域,无非就是两列布局,三列布局,或者是四列布局这样的形式。那我要给大家强调的是:一切皆盒子,以盒模型的方式去计算,咱们的这些块元素,三个值宽类加起来。不能超过外侧DIV的宽度,width+border+padding+margin=外层宽度
给大家推荐一个写法:
先写出三列内容,如下所示:
<div class=\"left\">
1
</div>
<!--左侧结束-->
<div class=\"center\">
2
</div></p> <p><div class=\"right\">
3
</div>
然后进行CSS控制:先把浮动,与宽度,全部计算好。
最后:在给每一列里面进行填内容
希望我说的这些给你们带来帮助吧
关注宁波网站建设博客,更多精彩分享,敬请期待!
Tags:
很赞哦! ()
相关文章
随机图文
12306启用图片验证登录方式使目前抢票软件失效
闲来无事看到12306网站开启了新的验证方式,俗话说道高一迟魔高一丈。这回反过来,12306终于聪明了一回! 北京时间3月16日消息 铁...文化局在我公司文艺演出
随后,文艺演出隆重举行,精彩的表演不断换来员工们的精彩表演。在表演节目的期间,还穿插了些有奖知识问答,在座的每位都是积极参与活动,整个场面十...网站为什么要使用静态页面
宁波网站建设做静态网站设计所采用的技术原理是一对一的形式,代码是PHP程序为主,也就是说这样的网站上面,一个内容对应的就是一个页面,无论...合格的网站运营人员的职责范围
网站美工方面: 1、整体布局:分析10个经典网站的布局结构,主页面结构,次主页结构,页面结构,及相关css文件规则。 2、整个UI:界面...