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

HTML综合案例

news 2026/2/11 0:18:46

        为了前端考试。

        效果图：

        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综合案例

为了前端考试。 效果图&#xff1a; HTML代码&#xff1a; <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…...

编程日记 2024/12/20 16:18:51

TanStack——为现代前端开发提供高性能和灵活的工具

TanStack 是一个由社区主导的开源项目集合&#xff0c;专注于为现代前端开发提供高性能和灵活的工具。它包括多个流行的 JavaScript 和 TypeScript 库&#xff0c;主要用于处理表格、查询、虚拟化、状态管理等功能。 文章目录 1、TanStack Query&#xff1a;1.1 useQuery&#…...

编程日记 2024/12/20 16:17:46

Java爬虫️ 使用Jsoup库进行API请求有什么优势？

在Java的世界里&#xff0c;Jsoup库以其强大的HTML解析能力而闻名。它不仅仅是一个简单的解析器&#xff0c;更是一个功能齐全的工具箱&#xff0c;为开发者提供了从网页抓取到数据处理的一站式解决方案。本文将深入探讨使用Jsoup库进行API请求的优势&#xff0c;并提供代码示例…...

编程日记 2024/12/20 16:16:45

React源码02 - 基础知识 React API 一览

1. JSX到JavaScript的转换 <div id"div" key"key"><span>1</span><span>2</span> </div>React.createElement("div", // 大写开头会当做原生dom标签的字符串&#xff0c;而组件使用大写开头时&#xff0c;这…...

编程日记 2024/12/20 16:12:40

COMSOL with Matlab

文章目录 基本介绍COMSOL with MatlabCOMSOL主Matlab辅Matlab为主Comsol为辅 操作步骤常用指令mphopenmphgeommghmeshmphmeshstatsmphnavigatormphplot常用指令mphsavemphlaunchModelUtil.clear 实例教学自动另存新档**把语法套用到边界条件**把语法套用到另存新档 函数及其微分…...

编程日记 2024/12/20 16:10:36

【报表查询】.NET开源ORM框架 SqlSugar 系列

文章目录 前言实践一、按月统计没有为0实践二、 统计某月每天的数量实践三、对象和表随意JOIN实践四、 List<int>和表随意JOIN实践五、大数据处理实践六、每10分钟统计Count实践七、 每个ID都要对应时间总结 前言 在我们实际开发场景中&#xff0c;报表是最常见的功能&a…...

编程日记 2024/12/20 16:09:35

PostgreSQL数据库访问限制详解

pg_hba.conf 文件是 PostgreSQL 数据库系统中非常重要的一个配置文件&#xff0c;它用于定义哪些用户&#xff08;或客户端&#xff09;可以连接到 PostgreSQL 数据库服务器&#xff0c;以及他们可以使用哪些认证方法进行连接。 pg_hba.conf 的名称来源于 "Host-Based Aut…...

编程日记 2024/12/20 16:01:22

【test linux】创建一个ext4类型的文件系统

创建一个ext4类型的文件系统 dd 是一个非常强大的命令行工具&#xff0c;用于在Unix/Linux系统中进行低级别的数据复制和转换。这条命令的具体参数含义如下&#xff1a; if/dev/zero&#xff1a;指定输入文件&#xff08;input file&#xff09;为 /dev/zero&#xff0c;这是一…...

编程日记 2024/12/20 15:59:20

如何在繁忙的生活中找到自己的节奏？

目录 一、理解生活节奏的重要性 二、分析当前生活节奏 1. 时间分配 2. 心理状态 3. 身体状况 4. 生活习惯 1. 快慢适中 2. 张弛结合 3. 与目标相符 三、掌握调整生活节奏的策略 1. 设定优先级 2. 合理规划时间 3. 学会拒绝与取舍 4. 保持健康的生活方式 5. 留出…...

编程日记 2024/12/20 15:48:07

AI-PR曲线

PR曲线 人工智能里面的一个小概念。 2.3 性能度量&#xff08;查全率&#xff0c;查准率&#xff0c;F1&#xff0c;PR曲线与ROC曲线&#xff09; 预测出来的是一个概率&#xff0c;不能根据概率来说它是正类还是负类&#xff0c;要有一个阈值。 查准率&#xff08;Precision&…...

编程日记 2024/12/20 15:46:05

Guava 提供了集合操作 `List`、`Set` 和 `Map` 三个工具类

入门示例 guava 最佳实践 学习指南 以下是使用Google Guava库中的工具方法来创建和操作List、Set、Map集合的一些示例&#xff1a; List相关操作 创建List 使用Lists.newArrayList()创建一个新的可变ArrayList实例。List<Integer> list Lists.newArrayList(1, 2, 3);/…...

编程日记 2024/12/20 15:45:04

深入解析 Elasticsearch 集群配置文件参数

在自建 Elasticsearch 集群时&#xff0c;我们需要通过 elasticsearch.yml 文件对节点角色、网络设置、集群发现和数据存储路径等进行灵活配置。配置项的合理设置对集群的稳定性、性能与扩展性影响深远。本文将以一个示例配置文件为蓝本&#xff0c;逐条解析各参数的含义与建议…...

编程日记 2024/12/20 15:43:01

WebMvcConfigurer和WebMvcConfigurationSupport（MVC配置）

一:基本介绍 WebMvcConfigurer是接口&#xff0c;用于配置全局的SpringMVC的相关属性&#xff0c;采用JAVABean的方式来代替传统的XML配置文件&#xff0c;提供了跨域设置、静态资源处理器、类型转化器、自定义拦截器、页面跳转等能力。 WebMvcConfigurationSupport是webmvc的…...

编程日记 2024/12/20 15:36:54

用 javascript 来回答宇宙外面是什么

宇宙外面是什么呢? 估计这个问题要困扰很多人, 让我们用一段 javascript 代码来回答一下. 一, 从一段代码说起 var 地球 {名字 : "地球",女友 : "月亮",外面 : {名字 : "太阳系",老大 : "太阳",老二 : {名字 : "木星",二…...

编程日记 2024/12/20 15:34:49

我的性能优化经验

专业方向&#xff1a;App cpu/memory/gpu/流畅度/响应时间的优化&#xff0c;Anr&#xff0c;Framework CarPowerManagementService模块的&#xff08;STR&#xff09;&#xff0c;从0~1完成性能监控体系搭建&#xff0c;完成3大版本迭代高质量性能交付 响应时间&#xff1a; …...

编程日记 2024/12/20 15:29:40

XSLT 编辑 XML

XSLT 编辑 XML 介绍 XSLT&#xff08;可扩展样式表语言转换&#xff09;是一种用于转换XML文档的语言。它允许开发人员将XML数据转换为其他格式&#xff0c;如HTML、PDF或纯文本。XSLT通过使用XPath查询来定位XML文档中的元素&#xff0c;并对这些元素应用转换规则。在本教程…...

编程日记 2024/12/20 15:27:37

数智读书笔记系列010 生命3.0：人工智能时代 人类的进化与重生

书名&#xff1a;生命3.0 生命3.0&#xff1a;人工智能时代,人类的进化与重生 著者&#xff1a;&#xff3b;美&#xff3d;迈克斯•泰格马克 迈克斯・泰格马克 教育背景与职业 教育背景&#xff1a;迈克斯・泰格马克毕业于麻省理工学院&#xff0c;获物理学博士学位。职业经…...

编程日记 2024/12/20 15:24:33

Transfomer的各层矩阵

一、输入 输入一句话&#xff1a;Hello CYZLAB the inspired world 每个单词为一个token 二、Embedding 这里的词向量维度为6&#xff0c;矩阵的行数为token数&#xff0c;列数是词向量的维度 这列是注释不算hello122694CYZLAB222372the222596inspired132440world431273 …...

编程日记 2024/12/20 15:23:33

代码随想录第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…...

编程日记 2024/12/20 15:22:31

基础库httpx的使用

urllib 库和 requests 库的使用&#xff0c;已经可以爬取绝大多数网站的数据&#xff0c;但对于某些网站依然无能为力。什么情况?这些网站强制使用HTTP/2.0协议访问&#xff0c;这时 urllib 和requests 是无法爬取数据的&#xff0c;因为它们只支持 HTTP/1.1&#xff0c;不支持…...

编程日记 2024/12/20 15:19:28

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2026/2/8 1:22:58

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2026/2/8 6:37:38

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/12/9 0:22:01

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2026/1/25 13:18:12

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

编程新知 2025/12/6 22:50:48

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2026/2/9 1:38:05

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2026/1/9 19:36:58

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2026/1/31 2:37:22

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2026/1/29 17:56:19

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2026/2/8 22:00:17