CSS使用技术实例分析

这篇文章主要介绍了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    h2  与  p
li 与 li(导航不就是吗?)

PS:很重要:只要是块状元素(H1,li,div),宽高,都可以实现浮动

第四点:在实现布局的时候,我们通常要碰到两种情况:

1、把宽度计算合适。一个像素不差。那
2、就像第三点所示那样,如果宽度没有计算到位,可能在中间会产生一些间距,那么在下边的布局就要考虑使用清除浮动了。
清除浮动:
 

复制代码

代码如下:


.clear{clear:both;}


第五点、导航,一般在我们制作导航的时候,都是基于UL,LI,大多的时候是一个基于背景图片的控制,这个没有太多好说的。

第六点、很多网站上都会有网站产品展示,一定要学会使用 dl dt dd 如下所示
 

复制代码

代码如下:



这里可以放图片

这是可以放标题

这是可以放具体的描述


第七点:网站的主要内容区域,无非就是两列布局,三列布局,或者是四列布局这样的形式。那我要给大家强调的是:一切皆盒子,以盒模型的方式去计算,咱们的这些块元素,三个值宽类加起来。不能超过外侧DIV的宽度,width+border+padding+margin=外层宽度


给大家推荐一个初学时的写法,怎么写:

先写出三列内容,如下所示:
 

复制代码

代码如下:



1



2


3


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

关于“CSS使用技术实例分析”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“CSS使用技术实例分析”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。


新闻名称:CSS使用技术实例分析
链接URL:http://scjbc.cn/article/jhgiop.html

其他资讯