<!DOCTYPE html>
<html style="background-image: url(./img/bg.png);">
<head>
<meta charset="utf-8" />
<title>This is my first</title>
<style>
* {
margin: 0;
font-family: "微软雅黑";
transition:0.5s;
-webkit-font-smoothing: antialiased;
}
.header {
width: 100%;
height: 70px;
background-color: white;
position: fixed;
top: 0;
box-shadow:3px 1px 2px darkgrey;
}
.header:hover {
box-shadow:3px 1px 2px #000;
}
.header a {
line-height: 70px;
margin: 85px;
color: black;
text-decoration: none;
padding: 15px;
font-size: 16px;
text-shadow: 0 1px 1px #fff;
}
.header a:hover {
background-color: black;
color: white;
}
.left {
width: 5px;
height: 700px;
background-color: #A9A9A9;
position: fixed;
left: 0;
overflow: auto;
text-align: center;
}
.left:hover {
background-color: white;
width: 200px;
box-shadow:3px 1px 2px darkgrey;
border-top-width: 1px;
border-top-style: solid;
border-top-color: aqua;
}
.left a {
color: #A9A9A9;
text-decoration: none;
}
.main_left {
margin: 80px;
background-color: white;
width: 70%;
height: 700px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: aqua;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: aqua;
}
.main_left:hover {
box-shadow:3px 1px 2px darkgrey;
}
.main_right {
background-color: white;
height: 200px;
width: 20%;
float: left;
}
</style>
</head>
<body>
<div class="header">
<a href="#">主页</a>
<a href="#">博客中心</a>
<a href="#">下载中心</a>
<a href="#">教程大全</a>
<a href="#">登录</a>
</div>
<div class="left">
<a href="#">HTML5</a>
<p></p>
<a href="#">CSS</a>
<p></p>
<a href="#">JavaScript</a>
<p></p>
<a href="#">Vue.js</a>
<p></p>
<a href="#">Node.js</a>
<p></p>
<a href="#">Ajax</a>
<p></p>
<a href="#">Django</a>
<p></p>
<a href="#">PHP</a>
<p></p>
<a href="#" >Flash</a>
<p></p>
<a href="#">ASP</a>
<p></p>
<a href="#">ASP.NET</a>
<p></p>
<a href="#">.NET</a>
<p></p>
<a href="#">JSP</a>
<p></p>
<a href="#">Perl</a>
<p></p>
<a href="#">JQuery</a>
<p></p>
<a href="#">react</a>
<p></p>
<a href="#">bootstrap</a>
<p></p>
<a href="#">StringBoot</a>
<p></p>
<a href="#">router</a>
<p></p>
<a href="#">DVA</a>
<p></p>
<a href="#">数据库</a>
<p></p>
<a href="#">C#</a>
<p></p>
<a href="#">Java</a>
<p></p>
<a href="#">C++</a>
<p></p>
<a href="#">C</a>
<p></p>
<a href="#">Go</a>
<p></p>
<a href="#">Python</a>
</div>
<div class="main_left">
</div>
<div class="main_right">
</div>
</body>
</html>
运行之后就是这样，
float: left;设置无效，将width调整过，无效
求解
