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

html css网页制作成品——糖果屋网页设计（4页）附源码

article 2026/3/12 18:25:25

  目录

一、👨‍🎓网站题目

二、✍️网站描述

三、📚网站介绍

 四、🌐网站效果

 五、🪓 代码实现

          🧱HTML

六、🥇 如何让学习不再盲目

七、🎁更多干货

一、👨‍🎓网站题目


旅游，当地特色，历史文化，特色小吃等网站的设计与制作。

二、✍️网站描述


👨‍🎓静态网站的编写主要是用HTML DIV+CSS 等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；

 四、🌐网站效果

 

 五、🪓 代码实现

🧱HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>糖果屋首页</title><link rel="stylesheet" href="css/styles.css"><style>.image-container {display: flex;flex-direction: column;align-items: center;position: relative;background-image: url(img/dbt_07.png);background-color: #fce2eb;}</style>
</head>
<body><div class="page"><header><nav><ul><li><a href="index.html">首页</a></li><li><a href="products.html">糖果产品</a></li><li><a href="about.html">关于我们</a></li><li><a href="contact.html">联系我们</a></li></ul></nav></header><div class="image-container"><img src="img/dbt_011.png" alt="Image 1"><img src="img/dbt_02.png" alt="Image 2"><img src="img/dbt_03.png" alt="Image 3"><img src="img/dbt_04.png" alt="Image 4"><img src="img/dbt_05.png" alt="Image 5"><img src="img/dbt_06.png" alt="Image 6"></div><main><section class="p-list"><div class="p-item"><img src="img/水果夹心糖.jpg" alt="水果夹心糖"><h3>水果夹心糖</h3><p>价格：￥15.00</p></div><div class="p-item"><img src="img/牛奶巧克力.jpg" alt="牛奶巧克力" style="height: 270px;"><h3>牛奶巧克力</h3><p>价格：￥10.00</p></div><div class="p-item"><img src="img/酸味软糖.jpg" alt="酸味软糖"><h3>酸味软糖</h3><p>价格：￥15.00</p></div></section><section class="about-us"><p>欢迎来到糖果屋！我们是一家专注于高品质糖果制作与销售的网店。自成立以来，我们一直致力于为顾客提供最新鲜、最美味的糖果产品。</p><p>我们的团队由一群热爱糖果、富有创意和激情的年轻人组成。我们不断探索新的糖果口味和制作工艺，以满足不同顾客的口味需求。同时，我们也非常注重糖果的包装设计，力求让每一件产品都能成为顾客心中的小确幸。</p><p>糖果屋承诺，所有产品均采用优质原料制作，不含任何人工添加剂。我们严格把控生产过程中的每一个环节，确保每一件产品都能达到最高的品质标准。我们的目标是将糖果屋打造成顾客信赖的品牌，让每一个喜欢糖果的人都能在这里找到属于自己的甜蜜。</p><p>感谢您一直以来对糖果屋的支持与厚爱！我们将继续努力，为您带来更多美味的糖果产品。</p></section></main><footer><p>版权所有 &copy; 糖果屋 </p></footer></div>
</body>
</html>


六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥源代码：

4.有任何意见或者不懂得地方可以在评论区留言，也可以私信，我会认真看也会回复的哦

 

 

 

 

 

 

相关文章：

html css网页制作成品——糖果屋网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程日记 2026/3/4 12:50:16

Ubuntu上部署Flask+MySQL项目

一、服务器安装python环境 1、安装gcc&#xff08;Ubuntu默认已安装&#xff09; 2、安装python源码 wget https://www.python.org/ftp/python/3.13.2/Python-3.13.2.tar.xz 3、安装Python依赖库 4、配置python豆瓣源 二、服务器安装虚拟环境 1、安装virtualenv pip3.10 ins…...

编程日记 2026/2/15 0:37:27

落雪音乐Pro 8.8.6 | 内置8条音源，无需手动导入，纯净无广告

洛雪音乐Pro版内置多组稳定音源接口&#xff0c;省去手动导入的繁琐操作&#xff0c;安装即可畅听海量音乐。延续原版无广告的纯净体验&#xff0c;支持歌单推荐与音源切换&#xff0c;满足个性化听歌需求。此版本仅支持在线播放&#xff0c;无法下载音乐&#xff0c;且与原版不…...

编程日记 2026/2/14 21:57:17

什么是全栈？

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点下班 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 &#x1f4c3;文章前言 &#x1f537;文章均为学习工…...

编程日记 2026/3/4 17:42:10

一些docker命令

一、基础命令 查看 Docker 版本 docker --version 或 docker version&#xff1a;显示 Docker 客户端和服务器的版本信息。 查看 Docker 系统信息 docker info&#xff1a;显示 Docker 系统的详细信息&#xff0c;包括镜像、容器数量、存储驱动类型等。 Docker 服务管理 s…...

编程日记 2026/2/16 5:20:32

《DeepSeek 开源 DeepGEMM：开启AI计算新时代的密钥》：此文为AI自动生成

《DeepSeek 开源 DeepGEMM&#xff1a;开启AI计算新时代的密钥》&#xff1a;此文为AI自动生成 引言&#xff1a;AI 计算的新曙光 在当今科技飞速发展的时代&#xff0c;人工智能&#xff08;AI&#xff09;无疑是最为耀眼的领域之一。从语音助手到自动驾驶&#xff0c;从图像…...

编程日记 2026/2/14 12:46:37

OpenCV实现图像特征提取与匹配

‌一、特征检测与描述子提取‌ ‌选择特征检测器‌ 常用算法包括&#xff1a; ‌ORB‌&#xff1a;一种高效的替代SIFT和SURF的算法&#xff0c;主要用于移动机器人和增强现实等领域。适合实时应用&#xff0c;结合FAST关键点与BRIEF描述子‌。‌SIFT&#xff08;尺度不变特征变…...

编程日记 2025/7/14 9:15:16

将分支`XXX`合并到远程分支`master

将分支feat-task合并到远程分支master 首先&#xff0c;切换到本地的 master 分支 git checkout master确保你的本地 master 分支是最新的&#xff0c;拉取远程的更新 git pull origin master将 feat-task 分支的代码合并到 master 分支 git merge feat-task如果在合并过程…...

编程日记 2026/2/14 9:07:29

程序化广告行业（13/89）：DSP的深入解析与运营要点

程序化广告行业&#xff08;13/89&#xff09;&#xff1a;DSP的深入解析与运营要点 大家好&#xff01;一直以来&#xff0c;我都对程序化广告行业保持着浓厚的学习兴趣&#xff0c;在探索的过程中积累了不少心得。今天就想把这些知识分享出来&#xff0c;和大家一起学习进步…...

编程日记 2026/2/21 1:26:29

XML文件格式的简介及如何用Python3处理XML格式对象

诸神缄默不语-个人技术博文与视频目录 文章目录 1. XML格式简介2. 格式化XML文件的工具3. Python处理XML&#xff1a;xml库1. xml.etree.\(c\)ElementTree2. xml.dom.minidom 4. 本文撰写过程中参考的其他网络资料 1. XML格式简介 可扩展标记语言 (Extensible Markup Language…...

编程日记 2026/3/10 1:47:53

通过qemu仿真树莓派系统调试IoT固件和程序

通过qemu仿真树莓派系统调试IoT固件和程序 本文将介绍如何使用 QEMU 模拟器在 x86 架构的主机上运行 Raspberry Pi OS&#xff08;树莓派操作系统&#xff09;。我们将从下载镜像、提取内核和设备树文件&#xff0c;到启动模拟环境&#xff0c;并进行一些常见的操作&#xff0…...

编程日记 2026/2/15 10:51:45

Oracle底层原理解析

Oracle 解析 1、union \ union all \ Intersect \ Minus内部处理机制&#xff08;优化&#xff09; 当查询语句中的where子句中使用到or时&#xff0c;可以用union all来代替。因为使用or查询语句的时候&#xff0c;引起全表扫描&#xff0c;并走索引查询 特别&#xff1a;当…...

编程日记 2026/3/5 20:36:12

深度解读DeepSeek部署使用安全（48页PPT）（文末有下载方式）

深度解读DeepSeek&#xff1a;部署、使用与安全 详细资料请看本解读文章的最后内容。 引言 DeepSeek作为一款先进的人工智能模型&#xff0c;其部署、使用与安全性是用户最为关注的三大核心问题。本文将从本地化部署、使用方法与技巧、以及安全性三个方面&#xff0c;对Deep…...

编程日记 2026/3/8 14:47:10

【前端三剑客】万字总结JavaScript

一、初识JavaScript 1.1 JavaScript 的作用 表单动态校验&#xff08;密码强度检测&#xff09; &#xff08; JS 产生最初的目的 &#xff09;网页特效服务端开发(Node.js)桌面程序(Electron)App(Cordova)控制硬件-物联网(Ruff)游戏开发(cocos2d-js) 1.2 HTML/CSS/JS 的关系…...

编程日记 2026/2/22 13:53:43

【哈希表与字符串的算法之路：思路与实现】—— LeetCode

文章目录 两数之和面试题01.02.判定是否为字符重排存在重复元素存在重复元素||字母异位词分组最长公共前缀和最长回文子串二进制求和字符串相乘 两数之和 这题的思路很简单&#xff0c;在读完题目之后&#xff0c;便可以想到暴力枚举&#xff0c;直接遍历整个数组两遍即可&…...

编程日记 2026/3/11 19:59:52

基于Android的记事本APP设计与实现：从需求分析到功能实现（超级简单记事本，附源码+文档报告）

基于Android的记事本APP设计与实现&#xff1a;从需求分析到功能实现 &#xff08;以前大学课堂作业&#xff0c;抄在这里当个回忆吧&#xff09; 引言 随着社会的不断进步&#xff0c;信息化建设不断发展&#xff0c;电子文字输入在生活、学习、工作中占有越来越重要的作用…...

编程日记 2026/3/9 2:47:34

eNSP中路由器的CON/AUX接口、GE Combo接口、Mini USB接口、USB接口、WAN侧uplink接口、FE接口、GE接口介绍

路由器常见接口的详细介绍及其应用示例&#xff1a; 1. CON/AUX 接口 全称&#xff1a;Console/Auxiliary&#xff08;控制台/辅助接口&#xff09;作用&#xff1a; CON&#xff08;Console&#xff09;&#xff1a;通过命令行界面&#xff08;CLI&#xff09;直接配置路由器…...

编程日记 2026/2/17 22:14:32

Hello Mr. My Yesterday日文歌词附假名注音，祭奠逝去的青春

hello mr. my yesterday Hundred Percent Free Hello Mr. my yesterday云っておくれよ “夢叶うその瞬間にまた逢える”と 前方の幾多前途多難の未知 後方の道後悔も知った 経験と価値 夢なかば 一本の道結果だが ひとつだけ知りたいよ 神様がいるのなら “幸せの定義っ…...

编程日记 2026/2/16 13:03:04

ubuntu ollama+dify实践

安装ollama 官网的指令太慢了&#xff0c;使用以下指令加速&#xff1a; export OLLAMA_MIRROR"https://ghproxy.cn/https://github.com/ollama/ollama/releases/latest/download" curl -fsSL https://ollama.com/install.sh | sed "s|https://ollama.com/dow…...

编程日记 2026/3/7 14:51:33

S7-1200 G2移植旧版本S7-1200程序的具体方法示例

S7-1200 G2移植旧版本S7-1200程序的具体方法示例 前期概要： S7-1200 G2必须基于TIA博途V20，之前的程序可通过移植的方式在新硬件上使用。 该移植工具可自动将TIA Portal 项目从 S7-1200 移植到更新的S7-1200 G2。 注意： 该插件支持在同一TIA Portal项目实例内将软件和/或硬…...

编程日记 2026/3/1 9:47:45

新办公室哪款空气净化器除甲醛效果好？高效除甲醛，提升效率

现代办公环境中&#xff0c;空气质量对员工的健康与工作效率产生着不可忽视的影响。尤其是新装修的办公室&#xff0c;往往因为空气中的甲醛浓度超标而导致一系列健康问题。因此&#xff0c;选择一款性能优越的除甲醛空气净化器就显得尤为重要。合适的空气净化器不仅可以有效过…...

编程日记 2026/3/3 17:52:01

塑造企业数字化形象：企业信息化UI界面设计的关键要素

引言 在数字化转型的大潮中&#xff0c;企业信息化系统的UI&#xff08;用户界面&#xff09;界面设计不仅是技术实现的最后一环&#xff0c;更是塑造企业数字化形象、提升用户体验、增强业务效率的重要手段。优秀的UI设计能够直观展现企业价值观&#xff0c;提升用户粘性&…...

编程日记 2026/3/10 12:12:01

大视频背景暗黑风格的wordpress企业主题免费下载

整体风格是黑色的&#xff0c;首页首屏大视频背景&#xff0c;动态效果非常好。向下滚动时&#xff0c;滚动的特效也不错。 原文 https://www.bixugao.com/wp/26.html...

编程日记 2026/2/16 18:54:19

CUDA编程之内存零拷贝技术

一、实现原理 零拷贝内存通过将‌主机锁页内存‌直接映射到设备地址空间&#xff0c;实现CPU与GPU共享内存&#xff0c;避免显式数据拷贝‌。锁页内存通过cudaHostAlloc或cudaHostRegister分配&#xff0c;确保物理地址固定且不被操作系统换页&#xff0c;从而支持DMA&#xff…...

编程日记 2026/2/25 16:34:36

C语言基础知识04

指针 指针概念 指针保存地址&#xff0c;地址是字节的编号 指针类型和保存的地址类型要一直 使用时注意&#xff0c;把地址转换为&变量的格式来看 int a[3]; a转为&a[0] 指针的大小 64bit 固定8字节&#xff0c; 32bit 固定4字节 指针…...

编程日记 2026/3/11 17:43:32

在 Java 中，== 和 equals 的区别

1. 运算符 作用&#xff1a;比较两个对象的 内存地址&#xff08;引用类型&#xff09;或 值&#xff08;基本数据类型&#xff09;。 适用场景&#xff1a; 基本数据类型&#xff08;int, char, boolean 等&#xff09;&#xff1a;直接比较值是否相等。 引用类型&#xff…...

编程日记 2026/3/12 14:32:16

Qt开发：QtWebEngine中操作选择文本

查找选择 在QtWebEngine中&#xff0c;可以使用QWebEnginePage的findText方法来查找文本&#xff0c;查找成功以后&#xff0c;将自动选择当前文本。 QWebEnginePage可以通过QWebEngineView的page()来取得。 比如&#xff0c;如下代码可以在页面中查找hello,world并选择。 …...

编程日记 2026/2/16 1:25:39

VUE的脚手架搭建引入类库

VUE的小白脚手架搭建 真的好久好久自己没有发布自己博客了,对于一直在做后端开发的我 ,由于社会卷啊卷只好学习下怎么搭建前端,一起学习成长吧~哈哈哈(最终目的,能够懂并简易开发) 文章目录 VUE的小白脚手架搭建1.下载node.js2.安装vue脚手架3.创建一个项目4.代码规范约束配置(…...

编程日记 2026/2/15 19:26:59

分布式系统日志排查综合场景

排查背景 在一个大型分布式电商系统中&#xff0c;用户反馈在进行商品结算时出现了报错。系统由多个子系统构成&#xff0c;包括商品管理系统、订单系统、支付系统等&#xff0c;各子系统分布在不同服务器上&#xff0c;且日志文件分散存储。 排查过程 确定当前位置并切换到可…...

编程日记 2026/2/27 6:30:32

android lmkd.rc 介绍

service service lmkd /system/bin/lmkdclass coreuser lmkdgroup lmkd system readproccapabilities DAC_OVERRIDE KILL IPC_LOCK SYS_NICE SYS_RESOURCEcriticalsocket lmkd seqpacketpasscred 0660 system systemtask_profiles ServiceCapacityLow属于核心服务组&#xff0…...

编程日记 2026/3/3 15:10:36