目录
博主寄语
别具一格的下午茶甜点美食网页设计实例，应用html+css： Div、导航栏、二级菜单、搜索等。适用于大学生网页课程作业设计、公司网页制作等。网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含6个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.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>
...
2.CSS
代码如下（节选示例）：
body {
margin: 0 auto;
font-size: 14px;
font-family: "微软雅黑";
line-height: 22px;
background: #c0c0c0;
}
div,p,input,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd {
height: auto;
margin: 0;
; padding: 0;
vertical-align: middle;
}
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;
}
.jies p {
font-size: 18px;
color: #484545;
line-height: 28px;
text-align: center;
letter-spacing: 6px;
}
.anniu {
width: 170px;
height: 28px;
background: #343434;
color: #FFF;
text-align: center;
line-height: 25px;
margin: 0 auto;
margin-top: 0px;
margin-top: 15px;
letter-spacing: 6px;
border-radius: 5px;
}
.daohang {
width: 180px;
height: 230px;
position: absolute;
margin-top: 280px;
margin-left: 130px;
}
.daohang ul {
}
.daohang ul li {
width: 100px;
height: 48px;
line-height: 48px;
padding-left: 60px;
background: url(../images/nav.jpg) no-repeat;
}
.daohang ul li a {
color: #6c6967;
font-size: 18px;
}
.in-box2 {
width: 1200px;
height: 917px;
background: url(../images/in02.jpg) no-repeat;
}
.in-box2-tit {
width: 275px;
height: 35px;
top: 180px;
position: relative;
left: 350px;
color: #5b5b5b;
font-size: 25px;
line-height: 35px;
letter-spacing: 6px;
}
.in-box2-fenlei {
width: 484px;
height: 603px;
left: 190px;
top: 280px;
position: relative;
}
.in-box2-fenlei .bx1 {
width: 484px;
height: 150px;
margin-bottom: 10px;
}
.in-box2-fenlei .bx1-lef {
width: 133px;
height: 150px;
float: left;
margin-right: 25px;
}
.in-box2-fenlei .bx1-rig {
width: 325px;
height: 150px;
float: left;
}
.in-box2-fenlei .bx1-rig h1 {
font-size: 27px;
color: #000000;
line-height: 40px;
}
.in-box2-fenlei .bx1-rig p {
font-size: 14px;
color: #807f7f;
line-height: 25px;
}
.in-box2-fenlei .bx1-rig img {
width: 100px;
height: 31px;
margin-top: 20px;
}
.in-box3 {
width: 1200px;
height: 530px;
padding-top: 87px;
}
.in-box3-ner {
width: 1055px;
height: 330px;
margin: 0 auto;
}
...
五、总结
一个优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！
Web前端网页制作、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。