【html网页页面012】html+css制作品牌主题宏宝莱网页含视频、留言表单（7页面附效果及源码）

2025/2/5 14:39:27 来源：https://blog.csdn.net/hdp134793/article/details/144494112 浏览: 次关键词：【html网页页面012】html+css制作品牌主题宏宝莱网页含视频、留言表单（7页面附效果及源码）

品牌主题宏宝莱网页制作

🥤1、写在前面
🍧2、涉及知识
🌳3、网页效果
- 完整效果(7页)：
- 代码目录结构：
- page1、首页
- page2、衍生品
- page3、包装设计
- page4、视频介绍
- page5、留言板
- page6、联系我们
- page7、详情页（三层页面）
🌈4、网页源码
- 4.1 html
- 4.2 CSS
- 4.3 源码获取
- - 品牌宏宝莱网页源码及介绍链接
🐋5、作者寄语

🥤1、写在前面

品牌主题网站网页一共7个页面

网页使用html+css制作
页面可以相互跳转包含图文、菜单列表页面、视频页面、表单页面
含一级、二级、详细三层页面等
网页可以使用vscode hbuilder dw等打开修改
里面的图片和文字都可以替换为其他内容
html静态网页设计感页面布局简单原创html网页设计适合当作业使用

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

🍧2、涉及知识

品牌主题网页宏宝莱，视频页面网页，品牌主题设计网页制作css+div，品牌网页制作与设计，7页网页制作含视频元素，静态页面html网页。html品牌主题网页，美食宏宝莱主题网页制作，品牌主题网页html

🌳3、网页效果

完整效果(7页)：

在这里插入图片描述

代码目录结构：

在这里插入图片描述

page1、首页

在这里插入图片描述

page2、衍生品

在这里插入图片描述

page3、包装设计

在这里插入图片描述

page4、视频介绍

在这里插入图片描述

page5、留言板

在这里插入图片描述

page6、联系我们

在这里插入图片描述

page7、详情页（三层页面）

在这里插入图片描述

🌈4、网页源码

4.1 html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>网页制作</title><link rel="stylesheet" href="css/style.css">
</head><body><div class="hong"><div class="hong-tou"><div class="caidan"><div class="logo"><img height="60px" src="images/logo.png" alt=""></div><ul><a href="index.html"><li class="visited">首页</li></a><a href="yansheng.html"><li>衍生品</li></a><a href="baozhuang.html"><li>包装设计</li></a><a href="shipin.html"><li>视频介绍</li></a><a href="liuyan.html"><li>留言板</li></a><a href="lianxi.html"><li>联系我们</li></a></ul></div><div class="banner"></div></div><div class="hong-wei"><div class="allwei"><div class="weileft"><h2>宏宝莱责任有限公司出品</h2><p>html网页制作</p></div><div class="weimid"><img height="100px" src="images/logo.png" alt=""></div><div class="weiright"><p>联系地址：北京市海淀区国家高新科技园-03幢25楼</p><p>邮箱：123456789@qq.com</p><p>电话：1322226666</p><p>微博留言：hongbaolai.weibo.com</p></div></div></div></div>
</body></html>

4.2 CSS

* {padding: 0;margin: 0;
}body, html {width: 100%;height: 100%;font-size: 13px;
}.hong {width: 100%;height: 100%;overflow-x: hidden;
}.hong-tou {width: 100%;height: auto;margin: 0 auto;
}.caidan {width: 1000px;height: 60px;padding: 5px 0;margin: 0 auto;border-bottom: 1px solid #eee;
}.logo {width: 300px;height: 60px;float: left;
}