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

品牌主题宏宝莱网页制作

🥤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

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

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黄大大】网站,有很多主题优质网页源码。

以上有问题可以随时交流学习,一起进步!

有任何不懂的和意见都可以评论区留言,也可私信,博主都会认真回复哟!

相关推荐
aiprtem20 分钟前
基于Flutter的web登录设计
前端·flutter
浪裡遊23 分钟前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术30 分钟前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing35 分钟前
0704-0706上海,又聚上了
前端·新浪微博
止观止1 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall1 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴1 小时前
简单入门Python装饰器
前端·python
袁煦丞2 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码2 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github
Liudef062 小时前
2048小游戏实现
javascript·css·css3