526互联

餐厅页面

发布时间 2023-06-30 13:07:29作者: 创克杨戒不掉
<!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>