品牌主题宏宝莱网页制作
🥤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;
}
4.3 源码获取
源码直通车点击下面链接：
品牌宏宝莱网页源码及介绍链接
🐋5、作者寄语
如果觉得我这篇博客对您有帮助，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
更多主题及完整源码 尽在【IT黄大大】网站，有很多主题优质网页源码。
以上有问题可以随时交流学习，一起进步！
有任何不懂的和意见都可以评论区留言，也可私信，博主都会认真回复哟！