问答 百科手机端

建站中边框设计的作用以及去图片边框代码

2015-12-01 16:51

这里所说的边框是指网站建设中使用边框对页面内容加以修饰的元素,通常是以轮廓框的形式来突出网站的主题内容,那么,这种边框设计在网站中有何作用呢?

首先,边框的视觉冲击强。当你在网站中看到被边框框住的内容,会习惯性地关注其中的信息,尤其是边框颜色和背景形成鲜明对照的情况下,更容易引起用户的注意,其带来的视觉效果不言而喻。如下网站,没有其它的内容信息,最显眼的要数边框了,白色边框配黑色背景,视觉冲击极强,相信大部分用户在看到网站时都会不由自主地点开边框里的内容进行浏览。

其次,不同的边框感效果不同。边框粗细和大小包括颜色各有不同,就看网站建设者如何设计,细边框会带给用户细腻清新感,粗边框会带给用户厚重大气的感觉,这与网站的主体风格息息相关,边框的设计能够在一定程度上增强主题风格效果,让表达更加深刻。如下网站,小清新风格加上边框设计,使得整个网站更显轻盈精致。

最后,页面简洁大方。网站边框元素的使用能够让网站的架构更加分明,内容清晰,组织有序,信息传达富有层次感,当页面没有设置导航时,采用边框设计同样能够实现导航条的作用,指引用户浏览网站,除去了页面那些华而不实的装饰,页面更加简洁明朗。

网站建设中使用这些边框设计也要有一定的技巧,毕竟单独拿边框来看,它显得规矩和呆板,如果随意使用,太多的条条框框会让用户体验不佳,也会让网站有失美观,因此,边框使用之前对细节要求有需考究。

当然,由于网站边框的使用者较少,许多人不敢冒这样的风险,万一运用不当会带来负面效果,但这也是网站设计者的一大竞争优势,这种风格的设计往往能够独当一面,在众多网站中脱颖而出。它能打造的视觉焦点远远胜于千篇一律的建站风格,即使有边框也能让网站显得不拘一格。

用图片做为链接后,在图片的周围出现了一个带颜色边框,一般会显示成蓝色的边框。这样对于大部分的网站来说,是不好看的。那么如何去掉这些图片边框呢?

带链接的图片边框其实是由border属性来控制的。

用<a href="#"><img src="" border="0"></a>就去掉了。

如果用CSS来解决,那么代码可以用img{border:0px;}通过这样的设置就可以做到效果了。

当点击图片时,又出现了虚线框,这就是<a>链接on focus的问题,与图片无关。去掉虚线框可用<a href="xxxxx.html" onfocus=this.blur(); ></a>解决。

如果你认为图片周围有边框比较个性的话,img{border:0px;}也是适合的,只要将0改为你想要的就行。

热门