<!doctype html>标签:00,菜单,18,09,cai,scale,餐厅,页面 From: https://www.cnblogs.com/ckyjbd/p/17516442.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title><style>
#div1{font-size: 30px;color: lightskyblue}
#div2{font-size: 30px;text-align: center;color: #4caf50}
#div3{font-size: 35px;top:30px;text-align: center;color: lightgreen}
.cai{border: 1px solid #ccc; }
#cai-1{
float: left;
}
#cai-2{
margin: 0 auto;
}
#cai-3{
float: right;
}
.cai>img{
width: 100%;
height: 100%;
transition: transform 1.3s linear;
}
.cai>img:hover {
transform: scale(1.1);
}
</style>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-lg-pull-1" id="div1"><h2><strong>创克杨餐厅</strong></h2></div>
<div class="col-lg-3 col-sm-4 col-lg-push-7" >
<td class="dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">菜单 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
</ul></div>
<div class="col-lg-3 col-sm-4 col-lg-push-5"><a>营业时间</a></div>
<div class="col-lg-3 col-sm-4 col-lg-push-3"><a>联系我们</a></div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 text-left" id="div2">菜单</div>
<div class=" col-lg-4 col-md-6 col-sm-12 col-lg-pull-1 cai" id="cai-1" >
红烧肉<br>
$10.88<br>
其以五花肉为制作主料,也可用猪后腿代替 [3] ,最好选用肥瘦相间的三层肉来做,锅具以砂锅为主,做出来的肉肥瘦相间,肥而不腻,香甜松软,营养丰富,入口即化。<br>
<img src="https://img2.baidu.com/it/u=2628797822,2440252357&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1688058000&t=3ca3fce83c4387e74906c9fc9926449e" height="400px" width=350px">
</div>
<div class=" col-lg-4 col-md-6 col-sm-12 col-lg-push-1 cai" id="cai-2">
无锡酱香排骨<br>
$18.88<br>
无锡酱排骨是一道老少皆宜的江苏名菜,其色泽酱红,肉质酥烂,骨香浓郁,汁浓味鲜,咸中带甜,充分体现了无锡菜肴的基本风味。<br>
<img src="https://img1.baidu.com/it/u=3672951057,968186511&fm=253&fmt=auto&app=138&f=JPEG?w=366&h=244" height="400px" width="350px" >
</div>
<div class=" col-lg-4 col-md-6 col-sm-12 col-lg-push-2 cai" id="cai-3">
酸辣土豆丝<br>
$6.88<br>
酸辣土豆丝是一道色香味俱佳的家常小菜,色泽五彩斑斓,金黄的土豆丝粗细均匀,香脆可口,令人流连忘返,朝思暮想。<br>
<img src="https://img0.baidu.com/it/u=3152393924,830800091&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=331" height="400px" width="350px" >
</div>
</div>
<div class="col-lg-12 col-sm-12 col-lg-pull-1" style="height: 100px" id="div3">营业时间
</div>
<div class="row" style="height: 20px">
<div class="col-lg-12">
<table class="table table-striped">
<tr>
<td><strong>星期一</strong></td>
<td class="col-lg-6">09:00-18:00</td>
</tr>
<tr>
<td><strong>星期二</strong></td>
<td class="col-lg-6">09:00-18:00</td>
</tr>
<tr>
<td><strong>星期三</strong></td>
<td class="col-lg-6">09:00-18:00</td>
</tr>
<tr>
<td><strong>星期四</strong></td>
<td class="col-lg-6">09:00-18:00</td>
</tr>
<tr>
<td><strong>星期五</strong></td>
<td class="col-lg-6">09:00-18:00</td>
</tr>
<tr>
<td><strong>星期六</strong></td>
<td class="col-lg-6">09:00-18:00</td>
</tr>
<tr>
<td><strong>星期日</strong></td>
<td class="col-lg-6">休息</td>
</tr>
</table>
</div></div>
</div>
</body>
</html>