1.制作今日推荐页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SHOP 今日推荐</title>
<style>
#ys{width:300px;height:400px;margin:0px auto;border: 1px solid #388dff;border-radius: 8px}
ul{list-style-type: none}
a{color: red}
span{color: red;font-size:14px}
div p{font-size: 12px}
h3{padding-left:30px;display:inline-block}
ul,li{margin-left: -10px;margin-top: -10px}
ul li img{padding: 10px 0px;}
</style>
</head>
<body>
<div id="ys">
<h3><span>SHOP</span> 今日推荐</h3>
<img src="more.gif" style="padding-left:90px"/>
<ul>
<li>
<img src="img9.gif"/>
<div style="float: right;padding-right:38px;line-height:10px;padding-top:10px;height:66px;;"><a href="#"><span>汉来国际美食百货</span></a>
<p>口味：创意中餐</p>
<p>区域：朝阳/CBD</p>
<img src="shen.png" style="position: relative;right:70px;top:-100px;"/>
</div>
</li>
<li><img src="img7.gif"/>
<div style="float: right;padding-right:38px;line-height:10px;padding-top:10px;"><a href="#"><span>汉来国际美食百货</span></a>
<p>口味：创意中餐</p>
<p>区域：朝阳/CBD</p>
</div>
</li>
<li><img src="img8.gif"/>
<div style="float: right;padding-right:38px;line-height:10px;padding-top: 10px;"><a href="#"><span>汉来国际美食百货</span></a>
<p>口味：创意中餐</p>
<p>区域：朝阳/CBD</p>
</div>
</li>
<li><img src="img7.gif"/>
<div style="float: right;padding-right:38px;line-height:10px;padding-top: 10px;"><a href="#"><span>汉来国际美食百货</span></a>
<p>口味：创意中餐</p>
<p>区域：朝阳/CBD</p>
</div>
</li>
</ul>
</div>
</body>
</html>
2.制作京东轮播页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东轮播图</title>
<style>
div{margin:20px 10px;width: 730px;height: 454px}
li{list-style-type: none;display: inline}
a{text-decoration: none;}
a:hover{color: orange;}
span{border-radius:50%;display:inline-block;text-align:center;color:white;
width: 20px;line-height: 20px;background-color: black}
a:hover span{background-color: orange}
ul {position: absolute;left: 280px;top:405px}
</style>
</head>
<body>
<div style="position: relative">
<img src="focus.jpg"/>
<ul style="border: 1px solid;">
<li><a href="#"><span>1</span></a></li>
<li><a href="#"><span>2</span></a></li>
<li><a href="#"><span>3</span></a></li>
<li><a href="#"><span>4</span></a></li>
<li><a href="#"><span>5</span></a></li>
</ul>
</div>
</body>
</html>
3.制作简略版新东方顶部导航菜单页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新东方顶部导航菜单</title>
<style>
body,div,ul{padding: 0px;margin: 0px}
li{list-style-type: none;display: inline-block;color:grey;}
li img{padding:0px 3px 8px;}
a{text-decoration: none}
span{color:gray;border-right: 1px solid gray;padding: 0px 10px;line-height: 8px;}
</style>
</head>
<body>
<div style="width:650px;height:30px;border: 1px solid #d3d3d3;border-bottom: 1px dotted;background-color:#EEEEEE">
<img src="logo.gif" style="display: inline-block;"/>
<ul style="float:right;width:500px;margin-top:2.5px;margin-right:70px">
<li><a href="#"><span>购物车</span></a></li>
<li><a href="#"><span>优惠券</span></a></li>
<li><a href="#"><span>快速注卡</span></a></li>
<li><a href="#"><span>各地购物</span></a></li>
<li><a href="#"><span>手机报</span></a></li>
<li><a href="#"><span style="border-right:none">网站导航<img src="open_icon.gif"/> </span>
</a>
</li>
</ul>
<div style="border: 1px solid #d3d3d3;width:230px;height:180px;margin-left:330px;margin-top: -8px;background-color: white">
<ul style="padding:10px 10px;">
<li>托福</li>
<li>雅思</li>
<li>考研</li>
<li>职称英语</li>
<li>初中</li>
<li>日语</li>
<hr/>
<li>网络课堂</li>
<li>资讯中心</li>
<li>知识堂</li>
<li>大师讲坛</li>
<li>学习论坛</li>
<li>学词</li>
<li>考研搜校</li>
<hr/>
<li>M-zone</li>
<li>手机报</li>
<li>时时英语</li>
</ul>
</div>
</div>
</body>
</html>