为了前端考试。
效果图：
HTML代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yummo</title>
<link rel="stylesheet" href="CSS/综合案例.css">
</head>
<body>
<div class="web">
<div class="nav">
<img src="images/logo_.png" alt="logo" class="logo">
<a href="#">HOME</a>
<a href="#">ABOUT US</a>
<a href="#">MENU</a>
<a href="#">RESERVATION</a>
<a href="#">BLOG</a>
<a href="#">CONTACT US</a>
</div>
<img src="images/slider.jpg" alt="slider" class="slider">
<div class="break">
<h1>Catch Of The Day</h1>
<img src="images/heading-dark.png" alt="heading-dark" class="heading-dark">
</div>
<div class="display">
<div class="food">
<img src="images/food1.jpg" alt="burger" title="burger">
<img src="images/food2.jpg" alt="sand" title="sand">
<img src="images/food3.jpg" alt="brand" title="brand">
<img src="images/food4.jpg" alt="chicken" title="chicken">
</div>
</div>
<div class="introduction">
<h1 class="title">
MAKE TASTE DIFFERENT
</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa.
<br>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis,
<br>
ultricies nec, pellentesque eu, pretium quis, sem.
Nulla consequat massa quis enim.
</p>
<button type="submit">View More</button>
</div>
<div class="break">
<h1>From the Blog</h1>
<img src="images/heading-dark.png" alt="heading-dark" class="heading-dark">
</div>
<div class="blog">
<div class="box">
<div class="show">
<img src="images/news-img1.jpg" alt="news1" title="hot cake">
<h2>Hot Cake</h2>
<p>
Lorem ipsum dolor sit amet,
<br>
consectetur adipiscing elit
<br>
eros...
</p>
</div>
<div class="show">
<img src="images/news-img2.jpg" alt="news2" title="fresh salad">
<h2>Fresh Salad</h2>
<p>
Lorem ipsum dolor sit amet,
<br>
consectetur adipiscing elit
<br>
eros...
</p>
</div>
<div class="show">
<img src="images/news-img3.jpg" alt="news3" title="spicy food">
<h2>Spicy Food</h2>
<p>
Lorem ipsum dolor sit amet,
<br>
consectetur adipiscing elit
<br>
eros...
</p>
</div>
</div>
</div>
<div class="break">
<h1>Recent Events</h1>
<img src="images/heading-dark.png" alt="heading-dark" class="heading-dark">
</div>
<div class="events">
<img src="images/ev1.jpg" alt="pizza" title="pizza" class="pizza">
<div class="describe">
<img src="images/t1.jpg" alt="date" title="date"> <span>20 june 2018</span>
<img src="images/t2.jpg" alt="time" title="time"> <span>12:45pm To 04:26pm</span>
<h1>Master Chife Best Competition</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
<br>
sed do eiusmod terempor incididunt ut re et dolore magna
<br>
aliqua. Ut enim ad minim veniam, quis nersostrud
<br>
exercitation ullamco laboris nisi ut aliquip extea.
</p>
<button type="submit">BOOK NOW</button>
</div>
<div class="empty">
</div>
</div>
<footer>
<p>Copyright © 2022 All Rights Reserved. Design by 4044wzb</p>
</footer>
</div>
</body>
</html>CSS代码：
* {
margin: 0;
padding: 0;
}
.web {
width: 80%;
margin: 0 auto;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav .logo {
padding: 10px;
margin: 10px;
}
.nav a {
padding: 10px;
padding-top: 20px;
margin-left: 10px;
width: 200px;
font-size: 30px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: black;
}
.nav a:hover {
font-size: 31px;
text-decoration: underline;
}
.slider {
width: 100%;
height: auto;
display: block;
}
.break {
text-align: center;
}
.break h1 {
padding-top: 30px;
font-size: 65px;
}
.break img{
margin-top: 30px;
margin-bottom: 30px;
width: 300px;
}
.display {
text-align: center;
}
.display .heading-dark {
margin-top: 20px;
margin-bottom: 10px;
width: 300px;
}
.display .food img {
margin-right: 25px;
width: 300px;
}
.introduction {
background-image: url(../images/fixed-img.jpg);
background-size: 80%;
margin-top: 50px;
height: 350px;
color: white;
text-align: center;
}
.introduction h1 {
margin: 20px;
padding: 10px;
padding-top: 35px;
font-size: 65px;
}
.introduction p {
padding-left: 100px;
font-size: 20px;
}
.introduction button {
margin-top: 40px;
width: 150px;
height: 50px;
font-size: 25px;
color: white;
background-color: black;
border: white 1px solid;
border-radius: 30px;
}
.introduction button:hover {
width: 160px;
height: 65px;
font-size: 30px;
}
.blog {
display: flex;
flex-direction: column;
align-items: center;
}
.box {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.show {
display: flex;
flex-direction: column;
align-items: center;
}
.show {
background-color: rgb(243, 243, 243);
width: 550px;
height: 550px;
}
.show img {
width: 550px;
height: 300px;
margin-bottom: 20px;
}
.show h2 {
margin-bottom: 20px;
font-size: 25px;
font-weight: bold;
}
.show p {
font-size: 20px;
}
.show:hover {
background-color: silver;
}
.show h2:hover {
font-size: 30px;
text-decoration: underline;
}
.events {
display: flex;
justify-content: space-between;
align-items: center;
}
.events .pizza {
width: 750px;
}
.events h1 {
text-align: left;
font-size: 35px;
margin: 10px;
}
.events p {
font-size: 20px;
}
.events button {
margin-top: 50px;
background-color: red;
border: none;
color: white;
border-radius: 30px;
height: 65px;
width: 175px;
font-size: 25px;
font-weight: bold;
}
.events button:hover {
height: 75px;
width: 185px;
font-size: 28px;
font-weight: bold;
}
footer {
margin-top: 20px;
display: flex; /* 激活 Flexbox 布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100px; /* 设置 footer 高度 */
background-color: #333; /* 背景色 */
color: white; /* 文字颜色 */
padding: 0 20px; /* 内边距 */
}