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

编程入门行业动态更新时间:2024-10-11 11:17:42

大学生校园<a href=https://www.elefans.com/category/jswz/34/1769806.html style= 失物招领网站设计成品学生失物招领网页制作模板下载 DIV CSS校园网页设计作业 HTML静态失物招领网页模板源代码三层结构布局网页设计成品"/>

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

作品介绍

大学生失物招领网页制作成品，题材为校园失物招领网站设计，采用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;
}