html加css样式实现js美食项目首页示例代码

让我来详细讲解一下如何利用HTML和CSS实现一个美食项目的首页。

环境准备

在开始之前，你需要做好以下准备：

一台电脑和代码编辑器
熟悉HTML和CSS的基本语法
熟悉基本的JavaScript语法

目标设计

我们这个美食项目的首页，需要实现以下功能：

导航栏
轮播图
宣传广告图
美食推荐列表

HTML部分

首先，我们需要在HTML中添加必要的元素，包括导航栏、轮播图、宣传广告图、美食推荐列表。具体代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>美食项目首页</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">分类</a></li>
          <li><a href="#">排行榜</a></li>
          <li><a href="#">关于我们</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section class="carousel">
        <img src="https://cdn.pixabay.com/photo/2017/12/14/07/02/milk-and-cookies-3017429_960_720.jpg" alt="轮播图1" />
        <img src="https://cdn.pixabay.com/photo/2017/04/05/20/16/breakfast-2203731_960_720.jpg" alt="轮播图2" />
        <img src="https://cdn.pixabay.com/photo/2015/10/31/12/08/coffee-1017472_960_720.jpg" alt="轮播图3" />
      </section>
      <section class="promo">
        <img src="https://cdn.pixabay.com/photo/2017/10/29/17/18/desserts-2903127_960_720.jpg" alt="宣传图" />
        <p>健康食品<br />健康生活</p>
      </section>
      <section class="recommendations">
        <h2>今日特选</h2>
        <ul>
          <li>
            <img src="https://cdn.pixabay.com/photo/2015/03/30/12/22/cheese-698613_960_720.jpg" alt="美食1" />
            <p>芝士汉堡</p>
          </li>
          <li>
            <img src="https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg" alt="美食2" />
            <p>经典汉堡</p>
          </li>
          <li>
            <img src="https://cdn.pixabay.com/photo/2018/06/01/13/22/mushrooms-3443733_960_720.jpg" alt="美食3" />
            <p>野菌披萨</p>
          </li>
        </ul>
      </section>
    </main>
  </body>
</html>

CSS部分

一旦我们有了HTML结构，我们可以在CSS文件中添加样式以确保选定元素成为想要的样式。以下是样式的代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

nav ul {
  display: flex;
  list-style: none;
}

nav li a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
}

.carousel {
  display: flex;
  overflow: auto;
}

.carousel img {
  width: 100%;
  height: auto;
}

.promo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #fff;
  padding: 50px;
}

.promo img {
  width: 300px;
  height: auto;
}

.recommendations {
  background-color: #f1f1f1;
  padding: 50px;
}

.recommendations h2 {
  text-align: center;
}

.recommendations ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin-top: 50px;
}

.recommendations li {
  width: 30%;
}

.recommendations li img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.recommendations li p {
  text-align: center;
  font-size: 20px;
  margin-bottom: 10px;
}

JavaScript部分

最后，我们需要添加JavaScript代码来控制轮播图效果。为此，我们需要将轮播图中的所有图像放入一个数组中，并使用计时器自动轮播。代码如下：

const carousel = document.querySelector(".carousel");
const images = carousel.querySelectorAll("img");

let currentIndex = 0;
let timer;

function showImage(index) {
  images.forEach(img => img.classList.remove("show"));
  images[index].classList.add("show");
}

function nextImage() {
  currentIndex++;
  if (currentIndex >= images.length) {
    currentIndex = 0;
  }
  showImage(currentIndex);
}

function startCarousel() {
  timer = setInterval(nextImage, 2000);
}

function stopCarousel() {
  clearInterval(timer);
}

showImage(currentIndex);
startCarousel();

carousel.addEventListener("mouseenter", stopCarousel);
carousel.addEventListener("mouseleave", startCarousel);

示例说明

示例1：在CSS中添加以下样式以使导航栏变成一个固定的菜单栏：

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

示例2：添加以下JavaScript代码来改变鼠标悬停在推荐美食上时的样式：

const recommendations = document.querySelector(".recommendations");
const foodItems = recommendations.querySelectorAll("li");

function highlightFoodItem(index) {
  foodItems.forEach(item => item.classList.remove("highlight"));
  foodItems[index].classList.add("highlight");
}

for (let i = 0; i < foodItems.length; i++) {
  foodItems[i].addEventListener("mouseenter", () => highlightFoodItem(i));
}

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：html加css样式实现js美食项目首页示例代码 - Python技术站