470.大学生HTML期末大作业 —【简单的水果主题网页(5页)】 Web前端网页制作 html+css+js-优快云博客

本文链接：https://blog.youkuaiyun.com/VX_L_5201314168/article/details/145954013

欢迎来到我的优快云主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-优快云博客

5000+网页案例完整代码，主题涵盖30+种类型:

一、网页简介

本实例应用html+css，div+css布局，代码简单，适用于大学生网页课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含5个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/style.css" />
<title>水果乐园 </title>
</head>

</div>

<div class="con">
<div class="title">推荐</div>

<footer>
<p>水果乐园</p>
</footer>
</div>
</body>
</html>

...

2.CSS

代码如下（节选示例）：

/*通用类*/
* {
   margin: 0;
   padding: 0;
}
body {
   margin: 0 auto;
   font-size: 14px;
   background: #fff;
   color: #333;
   position: relative;
}
img {
   border: none;
}
a {
   cursor: pointer;
   color: #333;
   text-decoration: none;
   outline: none;
}
ul {
   list-style-type: none;
}
em {
   font-style: normal;
}
.lt {
   float: left;
}
.rt {
   float: right;
}
.clearfix::after {
   content: "";
   display: block;
   clear: both;
}
/*wrapin 主体容器宽度*/
.wrapin {
   width: 1000px;
   margin-left: auto;
   margin-right: auto;
}
.logo {
   display: block;
   width: 120px;
}
.logo img {
   width: 100%;
}
header {
   background: #6cb832;
   line-height: 50px;
}
.nav li {
   display: inline-block;
   width: 120px;
   text-align: center;
   font-size: 16px;
}
.nav li a {
   color: #fff;
}
.con {
   background: #fffbdd;
   padding: 15px;
}
.banner {
   width: 100%;
}
.banner img {
   display: block;
   width: 100%;
}
.title {
   padding: 10px 0;
   text-align: center;
   font-size: 20px;
   color: #009845;
}
.season {
   margin: 15px -15px;
}
.season li {
   float: left;
   width: 25%;
   height: 260px;
   padding: 15px;
   box-sizing: border-box;
   position: relative;
}
.season li a {
   width: 100%;
   height: 100%;
   display: block;
}
.season li img {
   height: 100%;
   object-fit: cover;
   width: 100%;
}
.season li p {
   font-size: 20px;
   font-weight: bold;
   color: #fff;
   position: absolute;
   width: 100%;
   top: 40%;
   left: 0;
   text-align: center;
}
.suig {
   margin: 0 -15px;
}
.suig li a {
   display: block;
}
.suig li p {
   text-align: center;
   line-height: 30px;
}
.suig li {
   float: left;
   width: 33.33%;
   padding: 15px;
   box-sizing: border-box;
}
.suig li img {
   display: block;
   width: 100%;
   height: 190px;
   object-fit: cover;
}