46. Web前端网页制作大学生二手交易网页设计实例大学生期末大作业 html+css+js

本实例以“大学”二手网为主题设计，应用html+css，包括DIV布局、登录表单等，供大家参考。【关注作者|获取更多源码（2000+个Web案例源码）|优质文章】；您的支持是我创作的动力！【点赞收藏博文】，Web开发、课程设计、毕业设计有兴趣的联系我交流分享，3Q！

蜡笔小仙女

881人浏览 · 2024-03-28 14:19:19

蜡笔小仙女 · 2024-03-28 14:19:19 发布

一、前言

2000+案例推荐，主题涵盖30+种类型：

二、网页文件

三、网页效果

以下为网页正文（节选示例）：

四、代码展示

1.HTML

代码如下（节选示例）：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>大学生二手交易网</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="top">
<a href="index.html"><img style="float:left" src="images/logo.jpg" /></a>
</div>

<div class="daohang">
<div id="nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">本网简介</a></li>
<li><a href="chanpin.html">二手网产品</a></li>
<li><a href="news.html">二手网新闻</a></li>
<li><a href="shouhou.html">售后服务</a></li>
<li><a href="denglu.html">会员登录</a></li>
</ul>
</div>
</div>


<div class="ban">
<img src="images/banner1.jpg">
</div>

</div>
</div>

<div class="box1">
<div class="shang-left">
<div class="gk-title"><a href="about.html"><h1>本站简介</h1></a></div>
<div class="gk">
<img src="images/gktu.jpg" />
<p>　大学生二手交易大学生二手商品网上销售平台，利用网络，线上展示，线下实体交易。实现与客户间，便捷的沟通和交流，去除了房租、人工等巨大的销售费用，完全让利消费者，让您花最少的钱，买到中意的二手商品！服务覆盖：北京、天津，河北、山西、河南、山东、东三省、湖北、湖南等全国各大城市的绝大部分大学。本店所售二手产品的售后，跟您从商场购买的售后是完全一样的...</p>
</div>
</div>
<div class="xz">
<div class="gk-title tit"><a href="news.html"><h1>二手网新闻</h1></a></div>
<ul>
<li><a href="#"><p>毕业季华北各高校大学生二手市场火爆夏日</p><span>2019-03-12</span></a></li>
<li><a href="#"><p>毕业季华北各高校大学生二手市场火爆夏日</p><span>2019-03-12</span></a></li>
<li><a href="#"><p>毕业季华北各高校大学生二手市场火爆夏日</p><span>2019-03-12</span></a></li>
<li><a href="#"><p>毕业季华北各高校大学生二手市场火爆夏日</p><span>2019-03-12</span></a></li>
<li><a href="#"><p>毕业季华北各高校大学生二手市场火爆夏日</p><span>2019-03-12</span></a></li>
<li><a href="#"><p>毕业季华北各高校大学生二手市场火爆夏日</p><span>2019-03-12</span></a></li>
<li><a href="#"><p>毕业季华北各高校大学生二手市场火爆夏日</p><span>2019-03-12</span></a></li>
<li><a href="#"><p>毕业季华北各高校大学生二手市场火爆夏日</p><span>2019-03-12</span></a></li>

</ul>
</div>
<div class="shang-right">
<div class="count-title"><a href="denglu.html"><h1>会员登录</h1></a></div>
<div class="count">
<div class="denglu"><span>用户名：</span><input class="xit" type="text" value="请输用户名"> </div>
<div class="denglu"><span>密码:</span><input class="xit" type="text" value="请输入密码"> </div>
<div class="denglu"><span>验证码:</span><input class="xit" type="text" value="请输入密码"> </div>
<img src="images/yanzhengma.jpg" width="100px;">
<button class="dengbt">登陆</button>

</div>
</div>
</div>

</li>
</a>
<a href="#">
<li><img src="images/8.jpg" />
<p>电磁炉</p>

</li>
</a>

</ul>
</div>
</div>


<div class="bottom">
<div class="bottom-box">
<p>2016-2020 @ 版权所有大学生二手交易网 </p>
</div>
</div>

</body>
</html>

......

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* CSS Document */

body{ margin:0 auto; font-size:12px; font-family: "宋体",arial; line-height:22px; background:#d0d3d5; }

div,p,input,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd{ height:auto; margin:0;; padding:0; vertical-align:middle ;}

li{ list-style:none;}

a{ text-decoration:none;}

.ul{ list-style:none;}

.divclear{ clear:both;}

img{ border:0; margin:0; padding:0;}

a{color:#333;}

a:link{ color:#333;}

a:hover {color:#0c95cf;text-decoration:none;overflow:hidden;}
/*---top开始-----*/
.top{ height:200px; width:1000px; margin:0 auto; }
.ban{ height: 335px;
width: 1000px;
margin: 0 auto;}
.banner{ width:1000px; height:335px; margin:0 auto; }
/*---top结束-----*/
.main{ width: 1000px;
margin: 0 auto;
padding-top: 10px;
background: #fff;
padding-bottom: 50px;
height: auto;
overflow: hidden;}
/*---导航----*/
.daohang{ width: 1000px;
height: 47px;
background: url(../images/nav-bj.jpg);
margin: 0 auto;}
#nav{ width:1000px; height:47px; line-height:47px; font-family:"宋体"; font-weight:bolder; font-size:14px; margin:0 auto; }

#nav ul{ margin:0 auto; }

#nav li{float: left;
width: 165px;
text-align: center;
color: #FFF;
}

#nav a{width:165px;height:47px; display:block; font-family:"宋体"; font-size:14px; font-weight:bold; float:left;}

#nav a:link { color:#FFF; }

#nav a:visited{ color:#FFF; text-decoration:none; overflow:hidden; }

#nav a:hover { color: #FFF; text-decoration:none; overflow:hidden; background:#0a6e9b; }

#nav a:active { color: #FFF; text-decoration:none; overflow:hidden; background:#0a6e9b; }
.box1{ width:1000px; height:311px; margin:0 auto;}
.shang-left{float:left;}
.gk-title{ width:308px; height:40px; background:#0c95cf; }
.gk-title h1{ height: 40px;
line-height: 40px;
width: 130px;
margin-left: 20px;
font-size: 16px;
color: #FFF;
font-family: "黑体"; }
.gk{ width:296px; height:262px; border-left:#8c8c8c 1px solid; border-right:#8c8c8c 1px solid; border-bottom:#8c8c8c 1px solid; background:#FFF; padding:0px 5px;padding-top: 10px; }
.gk span{ color:#F00;}
.gk img{ margin-right:10px; float:left;}
.xz{ width:347px; height:311px; margin:0px 15px;border:#8c8c8c 1px solid; background:#FFF; float:left; overflow:hidden;}
.xz ul{}
.xz ul li{ width:327px; height:30px; line-height:30px; margin:0px 10px; border-bottom:#CCC 1px dashed;}
.xz ul li p{ width:80%; height:30px; float: left;}

......

五、更多推荐

【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！

Web前端网页制作、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!

更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。

技术共进，成长同行——讯飞AI开发者社区

更多推荐

大数据领域数据架构的人工智能融合应用

随着企业数据规模以年均40%的速度爆炸式增长（Gartner, 2023），传统数据架构在处理多模态数据、支撑实时智能决策时面临效率瓶颈。如何通过AI实现数据治理的自动化与智能化机器学习如何优化数据存储与查询效率深度学习模型在实时数据流处理中的应用范式智能决策系统与数据中台的架构耦合机制背景部分定义核心概念与技术演进路径核心章节解析融合架构的技术组件与算法实现实战篇提供完整的端到端解决方案应用篇呈