简易菜单界面
程序员文章站
2022-06-30 18:19:16
...
<!DOCTYPE html>
<head>
<style>
body {
font-family: helvetica, sans-serif;
margin:0 auto;
max-width:600px;
}
div{
height:200px;
background-size:cover;
position:relative;
margin:40px 0 0 0;
border-radius:12px;
}
.first{
background:url("/assets/firstcourse.jpg");
}
.second{
background:url("/assets/secondcourse.jpg");
}
.dessert{
background:url("/assets/dessertcourse.jpg");
}
p{
color:rgba(255,255,255,1);
background:rgba(0,0,0,0.4);
padding:10px;
text-align:justify;
line-height:20px;
position:absolute;
bottom:0;
margin:0;
}
</style>
</head>
<body>
<h1>esha's restaurant</h1>
<div class="first">
<p>welsh onion soko $14<br /><small> Mustard sierra leone bologi kale chard beet greens black-eyed pea sorrel amaranth garlic tigernut spring onion summer purslane asparagus lentil.</small> </p>
</div>
<div class="second">
<p>pastrami boudin tongue $22 <br /><small>Tri-tip capicola kielbasa salami brisket chicken rump strip steak drumstick. Meatloaf chuck boudin ribeye pork jowl. Andouille bacon jowl meatloaf pork loin prosciutto bresaola.</small></p>
</div>
<div class="dessert">
<p>fruitcake marzipan pudding dragee $8 <br /><small>Lollipop tart cotton candy jelly-o carrot cake apple pie cupcake. Jelly-o bear claw ice cream candy canes.</small></p>
</div>
</body>效果：
上一篇： ThinkPHP--控制器（二）
下一篇： 自定义一个简单的圆形菜单