【web开发网页制作】Html+Css网页制作关于美食介绍甜品主题（4页面）【附部分源码】
🥇专栏🥇：web前端大作业网页制作，期末作业
💂关于我💂：一个持续输出型博主，爱分享，喜技术，期待关注与交流！
??公众号??：《IT黄大大》更多分享抢先看；
?涉主题?：影视，明星，家乡，旅游，个人，美食，校园，商城，运动，特效等
?技术篇?：HTML+CSS，HTML+CSS+JS，Java+数据库，vue项目等
🍅软件篇🍅：vscode，dreamweaver，hbuilder，sublime text，eclipse，idea等；
👇皇榜专区👇：一键轻松上皇榜，皇榜特区享有网页资源；
html+css美食网页目录
??写在前面
照常到了我们整理学生时代的自己研发的网页页面了，主要希望能给大家带来一些作业上的灵感，也希望大家能够从中得到启发，解决自己眼前的作业窘境，当然能够学到知识是最好的，废话也不多说了，我尽量做到定期更新哈，希望大家能持续关注我哈！
🍄涉及知识
期末网页大作业，甜品美食主题网页作业，美食主题web作业，网页作业成品，web前端源码实例，如何制作网页，网页设计思路，如何从零开始制作web页面。
声明：原创于博主《IT黄大大》，更多资讯可关注微信公众号《IT黄大大》，如有转载请说明出处，创作不易，完整源码有偿可私信
一、🍰网页主题
本次主要研究的方向是一个美食相关的，当然粉色的主题与美味的实物搭配，定然让你心动，这个也是基于html+css开发的美食蛋糕类主题网页，满满的少女心，为了杜绝更多人随意倒卖我的作品，本作品只分享首页源码，完整源码可以公众号《IT黄大大》私信，希望大家能谅解，创作不易。
甜点主题网页主要从这四个方面出发：
首页：包括面包，蛋糕，冰激凌等
面包页：针对不同的面包进行了价格和说明介绍，蛋糕和冰激凌都类似。
看下面的效果图，是不是满满的少女心，希望大家能够喜欢这类风格的哈。
二、🍰网页效果
Page1、首页
Page2、蛋糕
Page3、面包
Page4、冰激凌
三、🍰网页架构与技术
3.1 脑海构思
要想做好一个页面，首先脑子里面得去有个架构，就好比是庖丁解牛，将架构了然于胸，什么困难都会迎刃而解，在制作这种类似网页作业的时候我们一般都是采用浮动布局的方式来实现的，因为这类静态页面的兼容性要求不高，所以我们要想好大致的框架。
此次主要设置了4个页面，分别是首页，蛋糕，面包，冰激凌四个方向去拓展的，当然也预留了扩展页面比如登录注册，咖啡，app页面等。
3.2 整体布局
在我的页面制作过程中，我主要采用的是浮动式布局，从左往右，从上至下的顺序来进行设计制作的，当然在制作之前我会先给页面框架做一个布局，首先我会设计下面几部分：
头部：banner（主要包括导航图和logo之类的）
菜单：menu（主要是采用a标签进行跳转的）
主体：main（核心内容展示）
底部：foot（版权声明）
其中头部和菜单及底部三个模块都是公用的，针对每个页面的切换主要体现在中间的主体模块，这也是一个好的网页作品必要的四大元素，不然就是斜坡上盖房子了。
声明：原创于博主《IT黄大大》，更多资讯可关注微信公众号《IT黄大大》，如有转载请说明出处，创作不易，完整源码有偿可私信
3.3 技术说明书
主要应用了web前端2个模块的技术HTML + CSS
HTML模块：
主要针对页面的结构搭建，该网站整体采用的是div标签作为盒子，其中包含:
有关无序列表 ul li 、
段落标签 p、
图片标签 img 、
行内标签span、
字体标签 h2 h3.等
CSS模块：
主要采用的是浮动式布局的方式，页面搭建主要通过设置div的border属性来确定每个div的位置，然后针对不同的位置定位。针对每个元素通过margin和padding属性来设置不同模块的相对位置，设置文字颜色color属性等。
主要用到了font的文字基本属性，background设置相关背景色。文本居中text-align:center
然后标签模块采用的是border属性，设置div的左边框的厚度和颜色。
四、🍰网页源码
4.1 首页模块
Html
<body>
<div class="header">
<div class="wrap">
<div class="logo"> <img src="images/logo.png" alt=""></div>
<nav class="nav">
<ul>
<li class="active"><a href="index.html">首页</a></li>
<li><a href="dangao/dangao.html">蛋糕</a></li>
<li><a href="mianbao/mianbao.html">面包</a></li>
<li><a href="bingjiling/bingjiling.html">冰淇淋</a></li>
<li><a href="#">咖啡下午茶</a></li>
<li><a href="#">APP下载</a></li>
</ul>
</nav>
<div class="login">
<p><img width="28" height="24" src="images/che.png" alt=""> <a href="#">登录/注册</a></p>
</div>
</div>
</div>
<!-- #EndLibraryItem -->
<div class="main">
<section class="banner"><img src="images/banner.jpg" width="1140" height="480" alt="" /></section>
<div class="main-part1">
<ul>
<li>
<div>新品</div><img width="170" height="125" src="images/白色红丝绒.png" alt="">
</li>
<li>
<div>人气产品</div><img width="170" height="125" src="images/慕尼黑巧克力.png" alt="">
</li>
<li>
<div>生日</div><img width="170" height="125" src="images/蓝妃儿.png" alt="">
</li>
<li>
<div>原料</div><img width="170" height="125" src="images/沃尔夫斯堡之春.png" alt="">
</li>
</ul>
</div>
<div class="main-part2 xp">
<h4><span class="font-w">新品</span>/专区</h4>
<img width="1140" height="467" src="images/焦点图1.jpg" alt="">
<div class="img_text_text">
<ul>
<li>
<img width="220" height="145" src="images/杏仁芝士蛋糕.jpg" alt="">
<p class="p1">杏仁芝士蛋糕</p>
<p class="p2">￥298.00/2.0磅</p>
</li>
<li>
<img width="220" height="145" src="images/黑巧克力.jpg" alt="">
<p class="p1">黑巧克力
</p>
<p class="p2">￥300/002.0磅</p>
</li>
<li>
<img width="220" height="145" src="images/梅果布丁蛋糕.jpg" alt="">
<p class="p1">梅果布丁蛋糕
</p>
<p class="p2">￥200/002.0磅</p>
</li>
<li>
<img width="220" height="145" src="images/蓝莓酸奶.jpg" alt="">
<p class="p1">蓝莓</p>
<p class="p2">￥300/002.0磅</p>
</li>
</ul>
</div>
</div>
<div class="main-part2">
<h4><span class="font-w">人气</span>/产品</h4>
<div class="img_text_text">
<ul>
<li>
<img width="220" height="145" src="images/玫瑰酸奶.jpg" alt="">
<p class="p1">玫瑰</p>
<p class="p2">￥398.00/2.0磅</p>
</li>
<li>
<img width="220" height="145" src="images/香蕉.jpg" alt="">
<p class="p1">香蕉
</p>
<p class="p2">￥325/002.0磅</p>
</li>
<li>
<img width="220" height="145" src="images/青柠酸奶.jpg" alt="">
<p class="p1">青柠
</p>
<p class="p2">￥410/002.0磅</p>
</li>
<li>
<img width="220" height="145" src="images/芒果.jpg" alt="">
<p class="p1">芒果</p>
<p class="p2">￥266/002.0磅</p>
</li>
</ul>
</div>
</div>
<div class="main-part2">
<h4><span class="font-w">生日</span>/专区</h4>
<div class="img_text_text">
<ul>
<li>
<img width="220" height="145" src="images/白色红丝绒.png" alt="">
<p class="p1">红色</p>
<p class="p2">￥398.00/2.0磅</p>
</li>
<li>
<img width="220" height="145" src="images/极地牛乳.png" alt="">
<p class="p1">白色
</p>
<p class="p2">￥325/002.0磅</p>
</li>
<li>
<img width="220" height="145" src="images/蓝妃儿.png" alt="">
<p class="p1">蓝色
</p>
<p class="p2">￥410/002.0磅</p>
</li>
<li>
<img width="220" height="145" src="images/沃尔夫斯堡之春.png" alt="">
<p class="p1">绿色</p>
<p class="p2">￥266/002.0磅</p>
</li>
</ul>
</div>
</div>
<div class="main-part2">
<h4><span class="font-w">产品</span>/原料</h4>
<div class="img_text_text">
<ul>
<li>
<img width="220" height="145" src="images/枫糖.jpg" alt="">
</li>
<li>
<img width="220" height="145" src="images/蜂蜜.jpg" alt="">
</li>
<li>
<img width="220" height="145" src="images/巧克力.jpg" alt="">
</li>
<li>
<img width="220" height="145" src="images/松露油.jpg" alt="">
</li>
</ul>
</div>
</div>
</div>
<footer class="footer">
<img src="images/logo.png" alt="">
<div class="foot_right">
<p>联系我们 | 订账帮助 | 企业合作 | 生产经学资质
| 公告专区</p>
<p>Copyight ? chaodake官网2007-2019,版权所有京ICP14006254号1</p>
</div>
</footer>
</body>
Css
.main-part1,.main-part2{
width: 90%;
height: 150px;
margin: 0 5%;
}
.main-part2{
height: 290px;
}
.xp{
height: 770px;
}
.main-part1 ul {
list-style: none;
}
.main-part1 ul li{
width: 240px;
height: 150px;
float: left;
margin-left: 30px;
font-weight: bold;
color: #7B453F;
}
.main-part1 ul li:first-child{
margin-left: 60px;
}
.main-part1 ul li div{
display: inline-block;
float: left;
width: auto;
height: 140px;
line-height: 130px;
}
.font-w{
font-weight: bold;
font-size: 20px;
}
.main-part2 img{
margin-top: 10px;
}
.img_text_text{
margin-top: 20px;
}
.img_text_text ul li{
width: 220px;
height: 150px;
float: left;
margin-left: 80px;
}
.img_text_text ul li:nth-child(2){
margin-left: 0;
}
.img_text_text ul li:first-child{
margin-right: 80px;
margin-left: 0;
}
.img_text_text ul li p{
width: 100%;
text-align: center;
}
.p1{
margin-top: 10px;
color: #480C09;
font-weight: bold;
line-height: 30px;
}
.p2{
color: #FC9C0A;
font-weight: bold;
}
五、?干货分享（HTML+CSS技术教学视频）
5.1 干货介绍
这个也是之前买的网上的一个视频，当然对我来说里面的一些知识已经有所掌握，希望能给各位支持我的帅哥美铝们提供一个学习的渠道，里面包含了多个资料；
Html+css（共31讲视频）
【特此声明】非盈利性质分享，还望大家下载后能自我学习，勿做商用
5.2 获取方式
A、关注公众号：《IT黄大大》
B、消息回复“前端资料”
C、获取下载路径即可下载，解压即用.
??作者寄语
如果我的这篇博客对您有帮助、而且您喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！当然如果这个文章对您带来不好的体验还希望能多多包涵，一起学习进步。
【关注我 | 获取更多源码 | 优质文章】 带您学习前端知识、CSS特效、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板等! 「在公众号<IT黄大大>里也会定期分享一些免费好看的html页面，期待您的关注哈」！
声明：原创于博主《IT黄大大》，更多资讯可关注微信公众号《IT黄大大》，如有转载请说明出处，创作不易，完整源码有偿可私信
2024年我们一起加油，一起成长，感谢您的支持与谅解！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！