当前位置：首页 > article >正文

【html网页页面010】html+css制作茶品牌文创网页制作含视频元素（7页面附效果及源码）

article 2025/1/18 20:55:30

茶主题品牌文创网页制作

🥤1、写在前面
🍧2、涉及知识
🌳3、网页效果
- 完整效果(7页)：
- 代码目录结构：
- page1、主页
- page2、精品包装
- page3、茶园一角
- page4、品牌地带
- page5、衍生品
- page6、联X我们
- 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、涉及知识

html+css茶主题文创，茶主题网页制作css+div，茶主题文化文创网页，7页网页制作含视频元素，静态页面html网页。html茶主题文创主题网页，文创茶主题网页制作，茶主题网页html

🌳3、网页效果

完整效果(7页)：

在这里插入图片描述

代码目录结构：

在这里插入图片描述

page1、主页

在这里插入图片描述

page2、精品包装

在这里插入图片描述

page3、茶园一角

在这里插入图片描述

page4、品牌地带

在这里插入图片描述

page5、衍生品

在这里插入图片描述

page6、联X我们

在这里插入图片描述

page7、视频详情页

在这里插入图片描述

🌈4、网页源码

4.1 html

<div class="cha_top">
   <div class="cha_div">
        <div class="cha_bt">
            <h4> [ 一盏清茗 ] </h4>
            <p>品一盏清茗，探万物清新</p>
            <img width="100px" src="img/1.png" alt="">
        </div>
        <div class="cha_menu">
            <ul>
                <a href="index.html">
                    <li class="apper">主页</li>
                </a>
                <a href="jingpin.html">
                    <li>精品包装</li>
                </a>
                <a href="chayuan.html">
                    <li>茶园一角</li>
                </a>
                <a href="pinpai.html">
                    <li>品牌地带</li>
                </a>
                <a href="yansheng.html">
                    <li>衍生品</li>
                </a>
                <a href="connect.html">
                    <li>联系我们</li>
                </a>
            </ul>
        </div>
    </div>
</div>

4.2 CSS

* {
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

body, html {
    width: 100%;
    height: 100%;
    font-size: 18px;
    font-family: 'KaiTi';
    overflow-x: hidden;
}

.cha {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background-color: #efefef;
}