css文字中间加横线-使用 Bootstrap4 II 制作响应式网页（导航菜单）

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

上面已经介绍了安装框架的过程，本文接下来要做一个导航菜单。

导航菜单左右结构设计css文字中间加横线，左侧为标志css文字中间加横线，右侧为菜单链接。

电脑菜单显示疗效

切换至移动模式的显示效果

以下是html部分的整体代码：

	
	
	
	
	
	
	


	
 
		
 
			
 
				
					 Logo
				
				
			  
			  	

			  	

			  	

			  
			  
			  

			    

			      

			        首页
			      
			      

			        菜单一
			      
			      

			        菜单二
			      
			      

			        菜单三
			      
			      

			        菜单四
			      
			      

			        菜单五
			      
			    
			  
			
		
	

style.css部分：

header{background-color: #7952b3;}
header .navbar-brand img{height: 30px;border-radius: 50%;}
header .navbar-dark .navbar-toggler,header .navbar-dark .navbar-toggler:focus,header .navbar-dark .navbar-toggler:hover{border: none;padding: 0;outline: none;}
header .navbar-dark .navbar-toggler div{width:25px;height: 4px;background-color: #fff;}

为标题添加背景颜色 #7952b3

以上是完整代码，初学者可以复制代码来尝试。