DW网页设计美食蛋糕题材html网页设计源码？html作业

最新推荐文章于 2024-10-19 18:23:01 发布

学博星辰

最新推荐文章于 2024-10-19 18:23:01 发布

阅读量1k

点赞数 37

分类专栏：网页成品文章标签：美食 html 前端 html网页模板 html网页设计 html网页源码 html网页作业

本文链接：https://blog.csdn.net/qq_31374373/article/details/142578975

版权

网页成品专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章目录

一、网站主题

美食网站、美食网页、美食蛋糕网站、美食蛋糕网页、食品网站、食品网页、html网页设计与制作、学生web期末网页设计大作业。

二、网站描述

编码：A13、页数：06页，技术：html+css网页布局

蛋糕是一种面食，通常是甜的，典型的蛋糕是以烤的方式制作出来。蛋糕的材料主要包括了面粉、甜味剂（通常是蔗糖）、黏合剂（一般是鸡蛋，素食主义者可用面筋和淀粉代替）、起酥油（一般是牛油或人造牛油，低脂肪含量的蛋糕会以浓缩果汁代替），液体（牛奶、水或果汁），香精和发酵剂（例如酵母或者发酵粉）。

网页简介：div+css学生网页布局，html网页源码，html网页制作，html网页作业，html期末网页大作业，作品为学生美食蛋糕网页设计题材，运用html+css+js布局制作。

网页模块：头部板块，导航条制作、banner大图效果制作、网站首页、品牌故事、美食资讯（新闻列表二级页面）、美食资讯文章详情页（二级页面）、美食蛋糕图片展示、底部版权等。

知识运用：实战项目运用网页所需技术知识点，div+css布局、float(浮动布局)、flex(弹性布局)，插入img图片，css定位等。

网页文件：html(超文本标记语言)、css(层叠样式表)、js(脚本语言)、img(网页所有图片资源)。

开发工具：网页作品代码简单工整纯手工敲写，可使用任意HTML网页编辑器软件（如：Dreamweaver、HBuilder、Vscode 、Sublime Text 、Webstorm、Text 、Notepad++ 等任意html编辑器开发工具进行运行及修改编辑等操作）。

三、网站演示

1、网站首页

2、视频欣赏

DW网页设计美食蛋糕题材html网页设计源码？html作业

四、网站源码

代码如下(示例)：以下展示部分代码仅供参考~~

1、HTML结构源码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>美食蛋糕</title>
	<link rel="stylesheet" type="text/css" href="css/css.css"/>
</head>
<body>
	<div class="header">
		<div class="logo">
			<h1><a href="index.html">美食蛋糕</a></h1>
			<div class="tel">400-400-8888</div>
		</div>
		
		<div class="nav">
			<ul>
				<li class="on"><a href="index.html">网站首页</a></li>
				<li><a href="jmdg.html">精美蛋糕</a></li>
				<li><a href="ppgs.html">品牌故事</a></li>
				<li><a href="mszx.html">美食资讯</a></li>
				<li><a href="lxwm.html">联系我们</a></li>
			</ul>
		</div>
	</div>
	
	<div class="slide"><img src="img/jmdg_bg.jpg"></div>
</body>
</html>

2、CSS层叠样式表

* {
	padding: 0;
	margin: 0;
	border: none;
	outline: none;
}

body {
	font-size: 14px;
	font-family: '微软雅黑';
	width: 960px;
	height: auto;
	margin: 0 auto;
	color: #666;
}

ul,
li {
	list-style-type: none;
}

a {
	text-decoration: none;
	color: #666;
}

.header {
	width: 100%;
	height: auto;
	overflow: hidden;
}

.header .logo {
	width: 100%;
	height: 125px;
}

.header .logo h1 {
	float: left;
	font-size: 32px;
	margin-top: 45px;
}

.header .logo h1 a {
	color: #ed3da1;
}

.header .logo h1 a span {
	color: #ccc;
}

.header .logo .tel {
	float: right;
	height: 37px;
	line-height: 37px;
	font-weight: bold;
	font-size: 23px;
	color: #ed3da1;
	background: url(../img/tel.jpg) no-repeat left center;
	padding-left: 53px;
	margin-top: 52px;
}

.header .nav {
	width: 100%;
	height: 50px;
	background: #2b2b2b;
}

.header .nav ul {
	font-size: 0;
}

.header .nav ul li {
	display: inline-block;
}

.header .nav ul li a {
	display: block;
	width: 192px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 16px;
	color: #eaeaea;
}

.header .nav ul li a:hover,
.header .nav ul li.on a {
	background: #ed3da1;
	color: #ffff;
}

.slide,
.bg {
	width: 100%;
	height: auto;
	overflow: hidden;
}

.slide img {
	display: block;
}

五、学习理念

前端学习是一个既充满挑战又极具成就感的过程，它要求学习者不断掌握新技术、提升设计思维与用户体验意识。

1、持续学习与社区参与

持续学习‌：前端技术更新迅速，保持学习的热情和动力至关重要。关注行业动态、参加技术会议、阅读技术博客和书籍，都是提升自我的有效途径。‌让学习成为一种习惯，你将永远走在技术的前沿。

‌社区参与‌：加入前端社区，与同行交流心得、分享经验，可以拓宽视野、激发灵感。同时，参与社区建设、贡献开源项目，也能提升你的影响力和知名度。‌社区是成长的沃土，珍惜每一次交流的机会。

2、项目实践与项目经验

动手实践‌：理论知识是基础，但真正将知识转化为技能还需通过大量的实践。参与开源项目、自己搭建博客、开发小工具等，都是很好的实践方式。‌实践过程中遇到的问题和解决方案，将是你最宝贵的财富。动手实践‌：理论知识是基础，但真正将知识转化为技能还需通过大量的实践。参与开源项目、自己搭建博客、开发小工具等，都是很好的实践方式。‌实践过程中遇到的问题和解决方案，将是你最宝贵的财富。

‌项目经验‌：通过参与实际项目，可以学习到团队协作、项目管理、需求分析等技能。同时，项目经验也是求职时的重要加分项。‌尽量找机会参与真实项目，哪怕是从简单的功能模块开始。