浮动与定位的实操练习

一、浮动的练习

完成如下效果

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

*{

margin: 0;

padding: 0;

}

.nav{

width: 1500px;

height: 50px;

line-height: 50px;

background-color: #666;

}

.nav ul{

width: 1200px;

margin: 0 auto;

overflow: hidden;

clear: both;

}

.nav ul li{

list-style-type: none;

float: left;

padding: 0 20px;

}

.nav ul li a{

color: #b0b0b0;

text-decoration: none;

font-size: 18px;

}

.nav ul li a:hover{

color: #fff;

}

</style>

</head>

<body>

<div class="nav">

<ul >

<li><a href="#">首页</a></li>

<li><a href="#">手机 | 数码</a></li>

<li><a href="#">男装</a></li>

<li><a href="#">女装</a></li>

<li><a href="#">鞋包</a></li>

<li><a href="#">家电</a></li>

<li><a href="#">医药 | 健康</a></li>

<li><a href="#">宠物</a></li>

<li><a href="#">服务</a></li>

</ul>

<p>这是一个好消息，同时也是一个坏消息</p>

</div>

</body>

</html>

二、定位_下拉列表实操

实现下面的效果

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8"&g