css浮动,块级元素转换内行元素,定位

Original 2019-01-30 22:20:26 378
abstract:<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>颜色选择器</title>  <link rel="stylesheet" href="layui/css/layui.c

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>颜色选择器</title>

  <link rel="stylesheet" href="layui/css/layui.css">

</head>

<body>

<style>

#nav{width:450px;background:red;font-weight:900;line-height:30px}

ul li{float:left;width:80px}

.clear{clear:both}

.content{position:relative;left:50px}

.content span{display:block;height:50px;background:lightblue;width:300px}

.item{background:lightgreen;display:inline-block;height:50px;width:100px}

.item:nth-child(2){position:absolute;left:290px}

.se_menu{display:none}

.menu:hover .se_menu{display:block}

</style>

<div id="nav">

<ul>

<li>目录一</li>

<li>目录二</li>

<li>目录三</li>

<li class="menu">目录四

<ul class="se_menu">

<li>二级目录1</li>

<li>二级目录2</li>

</ul>

</li>

</ul>

<div class="clear"></div>

<div class="about"><p>php中文网是一个牛逼的网站</p></div>

</div>

<div class="content">

<div class="item">PHP</div>

<div class="item">JAVA</div>

<div class="item">PYTHON</div>

<span>javascript</span>

<span>bootstrap</span>

<span>jquery</span>


<div>

</body>

</html>

      


Correcting teacher:灭绝师太Correction time:2019-01-31 09:27:01
Teacher's summary:前端布局中控制浮动是一大难点,要注意清除浮动哦

Release Notes

Popular Entries