CSS中的浮动——简易导航栏
<!--CSS基础-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS中的浮动</title>
<link rel="shortcut icon" type="images/x-icon" href="images/logo.jpg">
<link rel="stylesheet" type="text/css" href="css/index.css">
<style type="text/css">
*{padding:0px;margin: 0px;}/*浏览器自带边距清零*/
ul li{list-style: none;width: 100px; height: 40px; line-height: 40px; text-align: center; background-color: #ccc;margin: 0px 1px;float: left;}
.box1{width: 100px; height: 40px; background-color: pink; line-height:40px; text-align:center; float: left; margin: 0px 2px;}
.clear{clear: both;}/*清除浮动*/
.box2{width: 100px; height: 40px; background-color: pink; line-height:40px; text-align:center; float: right; border: 1px solid #ccc; border-radius: 10px; margin: 0px 5px;}
.box2:hover{background-color: red;}
</style>
</head>
<body>
<!--<div class="clear"></div>-->
<div class="box1">HTML</div>
<div class="box1">jQuery</div>
<div class="box1">PHP</div>
<div class="box2">登录</div><div style="float: right; width: 2px; height: 40px; line-height:40px; text-align:center; margin: 0px 5px;"><span>/</span></div><div class="box2">注册</div>
</body>
</html>
