当前位置：首页 > article >正文

HTML综合案例

article 2024/12/23 19:08:41

为了前端考试。

效果图：

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;            /* 内边距 */
}

查看全文

http://www.kler.cn/a/448283.html