Html
    Css
    Js
body {
	background-color:black;
}
a {
	text-decoration:none;
	transition:.3s;
}
.navbar>a:hover {
	color:#228ee1;
}
.navbar {
	display:flex;
	height:100px;
	justify-content:space-between;
}
.navbar>a {
	flex-grow:1;
	color:#fff;
}
.navbar>div {
	flex-grow:6;
}
.navbar>a,.navbar>div {
	align-self:center;
}
.logo>div>img {
	height:80px;
	width:80px;
}
.logo>div {
	width:100px;
	height:100px;
	background-color:rgba(89,89,89,.23);
	margin:0 10px;
	display:flex;
	justify-content:center;
	align-items:center;
}
.icon1>div>img {
	height:80px;
	width:80px;
	border-radius:50%;
}
.icon1 {
	overflow:hidden;
}
.icon1>div {
	float:right;
	margin-right:100px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

flex简约导航(原创)

flex简约导航栏制作,运用了flex布局方式

0