html期末作业-房屋交易系统

已于 2022-01-30 14:31:14 修改
阅读量1k 收藏
点赞数
分类专栏： html css 文章标签： html css
于 2022-01-30 14:07:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62447327/article/details/122752477
版权
html 同时被 2 个专栏收录
1 篇文章 0 订阅
订阅专栏
css
1 篇文章 0 订阅
订阅专栏

1、系统主界面。主界面命名为zf.html，左侧登录界面和右侧登录界面通过iframe嵌入，分别命名为left.html和main.html。

 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<link href="css-zf.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="container">

<div id="header" style="position: relative;">

<img src="网上房屋交易信息.jpg" alt=" " style="height:220px;width: 900px">

<div style="position: absolute;z-index: 2;right: 10px;top: 10px"><h1 style="color: red">网上房屋交易信息平台</h1></div>

</div>

<div id="main">

<div id="aside"><iframe src="left.html.html" frameborder="0" width="1000" scrolling="no" height="500"></iframe></div>

<div id="content"><iframe src="main.html.html" frameborder="0" width="1000" scrolling="no" height="500"></iframe>

</div>

</div>

</div>

</body>

</html>

Zf-css：

@charset "utf-8";

/* CSS Document */

*{margin: 0px;

padding: 0;}

#container{

width: 900px;

margin: 0 auto;

}

#header{

height: 220px;

}

#main{

background-color:#4577F0;

/*height: 2050px;*/

}

#aside{

float:left;

width: 305px;

/*height: 500px;*/

background-color:#399AFC;

text-align: center;

font-size: 14px;

}

#content{

float: right;

width: 595px;

/*height: 2050px;*/

margin-bottom: 5px;

background-color: #399AFC;

}

2、左侧登录界面

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style media="screen" type="text/css">Add style rules here</style>

<style>

#overall{width: 250px;

height:450px;

background-color:#B3D8F5;

border-top-left-radius: 15px;

border-top-right-radius: 15px;

border-bottom-left-radius: 15px;

border-bottom-right-radius: 15px;

}

#left{

width: 200px;

background-color:#FFFFFF;

border-top-left-radius: 15px;

border-top-right-radius: 15px;

border-bottom-left-radius: 15px;

border-bottom-right-radius: 15px;

position:absolute;

            left:30px;

            top:20px;

}

 #container {

    display: flex;

    align-items: center;        /* 垂直居中 */

    justify-content: center;    /* 水平居中 */

 }

</style>

</head>

<body>

<div id="overall">

<div id="left">

<table id="container" cellpadding="0" cellspacing="0" border="0">

<tr>

<td>用户名：</td></tr>

<tr>

<td><input type="text" name="userName"></td>

</tr>

<tr>

<td>密 码：</td>

</tr>

<tr>

<td><input type="password" name="userPassword"></td>

</tr>

<tr> </tr>

<tr>

<td colspan="2" align="center"><a href="afterlogin.html"><input type="submit" name="submit" value="登录"></a>

<input type="reset" name="reset" value="重置"></td>

</tr>

<tr>

<td><a href="file:///C:/Users/LENOVO/Desktop/web/register.html" target="_top"><h5 align="center" >注册用户</h5></a></td>

</tr>

</table>

</div>

</div>

</body>

</html>

3、右侧界面

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style media="screen" type="text/css">Add style rules here</style>

<style>

#overall{width: 550px;

height:450px;

background-color:#B3D8F5;

border-top-left-radius: 15px;

border-top-right-radius: 15px;

border-bottom-left-radius: 15px;

border-bottom-right-radius: 15px;

}

#main{

width: 500px;

    height: 200px;

background-color:#FFFFFF;

border-top-left-radius: 15px;

border-top-right-radius: 15px;

border-bottom-left-radius: 15px;

border-bottom-right-radius: 15px;

position:absolute;

            left:30px;

            top:20px

}

 #container {

    display: flex;

    align-items: center;        /* 垂直居中 */

    justify-content: center;/* 水平居中 */

border-collapse: separate;

    border-spacing: 5px;



 }

</style>

</head>

<body>

<div id="overall">

<div id="main">

<table id="container" cellpadding="0" cellspacing="0" border="0">

<tr>

<td>选择查询条件：</td>

</tr>

<tr>

<td>区域：</td>

<td>

<select name="selectyear" size="1">

<option selected>不限--</option>

<option>国内</option>

<option>海外</option>

</select>

</td>

        <td>街道：</td>

<td>

<select name="selectyear" size="1">

<option selected>不限--</option>

<option>临川街道</option>

<option>金巢大道</option>

</select>

</td>

</tr>

<tr>

<td>售价：</td>

<td><input type="text" name="housePrice" style="width: 50px">至<input type="text" name="housePrice" style="width: 50px"></td>

<td>户型：</td>

<td>

<select name="selectyear" size="1">

<option selected>不限--</option>

<option>三</option>

<option>二</option>

<option>一</option>

</select>

室<select name="selectmonth" size="1">

<option selected>不限--</option>

<option>三</option>

<option>二</option>

    <option>一</option>

    </select>

厅

</td>

    </tr>

<tr>

<td>房屋类型:</td>

<td>

<select name="selectyear" size="1">

<option selected>不限--</option>

<option>别墅区</option>

<option>学区房</option>

<option>小区</option>

</select>

</td>

   <td>发布日期:</td>

    <td>

<select name="selectyear" size="1">

<option selected>不限--</option>

<option>一周前</option>

<option>一月前</option>

<option>一年前</option>

</select>

</td>

</tr>

<tr>

<td colspan="5" align="center"><!--<a href="file:///C:/Users/LENOVO/Desktop/web/searchlist.html" target="_top">--><a href="searchlist.html.html"><input type="reset" name="reset" value="查询"  ></a></td>

</tr>

</table>

</div>

</div>

<!-- <div οnclick="window.open(*file:///C:/Users/LENOVO/Desktop/web/register.html.html*,*_self*)"><a href="file:///C:/Users/LENOVO/Desktop/web/register.html.html"><h5 align="center">注册用户</h5></a></div> -->

</body>

</html>

遗尘750
关注
专栏目录
大学生HTML期末大作业——HTML+CSS+JavaScript旅游网站
...
10-09 2705
HTML+CSS+JS【旅游网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
学生HTML个人网页作业作品~蛋糕甜品店铺共11个页面(HTML+CSS+JavaScript)
热门推荐
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-01 3万+
学生HTML个人网页作业作品~ 个人主页博客网页设计制作~ 大学生个人网站作业模板~简单个人网页制作 ~面包店铺电商网站模板html 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，~这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 红色的蛋糕甜品在线预订，面包店铺电
HTML期末大作业——基于HTML+CSS+JavaScript的旅游网站设计与实现
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-23 2万+
HTML期末大作业~基于HTML+CSS+JavaScript的旅游网站设计与实现 HTML期末作业-旅游网页作业HTML+CSS+JavaScript实现，共有登录 首页 预定 套餐 服务 相册 评价 联系我们等页面 旅游网站的页面通常设计得很宽，而且搭配非常有吸引力的图片，目的是为了突出视觉吸引力。今天这篇文章向大家分享最佳旅游网站设计案例，一起欣赏这些精美的网站。 作品演示 1.登录 2.首页 3.预定 4.套餐 5.服务 6.相册 7.评价/联系我们 文件目录 代码实现 头部HTML
web前端期末大作业 ~我的家乡-绿城之都html+css+javascript旅游网页设计实例
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-05 1万+
web前端期末大作业 ~ 我的家乡-绿城之都html+css+javascript旅游网页设计实例 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：绿色简单旅游景点介绍网站，全套模板，包括首页、
HTML期末作业-宠物网
学生期末作业
06-16 2076
HTML期末大作业-宠物网 <html> <head> <title>宠物</title> <link rel="shortcut icon" type="image/x-icon" href="img/upimages/favicon.ico" /> <script type="text/javascript" src="js/comm/jquery.min.js"></script> <s..
Springboot旅游管理系统 08841计算机毕业设计-课程设计-期末作业-毕设程序代做
m0_73418830的博客
12-06 398
Springboot旅游管理系统 08841计算机毕业设计-课程设计-期末作业-毕设程序代做本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：idea eclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数 据 库：MySQL5.7/8.0源码地址：https://pan.baidu.com/s/1YqB0wI47E8EwkVwll80nPg?pwd=36gh最新计算机专业原创开发毕业设计源码+数据
Springboot考试资料管理系统9552s计算机毕业设计-课程设计-期末作业-毕设程序代做
bishe661的博客
11-30 295
Springboot考试资料管理系统9552s计算机毕业设计-课程设计-期末作业-毕设程序代做。JSP基于JSP的美容服务预约系统的设计与实现sqlserver。springboot基于springboot的影视资讯管理系统。springboot基于Springboot的大学宿舍管理系统。springboot基于互联网的图书管理系统—借阅管理子模块。ssm基于web的考试资料交易系统的设计与实现。springboot高校教师科研成果管理系统。springboot演唱会门票订售及管理系统。
Springboot快递代拿系统43l40计算机毕业设计-课程设计-期末作业-毕设程序代做
bishe661的博客
11-30 569
Springboot快递代拿系统43l40计算机毕业设计-课程设计-期末作业-毕设程序代做。前端技术：Layui、HTML、CSS、JS、JQuery等技术。springboot体育用品库存管理系统。ssm基于HTML的“忆红楼梦之味”网站设计与实现。springboot师生共评的作业管理系统。springboot衣橱系统的设计与实现。ssm基于ssm架构的校园二手物品交易。
Springboot奶茶店点餐系统vtj89计算机毕业设计-课程设计-期末作业-毕设程序代做
uikj66的博客
12-06 552
Springboot奶茶店点餐系统vtj89计算机毕业设计-课程设计-期末作业-毕设程序代做本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：idea eclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数 据 库：MySQL5.7/8.0源码地址：https://pan.baidu.com/s/1_ZD1z0g9ebCEWfgCiFfMDg?pwd=3gny最新计算机专业原创开发毕业设计源码+数据
Springboot期刊在线投稿系统74j50计算机毕业设计-课程设计-期末作业-毕设程序代做
m0_73418808的博客
12-06 206
Springboot期刊在线投稿系统74j50计算机毕业设计-课程设计-期末作业-毕设程序代做本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：idea eclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数 据 库：MySQL5.7/8.0源码地址：https://pan.baidu.com/s/1nhrw7pZQqcWCllgscMHgog?pwd=nc99最新计算机专业原创开发毕业设计源码+数
HTML期末大作业
11-24
这是我自己做的HTML期末大作业，花了很多时间，稍加修改就可以作为自己的作业了，而且也可以作为学习参考
html期末大作业
12-18
html期末大作业,可以供选修了html网页的课的同学应付老师……
html期末大作业 html期末大作业
06-01
html期末大作业 html期末大作业
基于HTML的房屋交易网页模板
02-13
该网页模板主要用于网页制作，以及房屋交易网页制作，内含多种网页效果，没有文档，看看学习是没有问题，主要用js来做出效果，是不错的借鉴模板。
房屋出售网站html5模板
05-01
房屋出售网站html5模板，全套模板，DIV+CSS布局，包含index.html，index-1.html，index-2.html，index-3.html，index-4.html，index-5.html，index-6.html，index-7.html等网站模板页面。
大学生HTML期末大作业——HTML+CSS+JavaScript名侦探柯南
最新发布
...
10-26 1786
HTML+CSS+JS【动漫网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
HTML期末学生大作业——基于html+css+javascript+jquery+bootstrap响应式音乐酒吧网站
12-12 317
👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 # 一、👨
HTML期末大作业 ~ 凤阳旅游网页设计作业成品(HTML+CSS+JavaScript)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-30 6458
HTML期末大作业 ~ 大学生网页设计作业成品 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 关于HTML网页设计期末课程大作业实现，大作业A+水平 ~，共有首页 新闻中心 专题回顾 里约热内卢 奥运回顾 等5个页面! 原始HTML+CSS+JS
JavaWeb期末作业-高分学生信息管理系统源码及报告
资源摘要信息:"javaweb期末作业-javaweb 学生信息管理系统源码+报告" 本项目为Java Web技术实现的学生信息管理系统，适合计算机相关专业的学生在进行大作业、课程设计时使用。该系统不仅可以作为期末大作业，同时也...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值