682.大学生HTML期末大作业 —【简单奶茶店网页首页(1页)】 Web前端网页制作 html5+css3
目录
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：全网最全的的网页案例集合，5000+套网页完整代码，主题涵盖40+种类型，网页案例持续更新中,需要的文章末尾添加我微信...
【建议收藏】40种主题网页案例大集合 Web前端 大学生期末大作业 HTML+CSS+JS-CSDN博客
一、网页简介
本实例应用html5+css3，div+css布局，代码简单。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含1个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小抹狐</title>
<link rel="stylesheet" type="text/css" href="css/zero.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div class="most">
<!--导航-->
<div class="header">
<div class="head_photo">
<img src="img/index_03.png"/>
</div>
<div class="head_box">
<p class="tit"><a href="http://www.hebic.cn/">关于我们</a></p>
</div>
<div class="head_box">
<p class="tit"><a href="">产品展示</a></p>
</div>
<div class="head_box">
<p class="tit"><a href="">最新资讯</a></p>
</div>
<div class="head_box">
<p class="tit"><a href="">联系我们</a></p>
</div>
<div class="head_box">
<p class="tit">营业据点</p>
</div>
</div>
<!--背景图-->
<div class="shoulder">
<img src="img/joining_02.png"/>
</div>
<!--品牌优势-->
<div class="brand">
<div class="brand_tit">
<p class="tit">品牌优势</p>
<p class="txt">ADVANTAGE</p>
</div>
<div class="brand_advantage">
<div class="brand_box">
<div class="xk">
<img src="img/joinin_05.png" alt="" />
</div>
<p class="title">价格优势</p>
<p class="txt">可要求更优惠的折扣</p>
</div>
<div class="brand_box">
<div class="xk">
<img src="img/joinin_07.png" alt="" />
</div>
<p class="title">品牌优势</p>
<p class="txt">国内抹茶专业大牌</p>
</div>
<div class="brand_box">
<div class="xk">
<img src="img/joinin_09.png" alt="" />
</div>
<p class="title">产品优势</p>
<p class="txt">口味独特，幽香醇厚</p>
</div>
<div class="brand_box">
<div class="xk">
<img src="img/joinin_11.png" alt="" />
</div>
<p class="title">利润优势</p>
<p class="txt">成本低，高利润</p>
</div>
<div class="brand_box">
<div class="xk">
<img src="img/joinin_20.png" alt="" />
</div>
<p class="title">管理优势</p>
<p class="txt">秉承国内先进的经营理念</p>
</div>
</div>
</div>
<!--加盟条件-->
<div class="join_conditions">
<div class="brand_tit">
<p class="tit">加盟条件</p>
<p class="txt">CONDITIONS</p>
</div>
...
2.CSS
代码如下（节选示例）：
body{
background: url(../img/bg.png);
}
/*导航*/
.header{
width: 1200px;/* 宽度 */
height: 196px;/* 高度 */
margin: 0 auto;/* 页边 */
}
.head_photo{
float: left;/* 浮动 */
width: 214px;
height: 196px;
margin: 0 6px 0 0;
}
.head_photo img{
width: 214px;
height: 196px;
}
.head_box{
float: left;
width: 196px;
height: 196px;
}
.head_box p{
cursor: pointer;/* 光标 */
margin: 106px 40px 0 70px;
font-size: 21px;/* 字体大小 */
}
.head_box p:hover{
color: cadetblue;
}
/*背景图*//* 阴影 */
.shoulder{
margin: 0 auto;
}
.shoulder,.shoulder img{
width: 1903px;
height: 453px;
}
/*品牌优势*/
.brand{
overflow: hidden;/* 当内容溢出元素框时,触发 */
background: #d8e59f;/* 背景色 */
}
.brand_tit{
width: 1200px;
margin: 30px auto 0px;
}
.brand_tit .tit{
text-align: center;/* 文本位置 *//* 居中 */
font-weight: bold;/* 字体粗细,磅数 */
font-size: 20px;
}
.brand_tit .txt{
text-align: center;
}
.brand_advantage{
width: 1200px;
height: 230px;
margin: 0 auto;
}
.brand_box{
width: 240px;
height: 230px;
float: left;
}
.xk{
width: 137px;
height: 137px;
margin: 10px auto 0;
border-radius: 50%;/* 边框宽度 */
overflow: hidden;
}
.xk img{
width: 137px;
height: 137px;
border-radius: 50%;
opacity: 0.7;/* 图片不透明度 */
}
.xk img:hover{
opacity: 1;
transform: scale(1.2);/* 图片渐变 */
transition: 2s;/* 图片渐变时间 */
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
更多推荐
9
0- 0
已为社区贡献24条内容
所有评论(0)