大学生校园失物招领网站设计成品学生失物招领网页制作模板下载 DIV CSS校园网页设计作业 HTML静态失物招领网页模板源代码三层结构布局网页设计成品

置顶 STU网页设计

已于 2023-02-06 18:26:06 修改

阅读量1.4k

点赞数 1

分类专栏：个人网页 / 校园班级文章标签：失物招领网页设计学生网页设计简单网页设计静态网页作业 html网页成品

于 2023-02-06 18:19:31 首次发布

本文链接：https://blog.csdn.net/LILIXING_COM/article/details/128906049

版权

个人网页 / 校园班级专栏收录该内容

12 篇文章 37 订阅

订阅专栏

作品介绍

大学生失物招领网页制作成品，题材为校园失物招领网站设计，采用DIV CSS布局制作，三层结构，共13个页面，包括首页、失物招领（含4个子页面）、失物报失（含4个子页面）、发布招领、发布寻物。使用表单制作了搜索和发布。作品简单页面齐全，学生基础水平制作。

代码结构

HTML代码展示

为避免作品重复，以下为部分代码展示

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- 头部代码开始 -->
<div class="top">
	<div class="head">
		<div class="menu">
			<ul>
				<li><a href="">导航部分</a></li>
				<li><a href="">导航部分</a></li>
				<li><a href="">导航部分</a></li>
				<li><a href="">导航部分</a></li>
				<li><a href="">导航部分</a></li>
			</ul>
		</div>
		<div class='search'>
		   <form action='' method='post'>
		   <input name='title' value='' class='soinput' placeholder='请输入关键字快速搜索'>
		   <input type='submit' value='搜索' class='sobtn'>
		   </form>
	    </div>
	</div>
</div>
<!-- 头部代码结束 -->
<!-- 大图代码结束 -->
<div class="banner"><img src="images/banner.jpg" width="100%"></div>
<!-- 大图代码结束 -->

CSS代码展示

为避免作品重复，以下为部分代码展示

@charset "utf-8";
/* CSS Document */
*{margin:0; padding:0; list-style-type:none;}
body{
	font-size:18px; 
	background-color: #fff;
}
a{
	text-decoration: none;
}
.top{
	background-color: #213d81;
	width: 100%;
	margin: 0 auto;
}
.head{
	width: 1200px;
	height: 100px;
    margin: 0 auto;
    background-color: #213d81;
}
.menu{
	float:left;
	margin-right: 30px;
	line-height: 100px;
}
.menu li{
	float: left;
	padding: 0 20px;
}
.menu li:hover,.this{
	background-color: #344e8c;
}
.menu li a{
	color:#fff;
}

成品展示

首页

首页制作了BANNER大图海报（源码文件夹中有PSD源文件）下方制作了失物招领及报失的内容汇集。
在这里插入图片描述

失物招领页面

失物招领页面采用图片列表形式制作，可以通过缩略图快速预览，点击图片列表可以进入失物的详情介绍
在这里插入图片描述

招领详情

失物招领详情展示失物照片和标题，点击联系认证做了个弹窗提示联系管理员
在这里插入图片描述

失物报失

考虑到失主不一定存有失物照片，失物报失页面使用文章列表的形式制作
在这里插入图片描述

报失详情

失物报失详情页面展示标题说明和丢失时间及描述，点击联系失主弹窗
在这里插入图片描述

发布招领

使用表单制作的发布页面，静态HTML网页作品，实际不能发布哦
在这里插入图片描述

发布寻物

使用表单制作的发布页面，静态HTML网页作品，实际不能发布哦
在这里插入图片描述

网页作品文件

在这里插入图片描述

网页说明

作品为大学生初学水平DIV CSS布局制作，HTML和CSS代码都比较简单。

STU网页设计

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
大学生校园失物招领网站设计成品学生失物招领网页制作模板下载 DIV CSS校园网页设计作业 HTML静态失物招领网页模板源代码三层结构布局网页设计成品

大学生失物招领网页制作成品，题材为校园失物招领网站设计，采用DIV CSS布局制作，三层结构，共13个页面，包括首页、失物招领（含4个子页面）、失物报失（含4个子页面）、发布招领、发布寻物。使用表单制作了搜索和发布。作品简单页面齐全，学生基础水平制作。
复制链接

扫一扫