适用于企业网站的导航结构HTML代码 — 圆角

[isiaug]

在做网页设计工作过程中，总会利用一些常用的代码结构，最近也在整理以前做企业网站时经常套用的HTML代码，今天跟大家分享这个实现圆角导航的HTML代码。

HTML代码:

<div id="nav">
<ul>
<li><a href="home.html">HOME</a></li>
<li><a href="about.html">ABOUT US</a></li>
<li><a href="news.html">NEWS</a></li>
<li><a href="product.html"><PRODUCT</a></li>
<li><a href="contact.html">CONTACT</a></li>
<li><a href="feedback.html">FEEDBACK</a></li>
</ul>
</div>

CSS代码：

#nav{
overflow:hidden;
padding:0 0 0 7px;
background:#f60 url(navl.gif) no-repeat 0 0;
width:359px;
}
#nav ul{
clear:both;padding:0 7px 0 0;
background:url(navr.gif) no-repeat right 0;
width:352px;
}
#nav ul li{float:left;width:88px;}
切图方法：



看到这个切图后大家会有个疑问，为什么左右的圆角宽度是6PX为什么填充是7PX？这个是由于我的图是随便一画，宽度没有换算过，从画上可以看出来多出了两像素，我把这两像素分给了左右的填充，这样就不影响LI的宽度了，图片样式以确定了，怎样生成页面就需要你灵活的运用CSS来实现，这也算是个小窍门吧！

[isiaug]

CSS3浏览器支持还是很全面，为了一个效果得多写很多行代码，还要用JS调用又得多写好几行。还是省事点的好。

[天下如山]

圆角 现在可以很方便的使用css3的一个属性来设置 但是考虑兼容问题 可以同时使用css3以及拼图的方式一起做。

/* CSS3 */
#header_round {
    width:auto; height:40px;
    background:#003870; 
    /* Gecko browsers */
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-bottomright: 0;
 
    /* Webkit browsers */
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 0;
 
    /* W3C syntax */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius:  0;
}
/* CSS2 */
.round_left{ width:17px; height:40px; background:url(../../Content/themes/blue/round_left.jpg); float:left;}
.round_right{ width:17px; height:40px; background:url(../../Content/themes/blue/round_right.jpg); float:right;}

CSS2通过js加载进去
//圆角的兼容js
           if ($.browser.msie) {
               if (parseInt($.browser.version) <= 8) {
                   var sDiv = "";
                   sDiv += '<div class="round_left"></div>';
                   sDiv += '<div class="round_right"></div>';
                   $("#header_round").html(sDiv);
               }
           }

[DLnetchengxuyuan]

浏览器兼容。。。。。以及与后台数据配合，。。。。这是难的地方

[DLnetchengxuyuan]

浏览器兼容。。。。。以及与后台数据配合，。。。。这是难的地方

[mizuho_2006]

Css3里可以直接设置圆角的。