HTML综合案例

embedded/2024/12/25 9:19:01/
htmledit_views">

        为了前端考试。

        效果图:

        HTML代码:

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代码:

html">* {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.ppmy.cn/embedded/148576.html

相关文章

HOW - React 组件中传递一个组件属性如何定义

在 React 中&#xff0c;如果你希望通过属性传递一个组件&#xff0c;通常有以下几种常见情况及对应的类型定义方法。 1. 传递一个 React 组件类型 如果你希望传递的是一个组件&#xff08;例如 MyComponent 或类似的组件&#xff09;&#xff0c;可以用 React.ComponentType …

概率论 期末 笔记

第一章 随机事件及其概率 利用“四大公式”求事件概率 全概率公式与贝叶斯公式 伯努利概型求概率 习题 推导 一维随机变量及其分布 离散型随机变量&#xff08;R.V&#xff09;求分布律 利用常见离散型分布求概率 连续型R.V相关计算 利用常见连续型分布的计算 均匀分布 正态…

防止私接小路由器

电脑获取到IP地址不是DHCP服务器的IP地址段&#xff0c;导致整个公司网络瘫痪&#xff0c;这些故障现象通常80%原因是私接小路由器导致的&#xff0c;以下防止私接小路由器措施。 一、交换机配置DHCP Sooping DHCP snooping是一种DHCP安全特性&#xff0c;用于防止非法设备获…

公交车信息管理系统:构建智能城市交通的基石

程序设计 本系统主要使用Java语言编码设计功能&#xff0c;MySQL数据库管控数据信息&#xff0c;SSM框架创建系统架构&#xff0c;通过这些关键技术对系统进行详细设计&#xff0c;设计和实现系统相关的功能模块。最后对系统进行测试&#xff0c;这一环节的结果&#xff0c;基本…

深入解析 Apache APISIX

以下是“第一部分&#xff1a;背景与概述”的示例写作内容&#xff0c;供你参考和使用。你可根据实际需求和篇幅进行增删或细化。 一、背景与概述 1. 高性能动态网关的意义 1.1 微服务架构下的网关角色与价值 随着微服务架构在企业级应用中日益普及&#xff0c;系统被拆分为…

Escalate_Linux靶机

Escalate_Linux靶机 前言&#xff1a;集合了多种liunx提权方法的靶场&#xff0c;通过该靶场可以简单的了解liunx提权方法 1&#xff0c;扫描一下端口 80/tcp open http 111/tcp open rpc 2049/udp nfs要知道对方的共享才能挂载 139/445 Samba SMB是一个协议名&#xff0c…

如何编译Opencv +ffmpeg linux 明明安装了ffmpeg但是opencv就是找不到

想要编译opencvffmpeg&#xff1a; 1.安装ffmpeg 随便位置&#xff08;具体看ffmpeg 编译安装&#xff09; 执行下面命令&#xff0c;其中/usr/local/ffmpeg/lib/pkgconfig是你实际的ffmpeg路径 export PKG_CONFIG_PATH$PKG_CONFIG_PATH:/usr/local/ffmpeg/lib/pkgconfig2.下载…

基于Spring Boot的建材租赁系统

一、系统背景与目的 随着建筑行业的快速发展&#xff0c;建材租赁需求日益增加。传统的建材租赁管理方式大多依赖于纸质文档或简单的电子表格&#xff0c;不仅效率低下&#xff0c;还容易出现信息遗漏和错误。为了解决这些问题&#xff0c;基于Spring Boot的建材租赁系统应运而…