❤️创意网页：如何用HTML制作菜单栏？制作好看的菜单栏样式网页

导语

在今天的技术博客中，我想向大家介绍一个温馨舒适菜单网站的设计。这个网站不仅具有吸引人的外观，而且提供了良好的用户体验。让我们一起深入了解这个温馨舒适的菜单网站是如何设计的。

动态图展示

静态图展示

HTML 结构

首先，我们来看一下这个网站的 HTML 结构。整个页面使用了 HTML5 的文档类型声明，并指定了英语作为页面的语言。

代码语言：javascript

复制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Warm and Cozy Menu Website</title>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

在 <body> 元素中，我们可以看到页面被分为了几个部分：<header>、<div class="menu-container"> 和 <script>。其中，<header> 是页面的顶部区域，显示了网站的标题。<div class="menu-container"> 包含了菜单卡片的容器，用于展示不同的菜单选项。最后，<script> 标签用于引入 JavaScript 文件。

CSS 样式

接下来，让我们来看一下这个网站使用的 CSS 样式。样式文件被放置在一个名为 styles.css 的外部样式表中。

代码语言：javascript

复制

/* CSS 样式文件 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {

font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

background-color: #f8ece5;

}
/* 更多的 CSS 样式规则... */

在这个样式文件中，我们使用了一些基本的 CSS 规则来对页面进行布局和样式设置。例如，body 元素的背景颜色被设置为淡粉色，以营造出温暖和舒适的感觉。其他的样式规则包括对标题、菜单卡片以及链接按钮的样式设置。

菜单卡片

这个网站的主要特点是其菜单卡片的设计。每个菜单卡片都有一个图片、标题、描述和一个“Learn More”链接按钮。让我们来看一下一个菜单卡片的 HTML 结构和 CSS 样式。

代码语言：javascript

复制

<div class="menu-card">

<img src="image1.jpg" alt="Menu Image 1">

<div class="menu-content">

<h2>Home</h2>

<p>Welcome to our cozy home on the web.</p>

<a href="#">Learn More</a>

</div>

</div>

代码语言：javascript

复制

.menu-card {

width: 300px;

background-color: #fff;

border-radius: 10px;

box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

overflow: hidden;

transition: transform 0.3s;

}
/* 更多的 CSS 样式规则... */

菜单卡片使用一个带有特定样式的 <div> 元素来包裹内容。通过设置宽度、背景颜色、边框半径、阴影效果和动画过渡等样式规则，每个菜单卡片都具有独特的外观和交互效果。

响应式设计

最后，让我们来讨论一下这个网站的响应式设计。通过使用 CSS 媒体查询和弹性布局，这个网站能够在不同的设备上提供一致的用户体验。

代码语言：javascript

复制

.menu-container {

display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 20px;

padding: 20px;

}
/* 更多的 CSS 样式规则... */

<div class="menu-container"> 元素使用了弹性布局来实现菜单卡片的自适应排列。通过使用 display: flex 和 flex-wrap: wrap，菜单卡片会根据可用空间自动换行，并保持居中对齐。这样，不论用户使用的是大屏幕显示器还是小型移动设备，菜单卡片都能够适应不同的屏幕尺寸。

项目完整代码

代码语言：javascript

复制

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="styles.css">

<title>Warm and Cozy Menu Website</title>

</head>

<body>

<header>

<h1>❤️命运之光❤️温馨菜单主题页面🌌</h1>

</header>
<div class="menu-container">

<div class="menu-card">

<img src="image1.jpg" alt="Menu Image 1">

<div class="menu-content">

<h2>酱油拉面🍜</h2>

<p>Soy Sauce Ramen: A flavorful and comforting noodle dish that delights the senses with its rich broth and perfect texture.</p>

<a href="#">Learn More</a>

</div>

</div>
&lt;!-- Add more menu cards here --&gt;

&lt;div class=&#34;menu-card&#34;&gt;
  &lt;img src=&#34;image2.jpg&#34; alt=&#34;Menu Image 2&#34;&gt;
  &lt;div class=&#34;menu-content&#34;&gt;
    &lt;h2&gt;咸蛋米饭🍚&lt;/h2&gt;
    &lt;p&gt;Salted Egg Fried Rice: A delectable combination of fragrant rice and salted eggs, creating a savory and indulgent dish that satisfies with every bite.&lt;/p&gt;
    &lt;a href=&#34;#&#34;&gt;Learn More&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;menu-card&#34;&gt;
  &lt;img src=&#34;image3.jpg&#34; alt=&#34;Menu Image 3&#34;&gt;
  &lt;div class=&#34;menu-content&#34;&gt;
    &lt;h2&gt;企鹅汉堡🍔&lt;/h2&gt;
    &lt;p&gt;Penguin Burger: A whimsical and delightful creation featuring a juicy patty, nestled between fluffy buns, adorned with playful penguin-themed toppings, guaranteeing a unique and fun dining experience.&lt;/p&gt;
    &lt;a href=&#34;#&#34;&gt;Learn More&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;menu-card&#34;&gt;
  &lt;img src=&#34;image4.jpg&#34; alt=&#34;Menu Image 4&#34;&gt;
  &lt;div class=&#34;menu-content&#34;&gt;
    &lt;h2&gt;烤肉西红柿🍅&lt;/h2&gt;
    &lt;p&gt;Grilled Meaty Tomatoes: Succulent tomatoes grilled to perfection, bringing out their natural sweetness and enhancing their juiciness, resulting in a flavorful and tantalizing dish that combines the best of smoky grilled meats and fresh, ripe tomatoes.&lt;/p&gt;
    &lt;a href=&#34;#&#34;&gt;Learn More&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;

</div>
</div>
<script src="script.js"></script>

</body>

</html>
<style>

{

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

background-color: #f8ece5;

}
header {

background-color: #e27d60;

color: #fff;

text-align: center;

padding: 20px;

}
.menu-container {

display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 20px;

padding: 20px;

}
.menu-card {

width: 300px;

background-color: #fff;

border-radius: 10px;

box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

overflow: hidden;

transition: transform 0.3s;

}
.menu-card:hover {

transform: translateY(-5px);

}
.menu-card img {

width: 100%;

height: 200px;

object-fit: cover;

border-radius: 10px 10px 0 0;

}
.menu-content {

padding: 20px;

}
.menu-content h2 {

font-size: 24px;

margin-bottom: 10px;

color: #e27d60;

}
.menu-content p {

font-size: 14px;

color: #7f7f7f;

margin-bottom: 20px;

}
.menu-content a {

display: inline-block;

padding: 8px 16px;

background-color: #e27d60;

color: #fff;

text-decoration: none;

border-radius: 4px;

transition: background-color 0.3s;

}
.menu-content a:hover {

background-color: #bf6043;

}
</style>