使用bootstrap制作房屋网站的静态页面

最新推荐文章于 2022-11-02 19:47:35 发布
最新推荐文章于 2022-11-02 19:47:35 发布
阅读量657 收藏 11
点赞数 3
分类专栏： css bootstrap 文章标签： css html bootstrap css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuawa/article/details/114068128
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #nav-link .nav-link{
            color: aliceblue;
            opacity: 0.5;
        }
        #nav-link .nav-link:hover{
            color: aliceblue;
            opacity: 1;
            font-size: 18px;
        }
        .nav-item p{
            font-size: 24px;
            opacity: 0.5;
        }
        .nav-item select{
            height: 35px;
            margin-top: 10px;
            text-align: center;
        }
        #navbar-nav .nav-link{
            color: black;
            opacity: 0.8;
            font-size: 18px;
            margin-top: -12px;
        }
        #navbar-nav .nav-link:hover{
            opacity: 1;
            color: deepskyblue;
        }
        .content{
            width: 100%;
            height: 400px;
            background-image: url('../static/img/img2.jpg');
            background-repeat: no-repeat;
            background-size: auto;
        }
        #col-2{
             height: 400px;
        }
        #col-2 select{
            margin: 15px;
        }
        #col-2 button{
            margin: 5px 15px;
            width: 200px;
        }
        #col-2 .bg{
            width: 100%;
            height: auto;
        }
        .bg img{
            width: 100%;
            height: auto;
            margin: 0 15px;
            opacity: 1;
        }
        #search{
            width: 100%;
            height: 400px;
            
            margin-left: 5px;
        }
        #search input{
           width: 180px;
        }
        #search form{
            margin-top: 40px;
        }
        #search span{
            font-size: 14px;
        }
        #search p{
            margin-top: 20px;
        }
        .col-7{
            width: 110%;
            height: 400px;
            background-image: url('../static/img/bg2.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        #loufang h1{
            text-align: center;
            margin: 15px 0;
        }
        
        .card{
            margin-bottom: 25px;
        }

        .card img{
            width: 100%;
            height: 150px;
            margin: 5px;
        }
       footer{
           text-align: center;
       }
    </style>
</head>


<body>
    <nav class="navbar navbar-expand-sm bg-dark" style="margin: 0px; justify-content: space-between;">
        <div class="container" id="nav-link">
            <ul class="navbar-nav">
                <li class="nav-item">
                <a class="navbar-brand" href="#" style="color:whitesmoke;">首页</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">二手房</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">新房</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">租房</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">海外</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">装修</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">商业办公</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">小区</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">百科</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">房价</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">发布房源</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">找房App</a>
                </li>
            </ul>
            <!--  -->
            <ul class="navbar-nav">
                <li class="nav-item ">
                    <a class="nav-link" href="#">登陆</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="#">注册</a>
                </li>
            </ul> 
        </div>      
    </nav>
    <div class="container" id="nav">
        <nav class="navbar navbar-expand-sm justify-content-between">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="#" style="font-size: 24px;"><i class="fa fa-envelope-open mr-2" aria-hidden="true" ></i>蜗壳找房</a>
              </li>
              <li class="nav-item">
                <p class="nav-link" href="#" >|</p>
              </li>
              <li class="nav-item">
                <form>
                    <div class="form-group">
                        <select class="form-control" id="sel1">
                            <option>广州</option>
                            <option>深圳</option>
                            <option>北京</option>
                            <option>上海</option>
                        </select>
                    </div>
                </form>
              </li>
            </ul>
            
            <ul class="navbar-nav" id="navbar-nav">
                <li class="nav-item">
                  <a class="nav-link active" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">楼盘</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">在售</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">地图找房</a>
                </li>
            </ul>
            <ul class="navbar-nav">       
                <li class="nav-item" style="color: rgba(9, 99, 202, 0.979);">
                    <p style="font-size: 18px;margin-top: 8px;"><i class="fa fa-phone mr-2" aria-hidden="true"></i>客服热线 10086</p>
                </li>
            </ul>
        </nav>
    </div>
    <div class="content">
        <div class="container-fuild"></div>
        <div class="row">
            <div class="col-5">
                <div class="row">
                    <div class="col-5" id="col-2">
                        <form>
                            <div class="form-group">
                                <select class="form-control" id="sel1" style="width: 40%;">
                                    <option>广州</option>
                                    <option>深圳</option>
                                    <option>北京</option>
                                    <option>上海</option>
                                </select>
                            </div>
                        </form>
                        <button class="btn btn-danger" >
                            地图找房
                        </button>
                        <div class="bg" >
                            <img src="./img/img1.png">
                        </div>
                    </div>
                    <div class="col-5" id="search" style="float: right !important;">
                        <form>
                            <div class="input-group mb-3">
                              <input type="text" class="form-control" placeholder="楼盘/关键字">                  
                                <button class="btn btn-light"><i class="fa fa-search" aria-hidden="true"></i></button>
                            </div>
                        </form>
                        <span class="text-success">推荐搜索：<span class="text-light">招商·臻珑府  中铁诺德·逸府   广东第二师范学院·教师公寓</span></span>
                        <p class="text-white">试试找房条件:</p>
                        <form id="searchDetial">
                            <div class="form-group" >
                                <select class="form-control" id="sel1">
                                    <option>地铁</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <select class="form-control" id="sel1" >
                                    <option>户型</option>
                                </select>
                            </div>
                            <button class="btn btn-danger" style="width: 100%;">筛选楼房</button>
                        </form>
                    </div>
                </div>
               
            </div>
              
            <div class="col-7" id="bg-img">
               
            </div>
        </div>
    </div>
    <div class="container" id="loufang">
        <h1>精选楼盘</h1>
        <div class="row">
            <div class="col-6">
                <div class="card">
                    <div class="row">
                        <div class="col-6"><img src="../static/img/loufang1.jpg" ></div>
                        <div class="col-6" >
                            <h3>海淀幸福里</h3>
                            <span class="badge badge-primary">在售</span>
                            <span>|<span class="text-muted"> 住宅</span></span>
                            <span>海淀/海淀北部新区</span>
                            <br>
                            <br>
                            <span class="text-danger" style="font-size: 18px;">均价 80000元/平</span>
                            <span class="text-muted">建面98-195m²</span>
                        </div>
                    </div>     
                </div>
            </div>
            <div class="col-6">
                <div class="card">
                    <div class="row">
                        <div class="col-6"><img src="../static/img/loufang2.jpg" ></div>
                        <div class="col-6" >
                            <h3>熙红印</h3>
                            <span class="badge badge-primary">在售</span>
                            <span>|<span class="text-muted"> 住宅</span></span>
                            <span>大兴/西门红</span>
                            <br>
                            <br>
                            <span class="text-danger" style="font-size: 18px;">均价 64400元/平</span>
                            <span class="text-muted">建面65-135m²</span>
                        </div>
                    </div>  
                </div>
            </div>
            <div class="col-6">
                <div class="card">
                    <div class="row">
                        <div class="col-6"><img src="../static/img/loufang3.jpg" ></div>
                        <div class="col-6" >
                            <h3>公园十七区</h3>
                            <span class="badge badge-primary">在售</span>
                            <span>|<span class="text-muted"> 住宅</span></span>
                            <span>顺义/后沙谷</span>
                            <br>
                            <br>
                            <span class="text-danger" style="font-size: 18px;">均价 55711元/平</span>
                            <span class="text-muted">建面90-144m²</span>
                        </div>
                    </div>  
                </div>
            </div>
            <div class="col-6">
                <div class="card">
                    <div class="row">
                        <div class="col-6"><img src="../static/img/loufang4.jpg" ></div>
                        <div class="col-6" >
                            <h3>海淀幸福里</h3>
                            <span class="badge badge-primary">在售</span>
                            <span>|<span class="text-muted"> 住宅</span></span>
                            <span>亦庄开发区/通州其他</span>
                            <br>
                            <br>
                            <span class="text-danger" style="font-size: 18px;">均价 47000元/平</span>
                            <span class="text-muted">建面57-139m²</span>
                        </div>
                    </div>  
                </div>
            </div>
        </div>
        <hr>
    </div>
    <footer>
        <p>Posted by:###</p>
        <p>Contact information: <a href="mailto:#####.com">#####.com</a>.</p>
    </footer>
</body>
</html>

浏览效果
预览效果

wuawa
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap开发的一个静态网页模板(带后台)
11-09
Bootstrap开发的一个静态网页模板(带后台),有资讯,android源码分享,后台等一些模块。
使用Bootstrap创建静态介绍古典art和music的网页（学习笔记1）
房森的博客
02-20 845
项目背景、技术栈 这是一个普及Classical art的英文网页 它包括html主文件和CSS,imagines,js,video等文件，通过Vs code自带的库，导入合适的CSS等资源，建立了完善的英文网页。 它拥有导航、各种形式的表格、多样化的插件及功能，静态网页元素（容器 网格系统 文字排版 颜色 表格 图像形状 Jumbotron 信息提示框 按钮 按钮组 分页 列表组） 项目介绍 这个项目我们是用bootstrap4创建了一个静态的，暂时无法轻易变化的网页。网站的主题是介绍...
bootstrap的整套框架的html静态页面示例集合
10-23
bootstrap的整套框架的html静态页面示例集合，包括所有bootstrap控件及样式，是辅助开发的好资料，绝对不坑，物有所值。
基于jQuery和Bootstrap完成一个静态页面
paterl的博客
11-02 677
jQuery实现具有增删改查的静态页面
Bootstrap后台管理框架--静态页面
08-29
漂亮后台管理界面框子，简洁响应式的Bootstrap后台管理系统模板，下载下来可以很快的通过它，搭建起你的后台管理系统的界面，简单易用，快来试试吧！
基于Bootstrap的响应式静态网站设计源码
04-17
本项目是基于Bootstrap开发的响应式静态网站设计源码，主要使用CSS进行开发。项目共包含26个文件，其中CSS样式文件5个，JPG图片文件5个，MAP文件4个，JavaScript源代码文件3个，PNG图片文件2个，Markdown文档文件1个...
网页设计成品DW静态网页Html5响应式css3——电影网站bootstrap制作(4页d
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
基于Bootstrap的静态网页设计作业.zip
最新发布
06-08
基于Bootstrap的静态网页设计作业.zip基于Bootstrap的静态网页设计作业.zip基于Bootstrap的静态网页设计作业.zip基于Bootstrap的静态网页设计作业.zip基于Bootstrap的静态网页设计作业.zip基于Bootstrap的静态网页...
bootstrap模仿SCDN网站静态页面
05-07
在这个项目中，“bootstrap模仿SCDN网站静态页面”意在利用Bootstrap的强大功能来重现SCDN（内容分发网络）网站的用户界面。SCDN网站可能是一个提供网络资源分发、优化加载速度的服务平台，其页面设计通常注重清晰的...
简约自适应bootstrap网站后台html静态模板
12-04
这个"简约自适应bootstrap网站后台html静态模板"正是基于Bootstrap构建，旨在为网站后台提供一个简洁、易于操作的界面设计。下面我们将深入探讨这个模板所涉及到的主要技术点和功能模块。 1. **Bootstrap框架**：...
一套超酷炫的bootstrap静态模板
08-28
一套超酷炫的bootstrap静态模板，不知道如何上传截图，否则可以有个预览图
生成html静态网页
04-24
生成html静态网页
bootstrap写的商务网站，纯属静态页面html5
05-07
基于bootstap写的静态网页，响应式布局，值得借鉴 基于bootstap写的静态网页，响应式布局，值得借鉴
Bootstrap网站：Bootstrap 5网站设计
02-16
Bootstrap网站 -Bootstrap 5 ve Bootstrapikonlarıkullanılarakminumum harici Cssyardımıylahazırlanmışwebsitesi- //ozc9n.github.io/BootstrapWebsite/
基于Bootstrap的网页设计实例
01-21
废话不多说了，直接给大家贴代码了，具体代码如下所示： <%@ page language=java contentType=text/html; charset=UTF-8 pageEncoding=UTF-8%> <!DOCTYPE html > <html> <head> <meta http-equiv=Content-Type content=text/html; charset=UTF-8> <meta http-equiv=X-UA-Compatible content=IE=edge> <meta name=viewport content=
『前端学习实例』 静态网页（Bootstrap）
猪窝
07-16 1422
参考视频：【极客学院】一周学会Bootstrap 官方文档： Bootstrap 中文文档 · Bootstrap 是世界上最流行的、移动设备优先的、响应式前端开发框架。 文章目录文件目录结果展示源代码index_test1.htmlindex_test1_css.css 文件目录 根目录 源代码文件 index_test1.html index_test1_css.css 文件夹 image 包含图片 css 包含bootstrap样式 结果展示 源代码 index_test1.html &
基于bootstrap的纯静态网站目录
weixin_30544657的博客
03-04 424
一、博客页面 二、登陆页面 三、信息采集 四、管理后台 五、网站汇总（基于上边四个功能） 因为样式统一采用bootstrap的样式，所以不做介绍 样式导入可以将bootstrap下载至本地（有自动补齐功能） 或者是直接采用cdn（建议操作熟练之后采用cdn引入） 转载于:https://www.cnblogs.com/52-qq/p/8503834.html...
【Bootstrap实战】用Bootstrap实战写一个完整的商城科技网站(源码附上~)
go
03-22 4345
直入主题~~看效果图: 前言: 页面自己设计的,用Bootstrap布局写一个完整的科技网站静态首页页面,所用技术是前端:html+css+js+bootstrap,通过页面实战来运用前端框架Bootstrap,从而对其有更好的运用和了解~~ ...
用Bootstrap和CSS写一个静态网页-详细过程
享受旅行中的VIP快乐
02-26 2866
第一次详细的写过程，要是觉得有帮助的话，记得一键三连哦 静态网页的编写其实是比较容易的，但是当真正熟悉过程后，会对问题的分析能力有很大的提升，知道从整体的角度来分析问题，当拿到一个项目后，如何从宏观的角度分析，让问题分成几部分细小的部分，然后逐个击破，而且从”粗“到”细“更加有利于我们对项目的理解。 目录 1.定义容器和行（总体分析） 第一部分 第二部分 第三部分 2.定义元素部分（实现） 第...
bootstrap制作静态页面
11-13
要使用 bootstrap 制作静态页面，首先需要引入 bootstrap 的 CSS 文件和 JavaScript 文件，可以通过 CDN 或下载文件的方式引入。然后，在 HTML 文件中使用 bootstrap 的类来构建页面的结构和样式。 在创建页面布局...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值