【html网页页面010】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、涉及知识
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;
}
4.3 源码获取
源码直通车点击下面链接：
茶主题网页源码及介绍链接
🐋5、作者寄语
如果觉得我这篇博客对您有帮助，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
更多主题及完整源码 尽在【IT黄大大】网站，有很多主题优质网页源码。
以上有问题可以随时交流学习，一起进步！
有任何不懂的和意见都可以评论区留言，也可私信，博主都会认真回复哟！
原文地址：https://blog.csdn.net/hdp134793/article/details/144359591
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！