JS 写个简易的导航条

其实就是要创建页面元素，然后再创建元素的属性：

var arr=["百度","新浪","腾讯","网易"];
var ul=document.createElement("ul");

 for(var i=0;i<arr.length;i++){
     var li=document.createElement("li");
     /*
     li.style.float="left";
     li.style.height="40px";
     li.style.width="100px";
     li.style.lineHeight="40px";
     li.style.textAlign="center";
     li.style.cursor="pointer";
     */
     li.innerHTML=arr[i];
     ul.appendChild(li);
 }

 ul.setAttribute("style","list-style:none;");
 document.body.appendChild(ul);
 console.log(ul);

 

这段：

li.style.float="left";
li.style.height="40px";
li.style.width="100px";
li.style.lineHeight="40px";
li.style.textAlign="center";
li.style.cursor="pointer";

可以简写为：

li.setAttribute('style',' float: left;height: 40px;width: 100px;line-height: 40px;text-align: center;cursor: pointer;');

效果图：

css样式：

li{
background-color: orange;
}
li:hover{
background-color: skyblue;
}