Web全栈~14.购物车案例(导航栏)

妖狐艹你老母 2023-01-07 03:46 99阅读 0赞

# Web基本笔记~14.购物车案例(导航栏) #

## [上一期][Link 1] ##

### 样式初始化 ###

body,div,h1,h2,h3,h4,h5,h6,li,ol,ul{ margin: 0px; padding: 0px;}
    body{ text-align: center;font-size:14px;}
    a{ text-decoration: none;}
    li{ list-style: none;}

### 头部导航栏初始 ###

<html>  
        <head>  
            <meta charset="utf-8">  
            <title>title</title>  
    		
    		<link href="./css/reset.css" type="text/css" rel="stylesheet"/>
    		
    		<link href="./css/demo.css" type="text/css" rel="stylesheet"/>
    	</head>  
        <body>  
    		
    		<div class="nav">
    			<div class="warp">
    				
    				<ul class="nav_ul">
    					<li><a href="">商城首页</a></li>
    					<li><a href="">配送至 : 北京</a></li>
    				</ul>
    			</div>
    		</div>
        </body>  
    </html>

.nav{ 
    	/*设置导航栏的高度 为 30px*/
    	height: 30px;
    	/*导航栏颜色*/
    	background-color: #f1f1f1;
    }
    .warp{ 
    	/*宽度设置1000px*/
    	width: 1000px;
    	/*设置内容居中*/
    	margin: 0px auto;
    }

### 当前样式 ###

![在这里插入图片描述][20210115151406360.png]

此时此刻肯定不是我们想要的效果,良好的效果应该是让他们平行。为了让文字之间留有间隙,可以适当的添加& nbsp;在需要空的地方,或者使用margin-right轻微调整间距。

##### 设置平行和行高 #####

.nav_ul{ 
    	/*设置左浮动*/
    	float: left;
    }
    /*设置 nav_ul下面的li标签样式*/
    .nav_ul li{ 
    	float: left;
    	/*设置行高*/
    	line-height: 30px;
    	/*轻微调整间距*/
    	margin-right: 10px;
    }
    /*设置 nav_ul 下面的a标签样式*/
    .nav_ul a{ 
    	/*设置字体样式*/
    	font-size: 12px;
    	color: #808080;
    }

##### 当前样式 #####

![在这里插入图片描述][20210115163930840.png]

### 右边导航栏 ###

除了左边的导航栏以外,还要再设置右边的导航栏。此时的操作和前面差不多,仅仅只是把ul的左浮改成了右浮而已。

/* 设置第二个ul */
    .nav_ul1{ 
    	/*设置右浮*/
    	float: right;
    }
    .nav_ul1 li{ 
    	/*设置 ul下面的li左浮*/
    	float: left;
    	/*设置行高*/
    	height: 30px;
    	/*微微调整间距*/
    	margin-left: 10px;
    }
    .nav_ul1 a{ 
    	/*设置字体样式*/
    	font-size: 12px;
    	color: #808080;
    }

<ul class="nav_ul1">
    	<li><a href="">嵌入式</a></li>
    	<li><a href="">硬件</a></li>
    	<li><a href="">计算机科学</a></li>
    	<li><a href="">WEB</a></li>
    	<li><a href="">服务器</a></li>
    	<li><a href="">人工智能</a></li>
    	<li><a href="">大数据</a></li>
    	<li><a href="">分布式</a></li>
    </ul>

### 当前样式 ###

![在这里插入图片描述][20210115165220659.png]

### 合并 ###

为了避免代码过度的重复,因此,适当的对CSS一些样式进行合并,可以达到简写的一个目的,对日后的修改和维护帮助会很大。

/*同时设置 nav_ul和nav_ul1下面的li标签样式*/
    .nav_ul li,.nav_ul1 li{ 
    	float: left;
    	/*设置行高*/
    	line-height: 30px;
    	/*轻微调整间距*/
    	margin-right: 10px;
    }
    /*同时设置 nav_ul和nav_ul1 下面的a标签样式*/
    .nav_ul a,.nav_ul1 a{ 
    	/*设置字体样式*/
    	font-size: 12px;
    	color: #808080;
    }

## 最后代码 ##

### 样式初始化 ###

body,div,h1,h2,h3,h4,h5,h6,li,ol,ul{ margin: 0px; padding: 0px;}
    body{ text-align: center;font-size:14px;}
    a{ text-decoration: none;}
    li{ list-style: none;}

### 样式设置 ###

.nav{ 
    	height: 30px;
    	background-color: #f1f1f1;
    }
    
    .warp{ 
    	width: 1000px;
    	margin: 0px auto;
    }
    
    .nav_ul{ 
    	/*设置左浮动*/
    	float: left;
    }
    /*同时设置 nav_ul和nav_ul1下面的li标签样式*/
    .nav_ul li,.nav_ul1 li{ 
    	float: left;
    	/*设置行高*/
    	line-height: 30px;
    	/*轻微调整间距*/
    	margin-right: 10px;
    }
    /*同时设置 nav_ul和nav_ul1 下面的a标签样式*/
    .nav_ul a,.nav_ul1 a{ 
    	/*设置字体样式*/
    	font-size: 12px;
    	color: #808080;
    }
    /* 设置第二个ul */
    .nav_ul1{ 
    	/*设置右浮*/
    	float: right;
    }
    .nav_ul1 li{ 
    	/*设置行高*/
    	height: 30px;
    	/*微微调整间距*/
    	margin-left: 10px;
    }

### 页面布局 ###

<!DOCTYPE html>  
    <html>  
        <head>  
            <meta charset="utf-8">  
            <title>title</title>  
    		
    		<link href="./css/reset.css" type="text/css" rel="stylesheet"/>
    		
    		<link href="./css/demo.css" type="text/css" rel="stylesheet"/>
    	</head>  
        <body>  
    		
    		<div class="nav">
    			<div class="warp">
    				
    				<ul class="nav_ul">
    					<li><a href="">商城首页</a></li>
    					<li><a href="">配送至:  北京</a></li>
    				</ul>
    				
    				<ul class="nav_ul1">
    					<li><a href="">嵌入式</a></li>
    					<li><a href="">硬件</a></li>
    					<li><a href="">计算机科学</a></li>
    					<li><a href="">WEB</a></li>
    					<li><a href="">服务器</a></li>
    					<li><a href="">人工智能</a></li>
    					<li><a href="">大数据</a></li>
    					<li><a href="">分布式</a></li>
    				</ul>
    			</div>
    		</div>
        </body>  
    </html>

![在这里插入图片描述][20210115165220659.png]

就这样,购物车的导航栏制作完毕~

[Link 1]: https://blog.csdn.net/qq_41424688/article/details/112604757
[20210115151406360.png]: /images/20221119/c5124b781b4f4177b5ffcc87f73d74e8.png
[20210115163930840.png]: https://img-blog.csdnimg.cn/20210115163930840.png
[20210115165220659.png]: https://img-blog.csdnimg.cn/20210115165220659.png