1，制作美食今日推荐页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>美食今日推荐</title>
<style>
div{width: 270px;height: 355px;border: 1px solid #4bf7ff;margin: auto;
border-radius: 5px;}
p{font-family: Verdana, 宋体;font-weight: bold;margin-left: 30px;}
ul{width: 140px;height: 60px;padding-left: 0;list-style: none;}
.a li{float: right;position: relative;left: 100px;bottom: 70px;font-size: 12px;
width: 100px}
a{color: red;}
li img{margin-left: 20px;}
</style>
</head>
<body>
<img src="css/shen.png"style="position: relative;top:90px;left: 700px;">
<div>
<p><span style="color:red">SHOP </span>今日推荐
<img src="css/more.gif"style="float: right;margin: 0px 10px;">
</p>
<ul>
<li><img src="css/img9.gif"></li>
<li><img src="css/img7.gif"></li>
<li><img src="css/img8.gif"></li>
<li><img src="css/img7.gif"></li>
</ul>
<ul class="a">
<li><a href="">汉来国际美食百货</a></li>
<li>口味：创意中餐</li>
<li>区域：朝阳/CBD</li>
</ul>
<ul class="a">
<li><a href="">汉来国际美食百货</a></li>
<li>口味：创意中餐</li>
<li>区域：朝阳/CBD</li>
</ul>
<ul class="a">
<li><a href="">汉来国际美食百货</a></li>
<li>口味：创意中餐</li>
<li>区域：朝阳/CBD</li>
</ul>
<ul class="a">
<li><a href="">汉来国际美食百货</a></li>
<li>口味：创意中餐</li>
<li>区域：朝阳/CBD</li>
</ul>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东轮播页面</title>
<style>
li{list-style: none;background-color:black;
border-radius: 50%;width: 20px; height: 20px;
text-align: center;display: inline-block;}
ul{position: absolute;left: 250px;bottom: 0px;}
a{color: #FFFFFF;text-decoration: none;}
a:hover{background-color: yellow;
border-radius: 50%;width: 20px; height: 20px;
display: inline-block}
</style>
</head>
<body>
<div style="position: relative">
<img src="css/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>
.father1{width: 210px;height: 240px;
padding-left: 15px;padding-right:15px;position: absolute;
right: 450px;top:40px;background-color: #FFFFFF;
}
.father1:after{content: "";display: block;clear: both;
}
ul:after{content: "";display: block;clear: both;}
ul{padding-left: 15px;display: none;margin: 0;padding: 0;}
ul li{list-style: none;float: left;font-size: 14px;
color:gray;line-height: 30px;padding-left: 10px;}
.father{height: 27px;width:720px;background-color: #f4f5f6;
font-size: 14px;margin: auto;border-bottom: 1px dashed gainsboro;}
.father div{float: left;margin-top:4px;width: 60px;text-align: center;}
.bored{ border-right:1px solid grey;}
a:hover ul{
display: block;border: 1px solid gray;
}
</style>
</head>
<body>
<div class="father1">
<a href="#"> <img style="position: relative;right:
-250px;top: -30px;" src="css/open_icon.gif">
<ul style="border-bottom:1px solid gray;">
<li>托福</li>
<li>雅思</li>
<li>考研</li>
<li>职称英语</li>
<li>初中</li>
<li>日语</li>
</ul>
<ul style="border-bottom:1px solid gray;">
<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>
</a>
</div>
<div class="father">
<div style="margin-top:0px;"><img src="css/logo.gif"></div>
<div style="margin-left: 80px;margin-right: 30px;padding: 0px 10px;" class="bored">购物车</div>
<div style="margin-left: -30px;padding:0 15px;" class="bored">优惠券</div>
<div style="margin-left: 8px;padding: 0 15px;" class="bored">快速注卡</div>
<div style="margin-left: 5px;padding:0 15px;" class="bored">各地购课</div>
<div style="margin-left: 0px;padding:0 15px;" class="bored">手机报</div>
<div style="margin-left: 5px;padding:0 15px;">网站导航</div>
</div>
</body>
</html>
3013
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
