3.制作美食今日推荐页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index.html</title>
<link rel="stylesheet" href="DJ8word3.css" type="text/css">
</head>
<body>
<div class="whole">
<div class="start">
<h3><span>SHOP</span>今日推荐</h3>
<a href="#"><img src="more.gif" alt="more"></a>
</div>
<ul>
<li>
<div class="one">
<a href="#"><img src="img9.gif" alt="鸡腿" id="one"></a>
<img src="shen.png" alt="" id="two">
</div>
<div class="two">
<h5><a href="#">汉来国际美食百货</a></h5>
<p><span>口味:</span>创意中餐</p>
<p><span>区域:</span>朝阳/CBD</p>
</div>
<div class="three">
<a href="#"><img src="img7.gif" alt="鸡腿"></a>
</div>
<div class="two">
<h5><a href="#">汉来国际美食百货</a></h5>
<p><span>口味:</span>创意中餐</p>
<p><span>区域:</span>朝阳/CBD</p>
</div>
<div class="three">
<a href="#"><img src="img8.gif" alt="鸡腿"></a>
</div>
<div class="two">
<h5><a href="#">汉来国际美食百货</a></h5>
<p><span>口味:</span>创意中餐</p>
<p><span>区域:</span>朝阳/CBD</p>
</div>
<div class="three">
<a href="#"><img src="img7.gif" alt="鸡腿"></a>
</div>
<div class="two">
<h5><a href="#">汉来国际美食百货</a></h5>
<p><span>口味:</span>创意中餐</p>
<p><span>区域:</span>朝阳/CBD</p>
</div>
</li>
</ul>
</div>
</body>
</html>
body,div,a,p,ul,li,span,img,h3,h5{
padding: 0px;
margin: 0px;
}
li{
list-style: none;
}
.whole{
width: 280px;
border: 1px #aacbee solid;
height: 400px;
margin: auto;
}
.start{
position: relative;
margin-bottom: 10px;
}
.start h3{
margin-left: 20px;
}
.start span{
color: red;
margin-right: 5px;
}
.start a{
position: absolute;
right: 10px;
top: 5px;
}
.one{
position: relative;
left: 30px;
float: left;
height: 90px;
}
.one #one{
position: relative;
}
.one #two{
position: absolute;
left: 60px;
top: -7px;
z-index: 0;
}
.two{
float: right;
margin-left: 30px;
position: relative;
right: 30px;
height: 90px;
}
.two h5{
margin-bottom: 10px;
}
.two a{
color: red;
font-size: 14px;
}
.two p{
font-size: 12px;
}
.two span{
color: #999999;
}
.three{
float: left;
height: 90px;
margin-left: 30px;
}
4.制作京东轮播图页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东轮播图</title>
<link rel="stylesheet" href="DJ8word4.css" type="text/css">
</head>
<body>
<div>
<img src="focus.jpg">
<ul>
<li class="one"><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>
body,ul,li{
padding: 0px;
margin: 0px;
}
div{
width: 730px;
height: 454px;
position: absolute;
margin: 100px 240px;
}
li{
width: 20px;
height: 20px;
border: 1px dimgray solid;
border-radius: 10px;
text-align: center;
background-color: dimgray;
float: left;
margin-right: 10px;
list-style: none;
position: relative;
bottom: 30px;
left: 300px;
}
.one{
background-color: #FF6600;
border: 1px #FF6600 solid;
}
a{
color: #FFFFED;
text-decoration: none;
}
5.制作简略版新东方顶部导航菜单页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新东方顶部导航菜单</title>
<link rel="stylesheet" type="text/css" href="DJ8word5.css">
</head>
<body>
<div class="whole">
<img src="logo.gif" id="one">
<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="#" id="li">网站导航</a></li>
</ul>
<img src="open_icon.gif" id="two">
</div>
<div class="one">
<ul class="three">
<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>
<ul class="four">
<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>
<ul class="five">
<li><a href="#">M-Zone</a></li>
<li><a href="#">手机报</a></li>
<li><a href="#">时时英语</a></li>
</ul>
</div>
</body>
</html>
body,div,ul,li,a{
margin: 0px;
padding: 0px;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.whole{
background: url("../Semester1book3DJ8/top_bg.gif");
width: 620px;
height: 30px;
position: absolute;
}
#one{
margin-left: 10px;
}
.whole li{
margin-left: 10px;
position: relative;
left: 170px;
bottom: 25px;
float: left;
font-size: 14px;
border-right: #999 1px solid;
padding-right: 10px;
}
.whole li:last-of-type{
border: 0px;
}
.whole a{
color: #7b7b7b;
text-decoration: none;
}
#two{
position: relative;
left: 165px;
bottom: 30px;
}
.one{
width: 220px;
height: 230px;
border: 1px #999 solid;
position: absolute;
background: #fff;
left: 370px;
top: 25px;
padding: 5px;
}
.three{
width: 220px;
height: 80px;
border-bottom: 1px #000000 solid;
}
.three a{
font-size: 12px;
color: #999;
margin: 10px;
float: left;
}
.four{
width: 220px;
height: 110px;
border-bottom: 1px #000000 solid;
}
.four a{
font-size: 12px;
color: #999;
margin: 10px;
float: left;
}
.five{
width: 220px;
height: 80px;
}
.five a{
font-size: 12px;
color: #999;
margin: 10px;
float: left;
}