<!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
相关文章
-
vue2中的watch(侦听器)讲解,以及解决深度监听新值和旧值相同的两种方案(手写深拷贝和JSON.parse())。
-
npm安装淘宝镜像报错问题解决 npm install -g cnpm
-
npm install -g cnpm --registry=https://registry.npm.taobao.org 报错
-
2024npm国内镜像源
-
包管理工具npm yarn
-
npm “https://registry.npm.taobao.org/...: certificate has expired“(证书已过期) 解决方法
-
010:vue中el-table 隐藏表头的两种方法
-
vue切换页面白屏问题怎么解决
-
【vue】弹窗组件的几种调用方式
-
vue项目中区域拖拽修改大小, Vue Grid Layout -️ 适用Vue.js的栅格布局系统
发布的文章
1、SpringBoot简介及返回json
2024-05-25 09:05:17
【报错】unexpected non-whitespace character after JSON
2024-05-25 09:05:12
mysql 的jsonTable使用
2024-05-25 09:05:41
MySQL中的JSON
2024-05-25 09:05:32
【MySQL】导入 JSONL 数据到 MySQL数据库
2024-05-25 09:05:32
python如何保存 JSON 文件中的字段为双引号,中文不转义
2024-05-25 09:05:32
JSON简介(1)
2024-05-25 09:05:22
vue2中的watch(侦听器)讲解,以及解决深度监听新值和旧值相同的两种方案(手写深拷贝和JSON.parse())。
2024-05-25 09:05:15
Ubuntu20.04如何安装/更新node和npm?(解决版本不匹配问题)
2024-05-25 09:05:13
大家推荐的文章