2019独角兽企业重金招聘Python工程师标准>>> 
做出来的作业效果图（右键图片选择“在新的窗口打开图片”来查看）：
素材图片：
，
，
，
，
完成的代码：
static.html为：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>静态网页</title><link rel="stylesheet" type="text/css" href="css/static.css">
</head>
<body><div class="head"><ul><li id="lsl"></li><li class="ll"><a href="#">网站首页</a></li><li id="line"><div></div></li><li class="ll"><a href="#">公司新闻</a></li><li id="line"><div></div></li><li class="ll"><a href="#">行业新闻</a></li><li id="line"><div></div></li><li class="ll"><a href="#">基地管理</a></li><li id="line"><div></div></li><li class="ll"><a href="#">会员服务</a></li><li id="line"><div></div></li><li class="ll"><a href="#">网上购物</a></li><li id="line"><div></div></li><li class="ll"><a href="#">产品展示</a></li><li id="line"><div></div></li><li class="ll"><a href="#">关于我们</a></li><li id="line"><div></div></li><li class="ll"><a href="#">ENGLISH</a></li><li id="lsr"></li></ul></div>
</body>
</html>static.css为：
/*
* @Author: 古美峰
* @Date: 2018-04-20 12:02:25
* @Last Modified by: lenovo
* @Last Modified time: 2018-04-20 14:45:38
*/
body{margin:0px;background: url("F:/HtmlTest/work420/images/body_bg.jpg") no-repeat;background-size:100% 117%; background-attachment:fixed;
}
.head{width:100%;height:350px;
}
.head ul{padding:0px;width:1054px;height:60px;margin-top:163px;margin-left:305px;background: url("F:/HtmlTest/work420/images/nav_bg.jpg") repeat;
}
.head ul li{float:left;list-style: none;height:45px;line-height:45px;width:110px;text-align:center;
}
.head ul li a{text-decoration: none;font-weight:bold;color:#fff;
}
.head ul li a:hover{color:red;
}
#line{width:3px;//z-index:999;
}
#line div{height:45px;background: url("F:/HtmlTest/work420/images/line.jpg") no-repeat;//margin-top: 5px;
}
#lsl{width:20px;height:60px;background: url("F:/HtmlTest/work420/images/left.jpg");
}
#lsr{width:20px;height:60px;background: url("F:/HtmlTest/work420/images/right.jpg");
}
总结一下：
背景图片的拉伸使用background-size:X轴 Y轴;进行拉伸，以将素材图片下面的白色部分移除，并使用background-sattachment:fixed;进行固定。在<li>标签里使用一个<div>来存放图片,避免line.jpg被莫名其妙地覆盖掉两个。为了将导航栏的小鸟置于右上角，而取消了导航栏的居中显示，不仅美观了，而且也基本不太影响导航栏的中间部分的显示。
