339.简单清新的水果商城网页大学生期末大作业 Web前端网页制作 html+css

仙女网页制作

已于 2024-07-01 00:56:22 修改

阅读量833

点赞数 17

分类专栏： Web网页设计实例商城文章标签：前端 html html5 javascript css jquery css3

于 2024-07-01 00:53:50 首次发布

本文链接：https://blog.csdn.net/A240307/article/details/140089221

版权

Web网页设计实例同时被 2 个专栏收录

502 篇文章 26 订阅

订阅专栏

商城

13 篇文章 0 订阅

订阅专栏

欢迎光临仙女的网页世界！这里有Web前端网页制作的各行各业的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html+css：导航菜单、三级页面、注册页面、登录页面等。适用于大学生网页课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

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

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" media="all" type="text/css" />
<title>水果商城</title>
</head>
<body>
<header class="logo"><img src="images/logo.jpg" /></header>
<nav class="menu">
<ul class="center">
<li><a href="index.html">首页</a></li>
<li><a href="product.html">商品</a></li>
<li><a href="login.html">登录</a></li>
<li><a href="reg.html">注册</a></li>
</ul>
</nav>
<div class="banner"><img src="images/banner.jpg" width="100%" /> </div>
<div class="content">
<div class="bar">
<h2>当前热卖</h2>
</div>
<div class="scrollleft" >
<ul>
<a href="info.html">
<li> <img src="images/1.jpg"/>
<p>农夫山泉 17.5°橙赣南脐橙新鲜橙子</p>
<h2>￥199</h2>
</li>
</a> <a href="info.html">
<li> <img src="images/2.jpg"/>
<p>褚时建诸楮橙柑橘子特级沃柑</p>
<h2>￥98</h2>
</li>
</a> <a href="info.html">
<li> <img src="images/3.jpg"/>
<p>广西沃柑 5kg装蜜柑橘子桔子新鲜水果</p>
<h2>￥199</h2>
</li>
</a> <a href="info.html">
<li> <img src="images/4.jpg"/>
<p>丑橘不知火5kg彩盒装四川丑八怪柑橘桔子新鲜水果</p>
<h2>￥789</h2>
</li>
</a>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="end">
<p>水果商城</p>
</div>

</body>
</html>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* CSS Document */
ul,li,h1,h2,h3,p{ padding:0; margin:0; list-style:none}
a{ text-decoration:none; color:#000}
html{}
img{ max-width:100%}
body{ margin:0; line-height:21px}
.logo{ text-align:center; padding-bottom:10px}
.logo img{ width:130px}
.clear{ clear:both}
.menu li{ list-style:none}
.banner{ position:relative;}
.menu{ background:#52d8ab;box-shadow: 0px 0px 12px #ccc; width:100%; text-align:center;}
.menu li a{ color:#fff; font-size:16px; font-weight:bold}
.menu li { display:inline-block; margin:2px; padding:5px 60px ; }
.content{ margin:0 auto; width:1200px; padding-bottom:20px;font-size:14px;}
.end{ clear:both; background:#35dbb2; margin-top:40px; color:#fff; padding:20px 0; text-align:center;}
.pad{ padding:20px; display:block}
.scrollleft,.cc{ margin:0 10px}
.scrollleft li img{ width:100%}
.scrollleft li{box-shadow: 0px 0px 12px #ccc; width:21%; font-size:16px; margin:10px 1%; float:left; background:#e8e9d4; padding:1%; height:340px}
.scrollleft li h2{ color:#FF6666; margin-top:10px;}
.cc li{ width:306px; margin:10px; float:left}
.cc li img{ width:100%; height:200px}
.fl{ float:left}
.cs{ background:#e8e9d4; padding:10px;}
.bar{ margin:10px 20px;clear:both; text-align:center; padding:5px}
.bar:before{ content:''; vertical-align:middle; background:url(../images/left.png) no-repeat; width:40px; height:40px; background-size:100% auto; display:inline-block;position:relative;}
.bar:after{ content:''; vertical-align:middle; display:inline-block; background:url(../images/left.png) no-repeat; width:40px; height:40px; background-size:100% auto; position:relative;}
.bar h2{ display:inline-block; font-weight:normal; color:#FF6666; font-size:24px; margin:0 10px; position:relative; top:2px}
.more{ background:#fff; color:#FF3333; display:inline-block; margin-top:50px; border:#FF3333 solid 1px; padding:10px 40px;}
.more:hover{ background:#FF3333; color:#fff;}
.hei{ height:30px}
.a1{ width:28%; float:left;}
.a2{ width:68%; float:right;}
.a2 p{ font-size:16px; margin:5px 0}
.a2 h1{ font-weight:normal; line-height:40px; font-size:21px}
.a1 img{ border:#ccc solid 1px;}