662.大学生HTML期末大作业 —【茶香网网站页面毕业设计(8页)】 Web前端网页制作 html5+css3+js
目录
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：全网最全的的网页案例集合，5000+套网页完整代码，主题涵盖40+种类型，网页案例持续更新中,需要的文章末尾添加我微信...
【建议收藏】40种主题网页案例大集合 Web前端 大学生期末大作业 HTML+CSS+JS-CSDN博客
一、网页简介
本实例应用html5+css3+js： 导航菜单、图片轮翻、三级页面、购物车（可自动计算商品金额）、注册、登录、留言表单、带设计说明报告等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含8个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/style.css" />
<title>茶香网</title>
</head>
<body>
<header>
<div class="wrapin head_t1"> <a href="index.html" class="logo"><img src="images/logo.JPG"></a> <a href="shopping.html" class="shopping">购物车</a>
<div class="member"> <a href="sign.html">会员登录</a> <a href="register.html">会员注册</a> </div>
<div class="clear"></div>
</div>
<nav>
<ul class="wrapin">
<li><a href="index.html">首页</a></li>
<li><a href="product.html">产品</a></li>
<li><a href="about.html">关于我们</a></li>
<div class="clear"></div>
</ul>
</nav>
</header>
<div class="banner">
<div class="banner" id="banner">
<ul id="b_pic">
<li style="display: block;"><img src="images/banner1.jpg" alt=""></li>
<li style="display:none"><img src="images/banner2.jpg" alt=""></li>
<li style="display:none"><img src="images/banner3.jpg" alt=""></li>
</ul>
<ul id="b_an">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="js/lunbo.js" type="text/javascript"></script>
<div class="content wrapin">
<div class="product_list">
<h3 class="tit"><span>最新绿茶</span></h3>
<div class="da_img"><img src="images/da1.png"></div>
<ul>
<li>
<div class="img"><a href="details1.html"><img src="images/a1.jpg"></a></div>
<div class="word">
<h3><a href="details1.html">黄山毛峰 250g/罐</a></h3>
<span>￥638</span> </div>
</li>
<li>
<div class="img"><a href="details2.html"><img src="images/a2.jpg"></a></div>
<div class="word">
<h3><a href="details2.html">黄山毛峰 250g/罐</a></h3>
<span>￥1688</span> </div>
</li>
<li>
<div class="img"><a href="details3.html"><img src="images/a3.jpg"></a></div>
<div class="word">
<h3><a href="details3.html">信阳毛尖 250g/罐</a></h3>
<span>￥888</span> </div>
</li>
<li>
<div class="img"><a href="details4.html"><img src="images/a4.jpg"></a></div>
<div class="word">
<h3><a href="details4.html">信阳毛尖 250g/罐</a></h3>
<span>￥1688</span> </div>
</li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
<div class="product_list">
<h3 class="tit"><span>经典红茶</span></h3>
<div class="da_img"><img src="images/da2.png"></div>
<ul>
<li>
<div class="img"><a href="details5.html"><img src="images/a5.jpg"></a></div>
<div class="word">
<h3><a href="details1.html">正山小种 250g/罐</a></h3>
<span>￥638</span> </div>
</li>
<li>
<div class="img"><a href="details6.html"><img src="images/a6.jpg"></a></div>
<div class="word">
<h3><a href="details2.html">祁门红茶 250g/罐</a></h3>
<span>￥838</span> </div>
</li>
...
2.CSS
代码如下（节选示例）：
/*通用类*/
*{
margin:0;
padding:0;
}
body{
min-width:1000px;
margin:0 auto;
font-size:14px;
background:#fff;
text-align:justify;
color:#333;
}
h1,h2,h3{
font-weight:500;
}
img{
border:none;
}
a{
cursor:pointer;
color:#333;
text-decoration:none;
outline:none;
}
a:hover{
color:#f60;
}
ul{
list-style-type:none;
}
em{
font-style:normal;
}
.lt{
float:left;
}
.rt{
float:right;
}
input.sub,label{
border:none;
cursor:pointer;
}
.clear{
clear:both;
}
/*主体容器宽度*/
.wrapin{
width:1000px;
margin-left:auto;
margin-right:auto;
}
.head_t1 {
padding:10px 0;
}
header .logo {
width:282px;
float:left;
}
header .logo img {
width:100%;
display:block;
}
.shopping {
float:right;
height:40px;
padding:0 30px;
margin:19px 0;
line-height:40px;
background:#060E43;
text-align:center;
color:#fff;
}
.member {
float:right;
line-height:78px;
}
.member a {
margin-right:30px;
}
nav {
background:#060E43;
}
nav li {
float:left;
width:150px;
text-align:center;
}
nav li a {
display:block;
color:#fff;
font-size:16px;
line-height:50px;
}
...
3.JS
代码如下（节选示例）：
window.onload=function(){
//第一个幻灯
var pic_lis=document.getElementById('b_pic').getElementsByTagName('li');
var an_lis=document.getElementById('b_an').getElementsByTagName('li');
an_lis[0].style.background='#b31114';
var c=0;
function h_slide(){
c++;
if(c==pic_lis.length){c=0;}
for(var i=0; i<pic_lis.length; i++){
pic_lis[i].style.display='none';
an_lis[i].style.background='#fff';
}
pic_lis[c].style.display='block';
an_lis[c].style.background='#b31114';
}
var timer=setInterval(h_slide,4000);
for(var j=0; j<pic_lis.length; j++){
an_lis[j].index=j;
an_lis[j].onmouseover=function(){
index=this.index;
clearInterval(timer);
for(var k=0; k<an_lis.length; k++){
pic_lis[k].style.display='none';
an_lis[k].style.background='#fff';
}
pic_lis[index].style.display='block';
an_lis[index].style.background='#b31114';
}
an_lis[j].onmouseout=function(){
timer=setInterval(h_slide,4000);
}
}
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
更多推荐
18
0- 0
已为社区贡献24条内容
所有评论(0)