1，制作美食今日推荐页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
#niu1{
width: 300px;
border-radius: 10px;
border: 1px solid #1ea9e1;
margin: auto;
padding: 20px;
line-height: 20px;
}
span{
color: red;
font-size: 16px;
}
li{
list-style: none;
}
.bibi{
position: relative;
bottom: 100px;
}
.wowo{
position: relative;
left: -30px;
}
a{
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="niu1">
<h3 style="display: inline-block"><span>SHOP</span> 今日推荐</h3>
<img src="imgs4/more.gif" style="display: inline-block;position: relative;left: 110px"/>
<ul class="wowo">
<li><img src="imgs4/img9.gif"/></li>
</ul>
<ul style="float: right" class="bibi">
<a href="#"> <li>汉来国际美食百货</li></a>
<li>口味：创意中餐</li>
<li>区域：朝阳/CBD</li>
</ul>
<ul class="wowo">
<li><img src="imgs4/img7.gif"/></li>
</ul>
<ul style="float: right" class="bibi">
<a href="#"><li>汉来国际美食百货</li></a>
<li>口味：创意中餐</li>
<li>区域：朝阳/CBD</li>
</ul>
<ul class="wowo">
<li><img src="imgs4/img8.gif"/></li>
</ul>
<ul style="float: right" class="bibi">
<a href="#"><li>汉来国际美食百货</li></a>
<li>口味：创意中餐</li>
<li>区域：朝阳/CBD</li>
</ul>
<ul class="wowo">
<li><img src="imgs4/img7.gif"/></li>
</ul>
<ul style="float: right" class="bibi">
<a href="#"><li>汉来国际美食百货</li></a>
<li>口味：创意中餐</li>
<li>区域：朝阳/CBD</li>
</ul>
<img src="imgs4/shen.png" style="position: relative;bottom: 360px;left: 70px"/>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东轮播图</title>
<style>
div{
width: 20px;
height: 20px;
border: 1px solid;
display: inline-block;
text-align: center;
line-height: 20px;
border-radius: 20px;
background: black;
color: white;
position: relative;
left: -430px;
bottom: 10px;
}
div:hover{
background: royalblue;
}
</style>
</head>
<body>
<img src="imgs5/focus.jpg"/>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新东方顶部导航菜单</title>
<style>
nav{
background: url(imgs6/top_bg.gif);
width: 700px;
position: relative;
}
a{
margin-left: 20px;
text-decoration: none;
position: relative;
bottom: 5px;
}
#tup{
position: relative;
bottom: 35px;
left: 530px;
}
div{
width: 300px;
height: 300px;
border: solid 1px;
display: none;
position: relative;
left: -200px;
top: 10px;
}
hr{
width: 280px;
}
p{
position: relative;
left: 30px;
}
#tup:hover div{
display: block;
}
</style>
</head>
<body>
<nav>
<img src="imgs6/logo.gif"/>
<a href="#">购物车</a>
<a href="#">优惠券</a>
<a href="#">快速注卡</a>
<a href="#">各地购课</a>
<a href="#">手机报</a>
<a href="#">网站导航</a>
</nav>
<a href="#" id="tup"><img src="imgs6/open_icon.gif" />
<div>
<p>托福 雅思 考研 职称英语 </p>
<p>初中 日语 </p>
<hr/>
<p>网络课堂 资讯中心 知识堂</p>
<p>大师讲坛 学习论坛 学词</p>
<p>考研搜校</p>
<hr/>
<p>M-Zone 手机报 时时英语</p>
</div>
</a>
</body>
</html>