Javascript入门（一）导航栏实现

谁借莪１个温暖的怀抱￠ 2023-02-23 12:03 7阅读 0赞

**Javascript是一种解释性语言，而且Javascript只支持单线程，分别为同步调用和异步调用**

![5][]

**先下载HBuilderX工具，然后新建工程**

![1][]

**目标效果图**

![3][]

<!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8" />
    	<title></title>
    	<style type="text/css">
    		div.taobao{
                        background-color: #ff9000;
                        width: 990px;
                        height:30px;
                        display: -webkit-box;
    		   -webkit-box-orient: horizontal;
    		   -webkit-box-pack: center;
    		   -webkit-box-align: center;
                        display: -moz-box;
    		   -moz-box-orient: horizontal;
    		   -moz-box-pack: center;
    		   -moz-box-align: center;
    		  
    		   display: -o-box;
    		   -o-box-orient: horizontal;
    		   -o-box-pack: center;
    		   -o-box-align: center;
    		  
    		   display: -ms-box;
    		   -ms-box-orient: horizontal;
    		   -ms-box-pack: center;
    		   -ms-box-align: center;
    		  
    		   display: box;
    		   box-orient: horizontal;
    		   box-pack: center;
    		   box-align: center;
    		}
    		*{
    			margin:0;
    			padding:0;
    		}
    		ul{
    			list-style: none;
    		}
    		li{
    			color:#FFFFFF;
    			margin:0 10px;
    			float:left;
    			line-height: 30px;
    			font-weight: bold;
    			text-align: center;
    			font-size: 16px;
    		}
    	</style>
    	</head>
    	<body>
    		<div class="taobao">
    			<ul>
    				<li>天猫</li>
    				<li>聚划算</li>
    				<li>天猫超市</li>
    			</ul>
    		</div>
    	</body>
    </html>

**小技巧：div.taobao>ul>li\*3加Tab键，可以批量生成**

![4][]

[5]: https://img-blog.csdnimg.cn/20200707125524560.png
[1]: https://img-blog.csdnimg.cn/20200707105144237.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NzAxNg==,size_16,color_FFFFFF,t_70
[3]: https://img-blog.csdnimg.cn/20200707105749293.png
[4]: https://img-blog.csdnimg.cn/20200707111530497.png