Implementing stories
To achieve the above figure, (the HOME ABOUT GARLLERY EVENT CONACT appear in the navigation bar sink)html code implementation
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../css/index2.css">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="header">
<div class="logo"><img src="../images/logo.png"></div>
<div class="link_page">
<ul>
<li>home</li>
<li>home</li>
<li>home</li>
<li>home</li>
<li>home</li>
<li>home</li>
</ul>
</div>
</div>
</body>
</html>
复制代码
css code implementation
* {
margin: 0px;
padding: 0px;
}
.header {
width: 100%;
height: 70px;
background-color: #07cbc9;
}
.header .logo img {
margin-top: 11px;
margin-left: 100px;
}
.header .logo{
float: left;
position: relative;
}
.header .link_page{
float: right;
position: relative;
}
.header .link_page ul li{
float: left;
position: relative;
margin-top: 5%;
margin-right: 30px;
list-style: none;
}
.logo .link_page .blo {
width: 30px;
height: 70px;
background: black;
}
a{
text-decoration: none;
color: black;
}
复制代码
Realize the mouse movement becomes background color
You can add in the css.header .link_page a:hover {
background: black;
color: white;
height: 70px;
width: 30px;
}
复制代码
Reproduced in: https: //juejin.im/post/5d0839626fb9a07ee30e1a5b