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代码:
* {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; /* 内边距 */
}
相关文章:
HTML综合案例
为了前端考试。 效果图: HTML代码: <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…...
TanStack——为现代前端开发提供高性能和灵活的工具
TanStack 是一个由社区主导的开源项目集合,专注于为现代前端开发提供高性能和灵活的工具。它包括多个流行的 JavaScript 和 TypeScript 库,主要用于处理表格、查询、虚拟化、状态管理等功能。 文章目录 1、TanStack Query:1.1 useQuery&#…...
Java爬虫️ 使用Jsoup库进行API请求有什么优势?
在Java的世界里,Jsoup库以其强大的HTML解析能力而闻名。它不仅仅是一个简单的解析器,更是一个功能齐全的工具箱,为开发者提供了从网页抓取到数据处理的一站式解决方案。本文将深入探讨使用Jsoup库进行API请求的优势,并提供代码示例…...
React源码02 - 基础知识 React API 一览
1. JSX到JavaScript的转换 <div id"div" key"key"><span>1</span><span>2</span> </div>React.createElement("div", // 大写开头会当做原生dom标签的字符串,而组件使用大写开头时,这…...
COMSOL with Matlab
文章目录 基本介绍COMSOL with MatlabCOMSOL主Matlab辅Matlab为主Comsol为辅 操作步骤常用指令mphopenmphgeommghmeshmphmeshstatsmphnavigatormphplot常用指令mphsavemphlaunchModelUtil.clear 实例教学自动另存新档**把语法套用到边界条件**把语法套用到另存新档 函数及其微分…...
【报表查询】.NET开源ORM框架 SqlSugar 系列
文章目录 前言实践一、按月统计没有为0实践二、 统计某月每天的数量实践三、对象和表随意JOIN实践四、 List<int>和表随意JOIN实践五、大数据处理实践六、每10分钟统计Count实践七、 每个ID都要对应时间总结 前言 在我们实际开发场景中,报表是最常见的功能&a…...
PostgreSQL数据库访问限制详解
pg_hba.conf 文件是 PostgreSQL 数据库系统中非常重要的一个配置文件,它用于定义哪些用户(或客户端)可以连接到 PostgreSQL 数据库服务器,以及他们可以使用哪些认证方法进行连接。 pg_hba.conf 的名称来源于 "Host-Based Aut…...
【test linux】创建一个ext4类型的文件系统
创建一个ext4类型的文件系统 dd 是一个非常强大的命令行工具,用于在Unix/Linux系统中进行低级别的数据复制和转换。这条命令的具体参数含义如下: if/dev/zero:指定输入文件(input file)为 /dev/zero,这是一…...
如何在繁忙的生活中找到自己的节奏?
目录 一、理解生活节奏的重要性 二、分析当前生活节奏 1. 时间分配 2. 心理状态 3. 身体状况 4. 生活习惯 1. 快慢适中 2. 张弛结合 3. 与目标相符 三、掌握调整生活节奏的策略 1. 设定优先级 2. 合理规划时间 3. 学会拒绝与取舍 4. 保持健康的生活方式 5. 留出…...
AI-PR曲线
PR曲线 人工智能里面的一个小概念。 2.3 性能度量(查全率,查准率,F1,PR曲线与ROC曲线) 预测出来的是一个概率,不能根据概率来说它是正类还是负类,要有一个阈值。 查准率(Precision&…...
Guava 提供了集合操作 `List`、`Set` 和 `Map` 三个工具类
入门示例 guava 最佳实践 学习指南 以下是使用Google Guava库中的工具方法来创建和操作List、Set、Map集合的一些示例: List相关操作 创建List 使用Lists.newArrayList()创建一个新的可变ArrayList实例。List<Integer> list Lists.newArrayList(1, 2, 3);/…...
深入解析 Elasticsearch 集群配置文件参数
在自建 Elasticsearch 集群时,我们需要通过 elasticsearch.yml 文件对节点角色、网络设置、集群发现和数据存储路径等进行灵活配置。配置项的合理设置对集群的稳定性、性能与扩展性影响深远。本文将以一个示例配置文件为蓝本,逐条解析各参数的含义与建议…...
WebMvcConfigurer和WebMvcConfigurationSupport(MVC配置)
一:基本介绍 WebMvcConfigurer是接口,用于配置全局的SpringMVC的相关属性,采用JAVABean的方式来代替传统的XML配置文件,提供了跨域设置、静态资源处理器、类型转化器、自定义拦截器、页面跳转等能力。 WebMvcConfigurationSupport是webmvc的…...
用 javascript 来回答宇宙外面是什么
宇宙外面是什么呢? 估计这个问题要困扰很多人, 让我们用一段 javascript 代码来回答一下. 一, 从一段代码说起 var 地球 {名字 : "地球",女友 : "月亮",外面 : {名字 : "太阳系",老大 : "太阳",老二 : {名字 : "木星",二…...
我的性能优化经验
专业方向:App cpu/memory/gpu/流畅度/响应时间的优化,Anr,Framework CarPowerManagementService模块的(STR),从0~1完成性能监控体系搭建,完成3大版本迭代高质量性能交付 响应时间: …...
XSLT 编辑 XML
XSLT 编辑 XML 介绍 XSLT(可扩展样式表语言转换)是一种用于转换XML文档的语言。它允许开发人员将XML数据转换为其他格式,如HTML、PDF或纯文本。XSLT通过使用XPath查询来定位XML文档中的元素,并对这些元素应用转换规则。在本教程…...
数智读书笔记系列010 生命3.0:人工智能时代 人类的进化与重生
书名:生命3.0 生命3.0:人工智能时代,人类的进化与重生 著者:[美]迈克斯•泰格马克 迈克斯・泰格马克 教育背景与职业 教育背景:迈克斯・泰格马克毕业于麻省理工学院,获物理学博士学位。职业经…...
Transfomer的各层矩阵
一、输入 输入一句话:Hello CYZLAB the inspired world 每个单词为一个token 二、Embedding 这里的词向量维度为6,矩阵的行数为token数,列数是词向量的维度 这列是注释不算hello122694CYZLAB222372the222596inspired132440world431273 …...
代码随想录第51天
99.岛屿数量 深搜 import java.util.*;class Main{static int[][] directions {{0, 1}, {1, 0}, {0, -1}, {-1, 0}};static boolean[][] visited;public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();int m sc.nextInt();int…...
基础库httpx的使用
urllib 库和 requests 库的使用,已经可以爬取绝大多数网站的数据,但对于某些网站依然无能为力。什么情况?这些网站强制使用HTTP/2.0协议访问,这时 urllib 和requests 是无法爬取数据的,因为它们只支持 HTTP/1.1,不支持…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上,你可以使用apt包管理器来安装NFS服务器。打开终端并运行: sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享,例如/shared: sudo mkdir /shared sud…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增:通道注意力模块(SE模块) class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
ETLCloud可能遇到的问题有哪些?常见坑位解析
数据集成平台ETLCloud,主要用于支持数据的抽取(Extract)、转换(Transform)和加载(Load)过程。提供了一个简洁直观的界面,以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索(基于物理空间 广播范围)2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能
指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...
jdbc查询mysql数据库时,出现id顺序错误的情况
我在repository中的查询语句如下所示,即传入一个List<intager>的数据,返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致,会导致返回的id是从小到大排列的,但我不希望这样。 Query("SELECT NEW com…...
WEB3全栈开发——面试专业技能点P4数据库
一、mysql2 原生驱动及其连接机制 概念介绍 mysql2 是 Node.js 环境中广泛使用的 MySQL 客户端库,基于 mysql 库改进而来,具有更好的性能、Promise 支持、流式查询、二进制数据处理能力等。 主要特点: 支持 Promise / async-await…...
python基础语法Ⅰ
python基础语法Ⅰ 常量和表达式变量是什么变量的语法1.定义变量使用变量 变量的类型1.整数2.浮点数(小数)3.字符串4.布尔5.其他 动态类型特征注释注释是什么注释的语法1.行注释2.文档字符串 注释的规范 常量和表达式 我们可以把python当作一个计算器,来进行一些算术…...
