第5章综合案例——昵心美食空间

最新推荐文章于 2025-04-28 10:15:58 发布

遗憾何来

最新推荐文章于 2025-04-28 10:15:58 发布

阅读量384

点赞数 12

文章标签：前端 javascript

本文链接：https://blog.csdn.net/2301_82347006/article/details/142887867

版权

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>昵心美食空间</title>
		<style type="text/css">
			*{
				background-color:#FFFF99;
			}
			a{
				color: red;
			}
			.all{
				width:700px;
				height:650px;
				margin:10px auto;
				padding:5px;
				background-image:url(img/bg1.JPG);
			}
			.banner{
				width:700px;
				height:70px;
			}
			.menu{	
				width:690px;
				height:40px;
				padding:5px;
			}
			.main{
				width:700px;
				height:450px;
				margin:5px 0px;
				position: relative;
			}
			.left,.right{
				width:150px;
				height:440px;
				border:1px solid #999;
				float:left;
			}
			.middle{
				width:384px;
				height:450px;
				margin:0px 5px;
				float:left;
				font-size:20px;
				font-family:"楷体";
				font-weight:700;
				color:#0000FF;
			}
			.one{
				width:380px;
				height: 155px;
				border: 1px solid #999;
			}
			.two{
				width:255px;
				height:100px;
				border:5px double red;
				margin-top:20px;
				margin-bottom:20px;
				border-radius:25px;
			}
			.three{
				width:380px;
				height:135px;
				border: 1px solid #999;
			}
			.bottom{
				width:700px;
				height:70px;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="banner">
				<img src="img/banner.jpg" width="700px" height="70px"/>
			</div>
			<div class="menu">
				<img src="img/menu.jpg" width="690px" height="40px"/>
			</div>
			<div class="main">
				<div class="left">
				<marquee direction="up">
					<img src="img/mm_1.jpg" width="150px" height="140px"/>
					<img src="img/mm_2.jpg" width="150px" height="140px"/> 
					<img src="img/mm_3.jpg" width="150px" height="140px"/>
				</marquee>
				</div>
				<div class="middle">
					<div class="one">
						<img src="img/font.jpg" width="25px"height="25px"/>为您推荐
						<br><br>
						<img src="img/x_1.jpg" width="80px" height="40px"/>
						<img src="img/x_2.jpg" width="80px" height="40px"/>
						<img src="img/x_3.jpg" width="80px" height="40px"/>
						<img src="img/x_4.jpg" width="80px" height="40px"/>
						<img src="img/x_5.jpg" width="80px" height="40px"/>
						<img src="img/x_6.jpg" width="8Opx" height="4Opx"/>
					</div>
					<center>
						<div class="two">
						<h1>昵心美食空间</h1>
						</div>
					</center>
					<div class="three">
						<img src="img/font.jpg" width="25px" height="25px"/>团购信息
					<br>
						<a href="#">1.火锅团购</a><br>
						<a href="#">2.烧烤团购</a><br>
						<a href="#">3.自助餐团购</a><br>
						<a href="#">4.新春特惠</a>
					</div>
				</div>
				<div class="right">
					<marquee direction="up">
						<img src="img/good_1.jpg" width="150px" height="140px"/>
						<img src="img/good_2.jpg" width="148px" height="140px"/>
						<img src="img/good_3.jpg" width="148px" height="140px"/>
					</marquee>
				</div>
			</div>
			<div class="bottom">
				<hr color="#0000FF">
				<center style="font-family:'楷体'";>版权所有&copy;昵心美食空间<br/>
				地址：江门市大学路XXX号邮编：500000电话：0750-9999999</center>
			</div>
		</div>
	</body>
</html>

运行结果如下：