首页 前端知识 26 html5(食物页面)

26 html5(食物页面)

2024-05-14 22:05:26 前端知识 前端哥 48 628 我要收藏
<!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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8617.html
标签
评论
发布的文章

1、SpringBoot简介及返回json

2024-05-25 09:05:17

mysql 的jsonTable使用

2024-05-25 09:05:41

MySQL中的JSON

2024-05-25 09:05:32

JSON简介(1)

2024-05-25 09:05:22

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!