Cnscorpio

圆角的一点思考

2008-07-18
Web Standard »
No Comments

这段时间，友商网完成了第三次改版，收获了很多，挑其中的一点稍稍的进行了“深入思考比较学习分析研究参悟理解”。啰嗦的话说完了，正题……
本帖同时发布在KDUED.com,如果小窝不稳定，可移步查看

应该不难发现，在目前的各大网站中，大量的采用了圆角去修饰边框，使得页面的呈现更加柔和，干净舒服。所以，友商网在这一次改版中也大量采用了这个样的设计，特别是二级页面的大部分元素框，就采用了时尚的银灰色调配上灰黑的圆角。在将设计稿实现成页面的时候，这个地方开始的确让我头疼，因为这些元素有很多相似的特点，也有一些不一样的地方，相似的是：

title是银灰色渐变x轴横向

底部圆角内凹度一样

而不一样的地方是，整个元素框宽度不一定一样，title高度也有两种，在看到绝大部分的频道设计稿后，我决定将这些元素框做成通用的结构和样式，希望能提高开发效率，省去了一次次重复的调试，也有利于不用的前端开发同事统一风格，整体提高开发速度。

实现的思想是这样的（可以说主要是滑动门的应用）：

youshang1

1.将title的银灰条进行分离（其实也可以合在一起），作为两个结构元素（分别是h2和span）的背景，进行适应的拉伸

2.将内容载体也由两个标签元素来自适应构成（一个是class为eleOutter的div，另一个是class为eleInner的div）圆角图片分别作为这两个元素的背景

css：

.ele h2 {
background:transparent url(h2R.gif) no-repeat right top;
height:40px;
width:100%;
}
.ele h2 span {
background:transparent url(h2L.gif) no-repeat left top;
float:left;
height:40px;
line-height:40px;
padding-left:20px;
}
.eleOutter {
background:transparent url(eleLeft.gif) no-repeat left bottom;
padding-left:5px;
}
.eleInner {
background:transparent url(eleRight.gif) no-repeat right bottom;
}

XHTML：

< div class=”ele”>
    < h2>< span>友商在线会计< /span>< /h2>
    < div class=”eleOutter”>
          < div class=”eleInner”>
          < /div>
    < /div>
< /div>

DEMO here!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ele test</title> <style type="text/css"> /* cnscorpio.cn */ /*ini*/ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin:0; padding:0;} /*ele style*/ .ele{width:500px;margin:0px auto;margin-top:50px;} .ele h2 {background:transparent url(http://www.youshang.com/resources/images/h2R.gif) no-repeat right top;height:40px;width:100%;} .ele h2 span {background:transparent url(http://www.youshang.com/resources/images/h2L.gif) no-repeat left top;float:left;height:40px;line-height:40px;padding-left:20px;} .eleOutter {background:transparent url(http://www.youshang.com/resources/images/eleLeft.gif) no-repeat left bottom;padding-left:5px;} .eleInner {background:transparent url(http://www.youshang.com/resources/images/eleRight.gif) no-repeat right bottom;} </style> </head> <body> <div class="ele"> <h2><span>友商在线会计</span></h2> <div class="eleOutter"> <div class="eleInner"> <p>I'm cnscorpio!!!!</p> </div> </div> </div> </body> </html>

Tips:You can change the code before run.

改版过后，瞅了其他一些站点的做法，有些值得借鉴和学习。例如yahoo.com和雅虎口碑。

1.雅虎口碑

做法是最外围元素标签添加border，然后将四个圆角小图片定位到外围标签的四个角上颜色和外围元素border一样。

优点：使用的图片要小一点

缺点：但是使用了更多的标签去承载

2.yahoo.com首页的yahoo home的做法

有内外两个结构标签，内外的背景色都一样的，让内部元素样式为：
margin:-1px 1px;
border-color:#DEE6E9 rgb(88, 107, 122) rgb(88, 107, 122) rgb(222, 230, 233);
border-style:solid;
border-width:1px;

这样就能够将四个角的变成了还可以接收的圆角。

优点：没有使用任何图片，也能实现圆角效果

缺点：作为按钮还行

还有不少的做法，但是有的没有考虑扩展性，不能自适应内容的不同高度和宽度，有的太过耗资源，就不提了，如果你有什么好的更漂亮的做法，别忘了告诉我。。。

圆角的一点思考

No Responses to “圆角的一点思考”

说两句吧：