前端系列之CSS（float浮动）
程序员文章站
2022-03-29 23:29:20
...
float属性介绍
float中的四个参数：
-float: left
-float:right
-float:none
-float:inherit //继承浮动
我们可以使用float属性实现文本环绕效果
实例应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.head {
width: 100%;
height: 64px;
}
.logo{
width: 160px;
height: 40px;
float: left;
}
.nav {
width: 320px;
height: 64px;
float: left;
}
.nav-li {
width: 80px;
height: 64px;
text-align: center;
line-height: 64px;
color: #333;
float: left;
}
.icons {
width: 320px;
height: 64px;
float: right;
}
.i01 {
width: 64px;
height: 64px;
float: left;
background: url("image/url1.png") center center no-repeat;
}
.i02 {
width: 64px;
height: 64px;
float: left;
background: url("image/url1.png") center center no-repeat;
}
.i03 {
width: 64px;
height: 64px;
float: left;
background: url("image/url1.png") center center no-repeat;
}
.i04 {
width: 64px;
height: 64px;
float: left;
background: url("image/url1.png") center center no-repeat;
}
.i05 {
width: 64px;
height: 64px;
float: left;
background: url("image/url1.png") center center no-repeat;
}
</style>
</head>
<body>
<div class="head">
<div class="logo">
<img src="image/logo.png" width="160" height="40" alt="">
</div>
<div class="nav">
<div class="nav-li">实战</div>
<div class="nav-li">路径</div>
<div class="nav-li">猿问</div>
<div class="nav-li">手记</div>
</div>
<div class="icons">
<div class="i01"></div>
<div class="i02"></div>
<div class="i03"></div>
<div class="i04"></div>
<div class="i05"></div>
</div>
</div>
</body>
</html>上一篇： The Java Programming Language Notes
下一篇： 栈和队列--栈