首页 > 其他分享 >餐厅页面

餐厅页面

时间:2023-06-30 13:11:18浏览次数:96  
标签:00 菜单 18 09 cai scale 餐厅 页面

<!doctype 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>

标签:00,菜单,18,09,cai,scale,餐厅,页面
From: https://www.cnblogs.com/ckyjbd/p/17516442.html

相关文章

  • 关于HTML页以Get方法向asp.net页面传值乱码的解决
    这个问题是最近偶然发现的,朋友说我个人做那个基于Lucene的搜索引擎,存在一个问题,就是只能搜索英文,不能搜索中文。我把代码仔细看了一下,没发现问题,但是在测试的时候确实存在这样的问题。我查看传值之后的参数,全部是乱码或者空格,立即觉得是传递过程中编码的问题。后来在web.config中添......
  • [GPT] vue 的 quasar 框架 在 layout 模版中 如何获取 子页面当前使用的 useMeta
     在Quasar框架中,用VueRouter的meta字段来获取子页面当前使用的useMeta。首先,您需要在路由配置中设置子页面的meta字段。例如:  constroutes=[{path:'/page',component:PageComponent,meta:{useMeta:{//在这里定义您......
  • 注册功能 ,前端登录注册页面
    目录1异步发送短信1.1视图类1.2序列化类加入万能验证码2注册功能3.1视图类3.2序列化类补充3前端注册页面分析3.1Header.vue3.2Login.vue4前端登录注册页面复制4.1Login.vue4.2Register.vue4.3Header.vue5前端登录功能6前端注册功能1异步发送短信#原来的发送短......
  • 谷歌浏览器(Google Chrome)打开Axure RP的原型设计页面解决办法
      默认谷歌浏览器是不能直接访问AxureRP所生成的原型文件的,需要安装个谷歌浏览器插件下载地址:https://yvioo.lanzouw.com/i9rvE10rcakb 然后按照里面的教程处理即可......
  • vue2+element-ui国际化实战不刷新页面
    背景有的时候我们做的项目需要支持中英文切换,那么我们就需要使用到vue-i18n插件步骤安装以及挂载安装vue-i18n依赖npmivue-i18n@8在src同级的目录下创建language文件下,在language文件夹下新增3个文件(index.js,en.js,zh.js)index.jsimportVuefrom"vue";importVu......
  • React学习时,outlet配置(token判定,页面path监听)
    尽管写过outlet路由的配置。考虑到token判定和路由页变更,我不了解v6是不是有更详解的做法。决定调一下配置,期望在任何页面异步更新时,token都可以在跳转前被检测到,防止无token跳转发生。为src文件配置v6版本:路由子组件App.jsimport{HashRouter,Routes,Ro......
  • HTML页面中返回顶部的几种实现方式
    第一种:引用外部jQuery新建HTML页面,将下面代码复制保存,通过浏览器打开,即可看到效果.<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>doc</title><style>.arrow{border:9pxsolidtransparent;......
  • 小程序进入页面自动播放音频
    以前我开发PC和H5时知道音频/视频如果自动播放是需要静音的 小程序是不一样的1. 首先肯定是要在onLoad/onShow中调用我们准备播放用的函数 这里根据自己需求写2.重点 我们需要构建一个InnerAudioContext对象//创建内部audio上下文InnerAudioContext......
  • elementui admin中使用外部链接 iframe进行页面的展示
    有时候我们需要外部链接进行展示而且想要这个外部链接的页面不是打开新窗口而是嵌入在项目布局中,就需要用到iframe控件了,iframe控件不需要安装依赖包,可以直接使用1.在template中写<template>  <div>    <iframe:src="linkUrl"frameborder="0":style="{'heig......
  • 如何获取页面上某个元素的坐标
    打开浏览器的F12控制台,在console内输入下面代码functiongetPosition(node){//获取元素相对于其父元素的left值varleftvarleft=node.offsetLeft;vartop=node.offsetTop;//取得元素的offsetParentcurrent=node.offsetParent;//一直循环直到根元素while(current!=nu......