web网页设计实例作业HTML+CSS+JavaScript蔬菜水果商城购物设计

news2025/8/10 8:02:55

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录🌰

一、网页介绍📖
一、网页效果🌌
二、代码展示😈
- 1.HTML结构代码 🧱
- 2.CSS样式代码 🏠
三、个人总结😊
四、更多干货🚀

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

在这里插入图片描述

二、代码展示😈

1.HTML结构代码 🧱

代码如下（示例）：以下仅展示部分代码供参考~

<!--导航栏样式-->
<div id="Menu">
  <div class="Menu_style">
  <div id="allSortOuterbox">
    <div class="Category"><a href="#"><em></em>所有产品分类</a></div>
    <div class="hd_allsort_out_box_new">
	 <!--左侧栏目开始-->
	 <ul class="Menu_list">	
	    <li class="name"><a href="#" >鲜果类</a>
		<div class="menv_Detail">
		 <div class="cat_pannel clearfix">
		    <ul>
			  <div class="title_name">热带水果</div>
			  <li><a href="#">菠萝</a><a href="#">香蕉</a><a href="#">猕猴桃</a><a href="#">名称</a></li>
			</ul>
			 <ul>
			  <div class="title_name">温带水果</div>
			  <li><a href="#">名称</a><a href="#">名称</a><a href="#">名称</a><a href="#">名称</a></li>
			</ul>
		  </div>
		</div>
		 
		</li>
		<li class="name"><a href="#" >精品蔬菜</a>
		
		<div class="menv_Detail">
		 <div class="cat_pannel clearfix">
		    <ul>
			  <li><a href="#">33</a><a href="#">23</a><a href="#">名称</a><a href="#">名称</a></li>
			</ul>
		  </div>
		</div>
		
		</li>
		<li class="name"><a href="#" >特色干果</a>
		<div class="menv_Detail">
		 <div class="cat_pannel clearfix">
		    <ul>
			  <li><a href="#">33</a><a href="#">名称</a><a href="#">名称</a><a href="#">名称</a></li>
			</ul>
		  </div>
		</div>
		
		</li>
		<li class="name"><a href="#" >粮油食品</a>
		<div class="menv_Detail">
		 <div class="cat_pannel clearfix">
		    <ul>
			  <li><a href="#">33</a><a href="#">名称</a><a href="#">名称</a><a href="#">名称</a></li>
			</ul>
		  </div>
		</div>
		</li>
		<li class="name"><a href="#" >调味类</a>
		<div class="menv_Detail">
		 <div class="cat_pannel clearfix">
		    <ul>
			  <li><a href="#">33</a><a href="#">名称</a><a href="#">名称</a><a href="#">名称</a></li>
			</ul>
		  </div>
		</div>
		</li>
		<li class="name"><a href="#" >鲜肉类</a>
		<div class="menv_Detail">
		 <div class="cat_pannel clearfix">
		    <ul>
			  <li><a href="#">33</a><a href="#">名称</a><a href="#">名称</a><a href="#">名称</a></li>
			</ul>
		  </div>
		</div>
		</li>
		<li class="name"><a href="#" >水产类</a>
		<div class="menv_Detail">
		 <div class="cat_pannel clearfix">
		    <ul>
			  <li><a href="#">33</a><a href="#">名称</a><a href="#">名称</a><a href="#">名称</a></li>
			</ul>
		  </div>
		</div>
		</li>
		<li class="name"><a href="#" >日用百货</a>
		<div class="menv_Detail">
		 <div class="cat_pannel clearfix">
		    <ul>
			  <li><a href="#">33</a><a href="#">名称</a><a href="#">名称</a><a href="#">名称</a></li>
			</ul>
		  </div>
		</div>
		</li>
		<li class="name"><a href="#" >宣传服务处</a>
		<div class="menv_Detail">
		 <div class="cat_pannel clearfix">
		    <ul>
			  <li><a href="#">33</a><a href="#">名称</a><a href="#">名称</a><a href="#">名称</a></li>
			</ul>
		  </div>
		</div>
		</li>
	</ul>	
	</div>		
	</div>

2.CSS样式代码 🏠

.Selling{ border:1px solid #ddd; margin-bottom:20px;}
.Selling .title_name{ height:35px; line-height:35px; color:#FFFFFF; font-size:16px; background:#3eaf0e; padding:0px 20px;}
.Selling .ew{ padding:0px 10px; color:#006600}
.Selling .jiesao{color:#006600; font-size:14px}
.Selling .more{ float:right; }
.Selling .more a{ color:#FFFFFF; font-size:12px}
.Selling .Selling_list{ }
.Selling .Selling_list li{ float:left; width:179px; text-align:center; padding:10px; position:relative}
.Selling .Selling_list li img{ width:150px; height:150px;border: 0;vertical-align: middle;}
.Selling .Selling_list li .p_info{ border-left:1px solid #ddd;font-size:14px; line-height:26px;}
.Selling .Selling_list li .p_info a{ font-size:14px; color:#666666}
.Selling .Selling_list li .p_info a:hover{ color:#009900}
.Selling .Selling_list li .p_info .jiage{ color:#FF0000}
.Selling .Selling_list li em{ color:#FFFFFF; font-family:Impact; font-size:16px; background:url(../images/sh_img_02.png) no-repeat 0px -125px; width:30px; height:30px; padding:10px 7px; position:absolute; left:10px;}
/***********************************商品展示样式*********************************/
#Fruits_1f,#Vegetables_2f,#Grain_3f,#Department_4f{ margin-bottom:20px;}
#Fruits_1f .Product_title,
#Vegetables_2f .Product_title,
#Grain_3f .Product_title{ line-height:35px; height:35px; background:#3eaf0e; border-bottom:3px solid #088313; color:#FFFFFF; font-size:16px}
#Fruits_1f .Product_title span,
#Vegetables_2f .Product_title span,
#Grain_3f .Product_title span{ padding:7px 10px; background:#088313; margin-right:10px;}
#Department_4f .Product_title{ background:#ff8400; border-bottom:3px solid #ff5400; line-height:35px; height:35px; color:#FFFFFF; font-size:16px}
#Department_4f .Product_title span{padding:7px 10px; background:#ff5400; margin-right:10px;}
/********水果区*********/
#Fruits_1f{}
#Fruits_1f .Fruits_Show{ background:#f8f8f8; height:470px;}
#Fruits_1f .Fruits_Show .Fruits_one .link_name{ height:234px;}