然后用样式表定义一个左侧的圆角，一个右侧的圆角。css样式如下：
#nav_l { float:left; height:66px; width:5px; overflow:hidden; background:url(../images/nav_bg.gif) 0 -66px no-repeat; margin-right:10px;}
#nav_r { float:right; height:66px; width:5px; overflow:hidden; background:url(../images/nav_bg.gif) -5px -66px no-repeat;}
预览一下吧，看看头部和导航是不是和效果图中的一样呢
<!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=gb2312" /> <title>主页</title> <link href="http://www.aa25.cn/upload/2010-09/21/css/layout1.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"> <div id="logo"><img src="http://www.aa25.cn/upload/2010-09/21/images/logo.gif" width="181" height="45" /></div> <div id="search"> <form id="form1" name="form1" method="post" action=""> 搜索产品 <input class="inp_srh" type="text" name="textfield" id="textfield" /> <input class="btn_srh" type="submit" name="button" id="button" value="查询" /> </form> </div> </div> <div class="clearfloat"></div> <div id="nav"> <div id="nav_l"></div> <div id="nav_r"></div> <div class="nav_main"> <ul> <li><a href="#"><span>首页</span></a></li> <li><a href="#" id="nav_current"><span>企业新闻</span></a></li> <li><a href="#"><span>企业简介</span></a></li> <li><a href="#"><span>产品展厅</span></a></li> <li><a href="#"><span>企业历史</span></a></li> <li><a href="#"><span>招商加盟</span></a></li> <li><a href="#"><span>网上下单</span></a></li> <li><a href="#"><span>联系我们</span></a></li> </ul> </div> <div class="nav_son"> <ul> <li><a href="#">企业动态</a></li> <li><a href="#">领导活动</a></li> <li><a href="#">产品资讯</a></li> <li><a href="#">通知公告</a></li> </ul> </div> </div> <div class="clearfloat"></div> <div id="maincontent"> <div id="main">此处显示 id "main" 的内容</div> <div id="side">此处显示 id "side" 的内容</div> </div> <div class="clearfloat"></div> <div id="footer">此处显示 id "footer" 的内容</div> </div> </body> </html> |
提示：可以先修改部分代码后再运行
Div+CSS速成第十天:di
Div+CSS速成第一天：X
跨浏览器兼容的CSS编码
视频:DIVCSS网站制作视
DIV+CSS网页布局技巧2
Dreamwerver 8.0
AE: After Effects CS5.5![会声会影X5入门到精通01：入门篇[视频教程]](/upfiles/image/201507/hshyx5z1.jpg)
会声会影X5入门到精通
腾讯电脑管家最新版
2345手机浏览器
