1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index.html</title>
<style>
#title{
width: 340px;
border: 2px #AACBEE solid;
margin: 0px auto;
border-radius:10px;
}
h2{
text-align: center;
position: relative;
left: -50px;
}
li{
list-style: none;
display:inline-block;
}
#d1{
position: relative;
right: -270px;
top: -65px;
}
ul img{
float: left;
padding: 10px;
position: relative;
top: -10px;
}
span{
color: #D80000;
}a{
color: #D80000;
}
#last{
position: relative;
z-index: 1;
left: 60px;
top: 19px;
}ul{
position: relative;
top: -30px;
}
</style>
</head>
<body>
<div id="title">
<h2><span>SHOP</span> 今日推荐</h2><img id="d1" src="more.gif">
<img id="last" src="shen.png">
<ul>
<div id="t1"><li><img src="img8.gif">
<a href="#">汉来国际美食百货</a><br>
口味：创意中餐<br>
区域：朝阳/CBD</li></div>
<div id="t2"><li><img src="img9.gif">
<a href="#">汉来国际美食百货</a><br>
口味：创意中餐<br>
区域：朝阳/CBD</li></div>
<div id="t3"><li><img src="img7.gif">
<a href="#">汉来国际美食百货</a><br>
口味：创意中餐<br>
区域：朝阳/CBD</li></div>
<div id="t4"><li><img src="img8.gif">
<a href="#">汉来国际美食百货</a><br>
口味：创意中餐<br>
区域：朝阳/CBD</li></div>
</ul>
</div>
</body>
</html>2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东轮播图</title>
<style>
div{
width: 730px;
margin: 0px auto;
position: relative;
}
li{
width: 16px;
height:16px;
padding: 5px;
z-index: 1;
position: relative;
bottom: 55px;
left: 250px;
list-style: none;
display: inline-block;
text-align: center;
line-height: 18px;
border-radius: 50%;
background: #3E3E3E;
}a{
color: white;
text-decoration: none;
}
li:hover {
background:#F27B05;
}
</style>
</head>
<body>
<div><img src="focus.jpg">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
</body>
</html>3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新东方顶部导航菜单</title>
<style>
#title{
background:#EEEEEE;
height: 26px;
border-bottom: #CBCAC6 0.3px dashed;
position:relative;
top: -10px;
}
#d1{
position: relative;
top: 0px;
padding: 50px;
}
#d1 div{
display: inline;
padding: 20px;
position: relative;
top: -78px;
}
#d1 div a{
color: #656565;
text-decoration: none;
font-size: 15px;
margin: 60px;
}
#t1{
position: absolute;
top: 8px;
right: 130px;
}#d2{
width: 285px;
border: #BFBFBF 2px solid;
background: #FFFFFF;
position: absolute;
top: 5px;
right: 120px;
display: none;
}
#d2 a{
text-decoration: none;
color: #878787;
padding: 10px;
}#d2 ul{
list-style: none;
display: inline;
}
ul div{
width: 255px;
border-bottom:#BFBFBF 1px solid;
position: relative;
top:-13px;
margin: 0px auto;
}
li{
line-height: 40px;
}
#t2:hover #d2{
display:block;
}
</style>
</head>
<body>
<div id="title">
<img src="logo.gif">
<div id="d1">
<div><a href="#">购物车</a>|</div>
<div><a href="#">优惠券</a>|</div>
<div><a href="#">快速注卡</a>|</div>
<div><a href="#">各地购课</a>|</div>
<div><a href="#">手机报</a>|</div>
<div><a href="#">网站导航</a></div>
</div>
<div id="t2">
<img id="t1" src="open_icon.gif">
<div id="d2">
<ul>
<div><li><a href="#">托福</a>
<a href="#">雅思</a>
<a href="#">考研</a>
<a href="#">职称英语</a>
<a href="#">初中</a>
<a href="#">日语</a>
</li>
</div>
<div><li><a href="#">网络课堂</a>
<a href="#">资讯中心</a>
<a href="#">知识堂</a>
<a href="#">大师讲坛</a>
<a href="#">学习论坛</a>
<a href="#">学词</a>
<a href="#">考研搜校</a>
</li>
</div>
<div><li><a href="#">M-Zone</a>
<a href="#">手机报</a>
<a href="#">时时英语</a>
</li>
</div>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>