原始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 = `
${popularList[m].img}">
${popularList[m].desc}
${popularList[m].tag.type}">${popularList[m].tag.title}
${popularList[m].title}
${popularList[m].price}
`
str+=strItem
}
$('.popular').html(str)
// 绑定点击事件
let targets = $('.popular .s-data-item')
targets.click(function () {
let pos = $(this).index()
let data = popularList[pos]
window.location.href = `detail.html?good=${window.btoa(encodeURIComponent(JSON.stringify(data)))}`
})
// 生日蛋糕
let birthList = [
{ img: './images/home/9.jpg', desc: '对你的爱，远不止这些', tag: { title: '推荐', type: 'hot' }, title: '相爱一生', price: '¥208' },
{ img: './images/home/10.jpg', desc: '和你分享我的快乐', tag: { title: '推荐', type: 'hot' }, title: '快乐无限', price: '¥198' },
{ img: './images/home/11.png', desc: '甜蜜特惠抢购中', tag: { title: '推荐', type: 'hot' }, title: '粉色甜心', price: ' ¥198' },
{ img: './images/home/12.png', desc: '你的幸福我的追求', tag: { title: '推荐', type: 'hot' }, title: '美好祝愿', price: '¥198' }
]
let str2 = ''
for(let m = 0, len = birthList.length; m < len; m++) {
let strItem = `
${birthList[m].img}">
${birthList[m].desc}
${birthList[m].tag.type}">${birthList[m].tag.title}
${birthList[m].title}
${birthList[m].price}
`
str2+=strItem
}
$('.birth').html(str2)
// 绑定点击事件
let targets2 = $('.birth .s-data-item')
targets2.click(function () {
let pos = $(this).index()
let data = birthList[pos]
window.location.href = `detail.html?good=${window.btoa(encodeURIComponent(JSON.stringify(data)))}`
})
// 爱情蛋糕
let loveList = [
{ img: './images/home/13.png', desc: '爱的日子如花般绽放', tag: { title: '爆款', type: 'hot' }, title: '玫瑰色恋人', price: '¥198' },
{ img: './images/home/14.png', desc: '女神皇冠', tag: { title: '爆款', type: 'hot' }, title: '致爱', price: '¥228' },
{ img: './images/home/15.png', desc: '甜蜜在味蕾绽放', tag: { title: '爆款', type: 'hot' }, title: '布达佩斯之恋', price: ' ¥188' },
{ img: './images/home/16.png', desc: '这是我爱你的滋味', tag: { title: '爆款', type: 'hot' }, title: '爱的滋味', price: '¥198' }
]
let str3 = ''
for(let m = 0, len = loveList.length; m < len; m++) {
let strItem = `
${loveList[m].img}">
${loveList[m].desc}
${loveList[m].tag.type}">${loveList[m].tag.title}
${loveList[m].title}
${loveList[m].price}
`
str3 += strItem
}
$('.love').html(str3)
// 绑定点击事件
let targets3 = $('.love .s-data-item')
targets3.click(function () {
let pos = $(this).index()
let data = loveList[pos]
window.location.href = `detail.html?good=${window.btoa(encodeURIComponent(JSON.stringify(data)))}`
})
// 儿童蛋糕
let boyList = [
{ img: './images/home/17.jpg', desc: '可爱的黄色卡通小跑车', tag: { title: '原创', type: 'original' }, title: '梦幻小跑', price: '¥228' },
{ img: './images/home/18.jpg', desc: '到嘴边的美味', tag: { title: '推荐', type: 'hot' }, title: '熊猫贝贝', price: '¥198' },
{ img: './images/home/19.png', desc: '小王子儿童网红蛋糕', tag: { title: '推荐', type: 'hot' }, title: '幸福小王子', price: ' ¥298' },
{ img: './images/home/20.png', desc: '你是我的甜心宝贝', tag: { title: '推荐', type: 'hot' }, title: '甜心芭比', price: '¥198' }
]
let str4 = ''
for(let m = 0, len = boyList.length; m < len; m++) {
let strItem = `
${boyList[m].img}">
${boyList[m].desc}
${boyList[m].tag.type}">${boyList[m].tag.title}
${boyList[m].title}
${boyList[m].price}
`
str4 += strItem
}
$('.boy').html(str4)
// 绑定点击事件
let targets4 = $('.boy .s-data-item')
targets4.click(function () {
let pos = $(this).index()
let data = boyList[pos]
window.location.href = `detail.html?good=${window.btoa(encodeURIComponent(JSON.stringify(data)))}`
})
})
script>
head>
<body>
<div class="container">
<nav class="navbar navbar-expand-md bg-smare navbar-dark mt-0">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon">span>
button>
<a href="#" class="navbar-brand">
<img src="http://www.kaotop.com/file/tupian/20220526/20330909105536sys.png" alt="" width="30"
class="align-top logo"> 创意蛋糕店
a>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a href="index.html" class="nav-link">首页a>li>
<li class="nav-item"><a href="birthCake.html" class="nav-link">生日蛋糕a>li>
<li class="nav-item"><a href="loveCake.html" class="nav-link">爱情蛋糕a>li>
<li class="nav-item"><a href="family.html" class="nav-link">家人朋友a>li>
ul>
div>
nav>
<div class="data-content">
<div class="swipper-content">
<div class="sm-carousels">
<div class="sm-carousels-item" style="background:url(./images/carousels/1.jpg) center no-repeat;background-size:cover;">div>
<div class="sm-carousels-item" style="background:url(./images/carousels/2.jpg) center no-repeat;background-size:cover;">div>
div>
<div class="pagination-bullets">
<span class="bullet-item active">span>
<span class="bullet-item">span>
div>
div>
<div class="module-desc">人气精选div>
<div class="s-data-list popular">div>
<div class="line">div>
<div class="module-desc">生日蛋糕div>
<div class="s-data-list birth">div>
<div class="s-more-data">>><a href="birthCake.html">更多生日蛋糕a><<div>
<div class="line">div>
<div class="module-desc">爱情蛋糕div>
<div class="s-data-list love">div>
<div class="s-more-data">>><a href="loveCake.html">更多爱情蛋糕a><<div>
<div class="line">div>
<div class="module-desc">儿童蛋糕div>
<div class="s-data-list boy">div>
<div class="line">div>
div>
<script>
$(document).ready(function() {
var currentPos = 0
var bulletTimer = null // 定时器
const bullets = $('.pagination-bullets span')
createTimer()
// 轮播动画
function animate (dom) {
$(dom).addClass("active").siblings("span").removeClass("active")
$(".sm-carousels").css({ "transform": `translateX(-${currentPos * 100}%)` , "transition-duration": "600ms" })
if (!bulletTimer) { // 不存在定时器
createTimer()
}
}
// 轮播图定时切换
function createTimer () {
bulletTimer = setInterval(() => {
currentPos++
if (currentPos >= bullets.length) {
currentPos = 0
}
animate(bullets[currentPos])
}, 3000)
}
// 点击切换
bullets.click(function() {
clearInterval(bulletTimer) // 取消定时切换
bulletTimer = null
currentPos = $(this).index()
animate(this)
})
})
script>
div>
body>
html>
birth.css
.data-content {
width: 100%;
}
.s-data-list {
display: flex;
align-items: inherit;
justify-content: space-between;
flex-wrap: wrap;
}
.s-data-item {
position: relative;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
width: 24%;
margin-bottom: 10px;
}
.s-data-item img {
width: 100%;
}
.s-data-item .hot_div {
color: #9F8A60;
background: #F1ECE2;
padding: 0.6rem .5rem;
width: 100%;
box-sizing: border-box;
font-size: 0.8rem;
}
.s-data-item .new_flag {
position: absolute;
right: 0;
top: 0;
color: #fff;
text-align: center;
z-index: 1;
background: #2cb436 none repeat scroll 0 0;
height: 2.3rem;
font-size: .8rem;
line-height: .95rem;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
padding: .2rem 0 0 0;
width: 1.5rem;
}
/* 推荐tag */
.s-data-item .new_flag.recommend {
background: #F0282D;
}
/* 网红tag */
.s-data-item .new_flag.follower {
background: #CC00FF;
}
/* 爆款、创意tag */
.s-data-item .new_flag.hot {
background: #F0282D;
}
/* 原创tag */
.s-data-item .new_flag.original {
background: #FF6100;
}
/* 经典tag */
.s-data-item .new_flag.classic {
background: #cdb694;
}
.s-data-item .protitle {
width: 100%;
padding: 0.3rem .4rem 0;
line-height: 1.5rem;
text-align: left;
font-size: 0.9rem;
color: #333;
}
.s-data-item .proprice {
width: 100%;
line-height: 1rem;
font-size: 1rem;
text-align: left;
color: #b4282d;
padding: .1rem .4rem;
}
.module-desc {
margin: 10px;
text-align: center;
line-height: 1.6rem;
font-size: 1.1rem;
color: #333;
font-weight: 600;
background-color: #fff;
}
.module-desc:before, .module-desc:after {
content: " ";
padding: 10px;
background: url(../images/new_title_ico.gif) no-repeat center center;
background-size: 14px;
margin: 10px;
}
.data-bottom {
padding: 0.3rem 0 1rem 0;
text-align: center;
line-height: 1rem;
font-size: 0.6rem;
color: #333;
}
.line {
height: 0.6rem;
background: #f4f4f4;
width: 100%;
}
.s-more-data {
border-top: 1px #f1f1f1 solid;
width: 100%;
font-size: 1rem;
text-align: center;
line-height: 3rem;
}
.s-more-data a {
cursor: pointer;
color: #333;
text-decoration: none;
}
/* 大屏 */
@media (min-width: 1200px) {
.data-content {
max-width: 1140px;
margin: 40px auto 0;
}
}
/* 默认 */
@media (min-width: 992px) and (max-width: 1199px) {
.data-content {
max-width: 960px;
margin: 33px auto 0;
}
}
/* 平板 */
@media (min-width: 768px) and (max-width: 991px) {
.data-content {
max-width: 720px;
margin: 25px auto 0;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.data-content {
max-width: 540px;
margin: 25px auto 0;
}
}
@media (max-width: 767px) {
.s-data-list {
padding: 10px;
}
.s-data-item {
width: 30%;
}
/* 首页人气精选 */
.popular .s-data-item, .birth .s-data-item, .love .s-data-item, .boy .s-data-item {
width: 48%;
}
}
⭐️ ⭐️ 私信或者评论区留下邮箱免费获取, 大家点赞、收藏、关注、评论啦 ⭐️ ⭐️
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）