🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业: 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】
二、📚网站介绍
📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。
📘网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。
📒网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;
📙网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++
等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)📜html文件包含:其中index.html是首页、其他html为二级页面;
(2)📑 css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3)📄 js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。
三、🔗网站效果
▶️1.视频演示
F73JP-下午茶甜点美食带psd(6页)
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下午茶</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<div class="in-box01">
<div class="in-box01-tit">我的DIY菜单</div>
<div class="logo"><img src="images/logo.jpg" /></div>
<div class="sous">搜索<input class="inpu" /></div>
<div class="jies">
<p>工作休闲的方式有很多种</p>
<p>一份甜点,一杯冷饮,可以</p>
<p>令你心情愉悦</p>
<div class="anniu">专注下午茶品质</div>
</div>
<div class="jis"></div>
<div class="daohang">
<ul>
<li><a href="index.html">官网首页</a></li>
<li><a href="jieshao.html">关于我们</a></li>
<li><a href="fuwu.html">关于服务</a></li>
<li><a href="xianchang.html">产品中心</a></li>
<li><a href="wenhua.html">下午茶文化</a></li>
</ul>
</div>
</div>
<div class="in-box2">
<div class="in-box2-tit">品味轻奢魅力无限</div>
<div class="in-box2-fenlei">
<div class="bx1">
<div class="bx1-lef"><img src="images/in03.jpg" /></div>
<div class="bx1-rig"><h1>缤纷系列 </h1><p>每日新鲜水果,为健康而生,</p><p>为吃货而省!</p><img src="images/iny03.jpg" /></div>
</div>
<div class="bx1">
<div class="bx1-lef"><img src="images/in04.jpg" /></div>
<div class="bx1-rig"><h1>当红小曲 </h1><p>各种精美糕点由你选择,新鲜制作,</p><p>当天配送,为繁忙的工作带来一丝悠闲</p><img src="images/iny04.jpg" /></div>
</div>
<div class="bx1">
<div class="bx1-lef"><img src="images/in05.jpg" /></div>
<div class="bx1-rig"><h1>西式甜点 </h1><p>补充身体能量,热情工作每一天</p><img src="images/iny05.jpg" /></div>
</div>
<div class="bx1"><img src="images/in06.jpg" /></div>
</div>
</div>
<div class="in-box3">
<div class="in-box3-ner">
<ul>
<li><img src="images/in07.jpg" /><h1>品质保障</h1><p>水果每天鲜切点心</p><p>每天定制生产每天</p><p>按时送达</p></li>
<li><img src="images/in08.jpg" /><h1>优质服务</h1><p>专业人员全程一对</p><p>一服务贴心呵护</p></li>
<li><img src="images/in09.jpg" /><h1>每周上新</h1><p>由专业的营养师为你精心</p><p>搭配制各类食材,每周上新</p></li>
</ul>
</div>
<div class="in-box3-jiange"></div>
</div>
<div class="in-foot">
<div class="in-foot-ner">
<div class="shang">
<div class="shang-box">
<h1>我们的服务</h1>
<a href="xianchang.html"><p>下午茶现场</p></a>
<p>DIY下午茶</p></a>
<p>下午茶精品套餐</p>
<a href="wenhua.html"><p>下午茶文化</p></a>
</div>
<div class="shang-box">
<h1>使用指南</h1>
<p>如何DIY下午茶</p>
<p>如何购买套餐</p>
<p>如何支付定金</p>
<p>如何申请发票</p>
</div>
<div class="shang-box">
<a href="jieshao.html"><h1>关于我们</h1></a>
<a href="jieshao.html"><p>关于不错</p></a>
<p>联系我们</p>
<a href="hezuo.html"><p>品牌合作</p></a>
<p>帮助中心</p>
</div>
<div class="shang-box2">
<img src="images/in12.jpg" />
<p>400-118-1217</p><p>139-1060-6951</p>
</div>
</div>
<div class="xia">2020-2029 bucuo100.com, All Rights Reserved.</div>
</div>
</div>
</div>
</body>
</html>
🏠CSS样式代码
li {
list-style: none;
}
img {
border: 0;
margin: 0;
padding: 0;
}
a {
color: #333;
text-decoration: none;
}
a:link {
color: #333;
}
a:hover {
color: #629705;
text-decoration: none;
overflow: hidden;
}
.main {
width: 1200px;
height: auto;
overflow: hidden;
min-height: 1000px;
margin: 0 auto;
background: #FFF;
}
.in-box01 {
width: 1200px;
height: 897px;
background: url(../images/in01.jpg) no-repeat;
}
.in-box01-tit {
font-size: 17px;
color: #FFF;
width: 130px;
height: 28px;
margin-left: 710px;
}
.logo {
width: 95px;
height: 344px;
position: relative;
top: 84px;
left: 122px;
}
.sous {
width: 263px;
height: 45px;
background: #9ea5ab;
line-height: 45px;
color: #FFF;
font-size: 18px;
padding-left: 10px;
position: relative;
left: 230px;
top: -240px;
line-height: 40px;
}
.inpu {
width: 210px;
height: 34px;
margin-left: 10px;
}
.jies {
width: 330px;
height: 160px;
margin-left: 220px;
margin-top: -200px;
padding-top: 20px;
}
.jis {
width: 33px;
height: 33px;
background: url(../images/yinhao.jpg) no-repeat right;
margin-left: 550px;
margin-top: -190px;
}
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏”
一键三连哦!
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】
带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻