<!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>
<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>
<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>
<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>
<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>
<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>
<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>
26 html5(食物页面)
转载请注明出处或者链接地址:https://www.qianduange.cn//article/8617.html
相关文章
-
运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac
-
前端提高篇(102):jQuery高级方法callbacks、deferred
-
【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED
-
vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack
-
npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.
-
JQuery中的load()、$
-
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)
-
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
-
HTML/SSM-实验室预约管理系统-99299(免费领源码 开发文档)可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C 、python、数据可视化、大数据、全套文案
-
【简单html静态网页代码】 制作一个简单HTML宠物网页(HTML CSS)
发布的文章
运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac
2024-08-27 09:08:17
前端提高篇(102):jQuery高级方法callbacks、deferred
2024-05-09 11:05:34
解决npm install 报错 “npm err code 1“
2024-06-06 10:06:47
【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED
2024-04-22 09:04:34
vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack
2024-03-29 15:03:20
npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.
2024-04-20 17:04:38
JQuery中的load()、$
2024-05-10 08:05:15
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)
2024-10-30 21:10:12
大家推荐的文章