< ul > < li > < ahref = " # " / > 网站首页 < / a > < / li > < li > < ahref = " # " / > 公司简介 < / a > < / li > < li > < ahref = " # " / > 产品展示 < / a > < / li > < li > < ahref = " # " / > 新闻动态 < / a > < / li > < li > < ahref = " # " / > 企业文化 < / a > < / li > < li > < ahref = " # " / > 招贤纳士 < / a > < / li > < li > < ahref = " # " / > 联系我们 < / a > < / li > < li > < ahref = " # " / > 来访路线 < / a > < / li > < li > < ahref = " # " / > 收藏本站 < / a > < / li > < / ul > < / div > < / body > < / html > 打开浏览器预览，看到的效果如下：2. 鼠标右键将导航条的背景图片先存入电脑，如下图：3. 现在来为导航条中的元素逐一设置 CSS 样式，先为 ul 规定样式；代码如下： < style > < ! — # navul { Width : 1000 px ; height : 40 px ; margin : 30 pxauto ; padding : 0 ; list - style : none ; border - top : solid 5 px # DAA 520 ; border - bottom : solid 5 px # DAA 520 ; background : url ( img / navig - bg . jpg ) ; } - - > < / style > 上列代码的意思依次为 # navul { 宽度： 1000 像素；高度： 40 像素；外边距：上下各 30 像素，左右相等；内边距： 0 ；列表风格显示：无 ; （这一句代表去掉列表前面的黑点）上边框线：实体线， 5 像素，颜色 # DAA 520 ；下边框线：实体线， 5 像素，颜色 # DAA 520 ；背景： URL （图片地址）； } 打开浏览器预览，看到的效果如下：" />