26 html5(食物页面)

发布于:2024-04-16 ⋅ 阅读:(154) ⋅ 点赞:(0)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.box{
				width: 1600px;
				height: 3000px;
				margin: 0 auto;
			}
			.box1{
				width: 1200px;
				height: 100px;
				margin: 0 auto;
			}
			.box11{
				float: left;
				width: 60px;
				height: 40px;
			}
			
			.box12{
				float: left;
				width: 100px;
				height: 100px;
			}
			.box13{
				padding-left: 300px;
				padding-top: 20px;
				float: left;
				width: 700px;
				height: 100px;
			}
			ul {
				list-style: none;
				margin: 0;
				padding:0;
			}
			ul li a{
				display: block;
				width: 80px;
				height: 20px;
				font-size: 10px;
				float: left;
			}
			ul li a:link,ul li a:visited{
				background-color: aqua;
				color: aliceblue;
			}
			.box2{
				width: 1600px;
				height: 400px;
			}
			.box21{
				float: left;
				width: 800px;
				height: 400x;
			}
			.box211{
				padding-left: 50px;
				float: left;
				width: 150px;
				height: 60px;
			}
			.box22
			{
				float: right;
				width: 800px;
				height: 400px;
				margin: 0;
				background-size: 70%;
			}
			.box3{
				margin: 0;
				width: 1600px;
				height: 750px;
			}
			.box31{
				float: right;
				margin: 0%;
				padding-right: 100px;
				width: 800px;
				height:200px;
			}
			.box32{
				float: right;
				padding-right: 100px;
				width: 200px;
				height: 100px;
			}
			.box4{
				width:1600px;
				height: 100px;
			}
			.box5{
				width:1300px;
				height: 400px;
				margin:0 auto;
			}
			.box51
			{
				width: 300px;
				height: 400px;
				margin-left: 50px;
				margin-right: 50px;
				float: left;
				border-width: 1px;
				border-style: solid;
				border-color: black;
			}
			.box6{
				margin-top: 50px;
				width: 1600px;
				height: 400px;
			}
			.box61{
				width: 800px;
				height: 400px;
				float: left;
				background-image:url(img/bg3.jpg) ;
				background-repeat: no-repeat;
				background-size: cover;
			}
			.box62{
				width: 800px;
				height: 400px;
				float: left;
				
				background-image:url(img/bg4.jpg) ;
				background-repeat: no-repeat;
				background-size: cover;
			}
			.box7{
				width: 1600px;
				height: 600px;
				margin-top: 50px;
				background-image: url(img/bg5.jpg);
				background-size: cover;
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">
				<div class="box11">
					<img src="img/b2.jpg" width="60px" height="40px" style="float: left;">
				</div>
				<div class="box12">
					<p style="font-size: 10px;color: red;margin: 0;padding-left: 40px;" >Tasty</p>
					<p style="font-size: 20px;color: black;margin: 0;" >Burger</p>
				</div>
				
				<div class="box13">
					<ul>
						<li><a>HOME</a></li>
						<li><a>ABOUT US</a></li>
						<li><a>
						<select name="1">
							<option value="1">PAGES</option>
						</select>
						</a></li>
						<li><a>MENU</a></li>
						<li><a>CONTRACT US</a></li>
					</ul>
				</div>
			</div>
			<div class="box2">
				<div class="box21">
					<p style="padding-left: 50px;">Only Fresh Burgers</p>
					<p style="padding-left: 50px;font-size: 40px;margin-top: 0;margin-bottom: 0;">Flame<span style="color:red"> Grilled Burger</span></p>
					<p style="padding-left: 50px;margin-top: 10px;color: gray;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusar
					ntium doloremgue laudantium</p>
					<div class="box211">
						<button style="width: 150px;height: 60px;background-color: seagreen;border-radius: 5%;font-size: 20px;color: aliceblue;">Read More</button>
					</div>
					<div class="box211">
						<button style="width: 150px;height: 60px;border-radius: 5%;font-size: 20px;">Order Now</button>
					</div>
				</div><img src="img/1.jpg" style="float: right;height: 400px;padding-right: 100px;" />
				<div class="box22">
				</div>
			</div>
			<div class="box3">
				<img src="img/bg1.jpg" style="height: 400px;float: left;"/>
				<p style="padding-top: 50px;float: right;padding-right: 150px;padding-left: 800px;">About us</p>
				<p style="margin: 0;float: right;padding-right: 150px;font-size: 40px;">Welcome to <span style="color:red">Tasty Burger</span></p>
				<div class="box31"><p style="float: right;font-size: 20px;color: gray;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accus
				antium doloremgue laudantium,totam ren aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.Nemo enim
				ipsam voluptatem quia voluptas sit.</span></p></div>
				<div class="box32"><button style="width: 150px;height: 50px;border-radius: 5%;">Read More</button></div>
			</div>
			<div class="box4">
				<center><p>Tasty</p></center>
				<center><p style="font-size: 30px;margin: 0;">Our <span style="color:red">Special</span></p></center>
			</div>
			<div class="box5">
				<div class="box51">
					<img src="img/blog1.jpg" style="width:300px" />
					<p style=" font-size: 20px;padding-left: 10px;margin-top: 10px;margin-bottom: 0px;">French Burger</p>
					<p style="font-size: 15px;color: gray;padding-left: 10px;margin-bottom: 20px;">Cras ultricies ligula sed magna dictum porta auris blandita.</p>
					&nbsp;&nbsp;<button style="width: 150px;height: 50px;border-radius: 5%;">View More</button>
				</div>
				<div class="box51">
					<img src="img/blog2.jpg" style="width:300px" />
					<p style=" font-size: 20px;padding-left: 10px;margin-top: 10px;margin-bottom: 0px;">Veg Muffin</p>
					<p style="font-size: 15px;color: gray;padding-left: 10px;margin-bottom: 20px;">Cras ultricies ligula sed magna dictum porta auris blandita.</p>
					&nbsp;&nbsp;<button style="width: 150px;height: 50px;border-radius: 5%;background-color: seagreen;color: aliceblue;">View More</button>
				</div>
				<div class="box51">
					<img src="img/blog3.jpg" style="width:300px" />
					<p style=" font-size: 20px;padding-left: 10px;margin-top: 10px;margin-bottom: 0px;">Hashbrown Brioche</p>
					<p style="font-size: 15px;color: gray;padding-left: 10px;margin-bottom: 20px;">Cras ultricies ligula sed magna dictum porta auris blandita.</p>
					&nbsp;&nbsp;<button style="width: 150px;height: 50px;border-radius: 5%;">View More</button>
				</div>
			</div>
			<div class="box6">
				<div class="box61">
					<center><p style="color: aliceblue;font-size: 30px;padding-top: 50px;">Best Fast Food Collection</p></center>
					<center><p style="color: aliceblue;font-size: 20px;padding-top: 0">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris Sed ut perspiciatis unde
					omnis iste natus error.</p></center>
					<center><button style="width: 150px;height: 50px;border-radius: 5%;background-color: seagreen;">Order Now</button></center>
				</div>
				<div class="box62">
					<center><p style="color: aliceblue;font-size: 30px;padding-top: 50px;">Organic Best & Fresh Food</p></center>
					<center><p style="color: aliceblue;font-size: 20px;padding-top: 0">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris Sed ut perspiciatis unde
					omnis iste natus error.</p></center>
					<center><button style="width: 150px;height: 50px;border-radius: 5%;background-color: seagreen;">Order Now</button></center>
				</div>
			</div>
			<div class="box7">
				<center><p>Our Work</p></center>
				<center><p style="font-size: 30px;margin: 0;">Excellent <span style="color:red">Services</span></p></center>
				<div style="width: 1600px;height: 300px;"><img src="img/s1.png"/ style="width: 100px;float: left;padding-left: 400px;padding-top: 100px;">
				<img src="img/s2.png"/ style="width: 100px;height:100px;float: left;padding-left: 550px;padding-top: 100px;padding-right: 300px;"></div>
				<img src="img/s3.png"/ style="width: 100px;float: left;padding-left: 350px;padding-top: 100px;">
				<img src="img/s4.png"/ style="width: 100px;float: left;padding-left: 750px;padding-top: 100px;">
				<center><img src="img/img.png"" style="float: none;"/></center>
			</div>
			<div class="box5" style="padding-top: 500px;">
				<div class="box51">
					<img src="img/blog1.png" style="width:300px" />
					<p style=" font-size: 20px;padding-left: 10px;margin-top: 10px;margin-bottom: 0px;">French Burger</p>
					<p style="font-size: 15px;color: gray;padding-left: 10px;margin-bottom: 20px;">Cras ultricies ligula sed magna dictum porta auris blandita.</p>
					&nbsp;&nbsp;<button style="width: 150px;height: 50px;border-radius: 5%;">View More</button>
				</div>
				<div class="box51">
					<img src="img/b1.png" style="width:300px" />
					<p style=" font-size: 20px;padding-left: 10px;margin-top: 10px;margin-bottom: 0px;">Veg Muffin</p>
					<p style="font-size: 15px;color: gray;padding-left: 10px;margin-bottom: 20px;">Cras ultricies ligula sed magna dictum porta auris blandita.</p>
					&nbsp;&nbsp;<button style="width: 150px;height: 50px;border-radius: 5%;background-color: seagreen;color: aliceblue;">View More</button>
				</div>
				<div class="box51">
					<img src="img/blog3.png" style="width:300px" />
					<p style=" font-size: 20px;padding-left: 10px;margin-top: 10px;margin-bottom: 0px;">Hashbrown Brioche</p>
					<p style="font-size: 15px;color: gray;padding-left: 10px;margin-bottom: 20px;">Cras ultricies ligula sed magna dictum porta auris blandita.</p>
					&nbsp;&nbsp;<button style="width: 150px;height: 50px;border-radius: 5%;">View More</button>
				</div>
				<img src="img/bg7.jpg" style="width: 1600px;"/>
			</div>
			
		</div>
	</body>
</html>


网站公告

今日签到

点亮在社区的每一天
去签到