????:<!--CSS基礎(chǔ)--><!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS中的浮動</title><link rel="shortcut icon" type="images/x-icon&q
<!--CSS基礎(chǔ)-->
<!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;position: relative;}
.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;}
.to_bottom {
width: 0;
height: 0;
border-top: 10px solid skyblue;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.box1 ul{display: none; }
.box1:hover ul{display: block;background-color: #6C6C6C;}
.box1 ul li:hover{background-color: #f5f5f5;}
</style>
</head>
<body>
<!--<div class="clear"></div>-->
<div class="box1">HTML<div class="to_bottom" style="display: inline-block;"></div>
<ul>
<li>html5</li>
<li>css3</li>
<li>xml</li>
</ul>
</div>
<div class="box1">jQuery<div class="to_bottom" style="display: inline-block;"></div>
<ul>
<li>javaScript</li>
<li>DOM</li>
<li>Ajax</li>
</ul>
</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>
<div class="clear"></div>
<div style="width: 100%; margin: 0 auto; height: 80px; background-color: #088;"></div>
</body>
</html>
您好,請問一下:為什么使用div的時(shí)候,沒有設(shè)置position也不會出現(xiàn)ul 會擠壓后邊的父親元素后邊的div呢?
?? ???:查無此人?? ??:2019-04-26 13:26:25
???? ??:完成的不錯(cuò),可以把常用的樣式單獨(dú)寫一個(gè)文件。繼續(xù)加油。 有問題提交工單,作業(yè)里你無法追問。