<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>美食今日推荐</title>
<style>
*{
margin: 0;
}
div{
margin: 50px auto;
height: 373px;
width: 280px;
border: 1px solid #04e7ff;
border-radius: 10px;
position: relative;
}
h4{
color: red;
margin-top: 22px;
margin-left: 32px;
}
h4 span {
color: black
}
div>a{
position: absolute;
right: 10px;
top: 22px;
}
#first{
float: left;
padding-left: 20px;
margin-top: 10px;
}
#second{
float: right;
padding-left: 0;
margin-top: 10px;
margin-right: 30px;
}
h5 a{
color: #b80613;
line-height: 28px;
font-size: 8px;
}
p{
line-height: 17px;
font-size:10px;
color: #525050;
}
span{
color: #989595;
}
li{
list-style: none;
height: 77px;
text-align: left;
}
div>img{
position: absolute;
left: 80px;
top: 43px;
}
</style>
</head>
<body>
<div>
<h4>SHOP<span> 今日推荐</span></h4>
<a href=""><img src="image/more.gif"></a>
<ul id="first">
<li><img src="image/img9.gif"/></li>
<li><img src="image/img7.gif"/></li>
<li><img src="image/img8.gif"/></li>
<li><img src="image/img7.gif"/></li>
</ul>
<ul id="second">
<li><h5><a href="">汉来国际美食百货</a></h5><p><span>口味:</span>创意中餐<br/><span>区域:</span>朝阳/CBD</p></li>
<li><h5><a href="">汉来国际美食百货</a></h5><p><span>口味:</span>创意中餐<br/><span>区域:</span>朝阳/CBD</p></li>
<li><h5><a href="">汉来国际美食百货</a></h5><p><span>口味:</span>创意中餐<br/><span>区域:</span>朝阳/CBD</p></li>
<li><h5><a href="">汉来国际美食百货</a></h5><p><span>口味:</span>创意中餐<br/><span>区域:</span>朝阳/CBD</p></li>
</ul>
<img src="image/shen.png"/>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>京东轮播图</title>
<style>
#background{
position: relative;
height: 454px;
width: 1200px;
text-align: center;
margin-top: 40px;
}
#number{
position: absolute;
left: 545px;
bottom: 10px;
}
a{
float: left;
margin-right: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px #666 solid;
line-height: 14px;
font-size: 12px;
list-style: none;
background: #666;
text-decoration: none;
color: white;
}
a:hover{
background: orange;
border: 1px orange solid;
}
</style>
</head>
<body>
<div id="background"><img src="image/focus.jpg"/>
<div id="number">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>新东方顶部导航菜单</title>
<style>
*{
margin: 0;
}
#first{
background: url("image/logo.gif") no-repeat 10px,url("image/open_icon.gif") no-repeat 558px,url("image/top_bg.gif");
border-bottom: dotted 1px #c3c3b8;
height: 26px;
width: 600px;
position: relative;
}
p{
position: absolute;
left: 140px;
float: left;
list-style: none;
height: 26px;
text-align: center;
font-size: 12px;
line-height: 26px;
color: #818181;
}
span{
color: #d1d1d1;
}
#second{
border: 1px solid #b9b9b9;
position: absolute;
left: 343px;
top: 20px;
width: 200px;
padding: 0 10px;
background: white;
}
ul{
padding: 10px 6px ;
float: left;
width: 185px;
}
li{
list-style: none;
font-size: 12px;
line-height: 22px;
color: #989898;
float: left;
margin-right: 14px;
}
ul:nth-of-type(1),ul:nth-of-type(2){
border-bottom: solid 1px #dbdbdb;
}
</style>
</head>
<body>
<div id="first">
<p>
购物车 <span>|</span>
优惠券 <span>|</span>
快速注卡 <span>|</span>
各地购课 <span>|</span>
手机报 <span>|</span>
网站导航
</p>
</div>
<div id="second">
<ul>
<li>托福</li>
<li>雅思</li>
<li>考研</li>
<li>职称英语</li>
<li>初中</li>
<li>日语</li>
</ul>
<ul>
<li>网络课堂</li>
<li>资讯中心</li>
<li>知识堂</li>
<li>大师讲坛</li>
<li>学习论坛</li>
<li>学词</li>
<li>考研搜校</li>
</ul>
<ul>
<li>M-Zone</li>
<li>手机报</li>
<li>时时英语</li>
</ul>
</div>
</body>
</html>