web前端作业--响应式蛋糕店网页设计（HTML+CSS+JavaScript）

那个角落有个bug

已于 2022-05-23 23:20:04 修改

阅读量3.3k

点赞数 25

分类专栏： web前端作业实战文章标签：前端 css html

于 2022-05-23 23:11:16 首次发布

本文链接：https://blog.csdn.net/weixin_42246659/article/details/124936201

版权

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的蛋糕店网页设计制作，非常适合初学者学习使用🏮。

网页实现截图：🍊🍊🍊文末获取源码

文章目录

🎉效果预览

网站首页：
在这里插入图片描述

生日蛋糕：

在这里插入图片描述
爱情蛋糕：

家人朋友：

详情页面：

🎉手机版效果

手机版效果：

在这里插入图片描述

主要源码结构：

在这里插入图片描述

🎉部分源码

主要源码展示：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创意蛋糕店</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/birth.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jquery-1.10.2.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function() {
     
            // 推荐: recommend, 网红: follower, 爆款、创意: hot, 原创: original, 经典: classic
            // 人气精选
            let popularList = [
                {
      img: './images/home/1.jpg', desc: '一生只爱你一人', tag: {
      title: '爆款', type: 'hot' }, title: '愿得一人心', price: '¥198' },
                {
      img: './images/home/2.png', desc: '九宫格水果超多超清爽', tag: {
      title: '爆款', type: 'hot' }, title: '我想要的幸福', price: '¥188' },
                {
      img: './images/home/3.png', desc: '水果多多美味不能停', tag: {
      title: '爆款', type: 'hot' }, title: '想念', price: ' ¥218' },
                {
      img: './images/home/4.png', desc: '专为生日而设计', tag: {
      title: '爆款', type: 'hot' }, title: '生日快乐', price: '¥198' },
                {
      img: './images/home/5.png', desc: '入店必备缔造', tag: {
      title: '爆款', type: 'hot' }, title: '为你盛开', price: '¥198' },
                {
      img: './images/home/6.png', desc: '温馨浪漫爆款推荐', tag: {
      title: '爆款', type: 'hot' }, title: '环绕的幸福', price: '¥218' },
                {
      img: './images/home/7.jpg', desc: '圆形巧克力夹心蛋糕', tag: {
      title: '爆款', type: 'hot' }, title: '爱意浓浓', price: '¥208' },
                {
      img: './images/home/8.jpg', desc: '往后余生，风雪是你', tag: {
      title: '爆款', type: 'hot' }, title: '余生', price: '¥218' }
            ]

            let str = ''
            for(let m = 0, len = popularList.length; m < len; m++) {
     
                let strItem = `<div class="s-data-item">
                    <img src="${
       popularList[m].img}">
                    <span class="hot_div text-ellipsis">${
       popularList[m].desc}</span>
                    <span class="new_flag ${
       popularList[m].tag.type}">${
       popularList[m].tag.title}</span>
                    <div class="protitle text-ellipsis">