插入图片+ul-li导航+图片左浮动+图片右浮动
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动案例</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.logo {
width: 960px;
height: 100px;
background: red;
margin: 0 auto;
}
.header {
width: 960px;
height: 40px;
margin:0 auto;
}
ul {
display: inline-block;
width: 960px;
height: 40px;
margin:0 auto;
}
ul li {
list-style: none;
width: 96px;
height: 40px;
background-color: #F8F8F8;
line-height: 40px;
text-align: center;
float: left;
}
ul li:hover {
background-color: black;
color: #fff;
}
.clear {
clear: both;
}
.dtu {
width: 960px;
height: 520px;
margin: 0 auto;
}
.dtu_left {
float: left;
}
.dut_right {
float: right;
}
</style>
</head>
<body>
<div>
<img src="1.png" alt="">
</div>
<div>
<ul>
<li>php</li>
<li>html</li>
<li>python</li>
<li>java</li>
<li>C语言</li>
<li>C++</li>
<li>语文</li>
<li>数学</li>
<li>地理</li>
<li>历史</li>
</ul>
</div>
<div></div>
<div>
<div>
<img src="2.png" alt="">
</div>
<div>
<img src="3.png" alt="">
</div>
</div>
</body>
</html>
以下是三张图片
