静态网页——链家

最新推荐文章于 2022-07-20 17:41:48 发布
最新推荐文章于 2022-07-20 17:41:48 发布
阅读量624 收藏 6
点赞数 2
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gjklj/article/details/106865393
版权

页面效果

HTML

<!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="css/6.2css.css">
</head>
<body>
    <header>
        <div class="header_left">
            <a href="" class="logo" ><img src="images/bk/logo.png" style="width: 94px; height: 34px;"></a>
            <div class="location">重庆</div>
        </div>
        
        <div class="header_right">
            <a href="">二手房</a>
            <a href="">新房</a>
            <a href="">租房</a>
            <a href="">海外</a>
            <a href="">商业办公 </a>
            <a href="">小区</a>
            <a href="">百科</a>
            <a href="">◆发布房源</a>
            <a href="">贝壳研究院</a>
            <a href="">下载APP</a>
            <img src="images/bk/user.png" style="width: 26p0x; height: 26px;">
            <a href="">登录</a>
            <span>/</span>
            <a href="">注册</a>
        </div>
           

        <div class="header_center">
            <div class="c1">
                <h2>二手房&nbsp;&nbsp;/&nbsp;&nbsp;租房&nbsp;&nbsp;/&nbsp;&nbsp;新房</h1>
            </div>
            <div class="c2">
                <h1>好房好服务&nbsp;&nbsp; 找房上贝壳</h2>
            </div>
            <div class="c3">
                <a href="">找二手房</a>
                <a href="">找新房</a>
                <a href="">找小区</a>
                <a href="">找租房 </a>
            </div>
            <div class="c4">
                <input  placeholder="请输入区域、商圈或小区名开始找房" style="width: 500px;height: 38px;"  type="text"><button><img src="images/bk/search_btn.png"></button>
            </div>
            <div class="c5">
                <span>重庆二手房热销 88744套</span>
            </div>
            
        </div>
    </header>
    <div class="tro">
        <div class="t1">
            <div class="bt">
                <h2>二手房</h2>
                <div class="bt_h">
                    <span>好房源那么多，我们为你精选</span>
                    <a href="">更多重庆二手房</a>   
                </div>
            </div>
            <div class="nte">
                <div class="js">
                    <div class="js_bj">
                        <a href=""><img src="images/bk/positon.png"></a>
                    </div>
                    <p>江北·大石坝</p>
                    <p>东方港湾</p>
                    <div class="xxjs">
                        <span>3室2厅·122.11平米 </span>
                        <span>130万</span>
                    </div>
                    
                </div>
                <div class="js">
                    <div class="js_bj">
                        <a href=""><img src="images/bk/positon.png"></a>
                    </div>
                    <p>沙坪坝·大学城</p>
                    <p>金科廊桥水乡四组团</p>
                    <div class="xxjs">
                        <span>3室1厅·101.19平米</span>
                        <span>106万</span>
                    </div>
                    
                </div>
                <div class="js">
                    <div class="js_bj">
                        <a href=""><img src="images/bk/positon.png"></a>
                    </div>
                    <p>沙坪坝·大学城</p>
                    <p>贝蒙天地</p>
                    <div class="xxjs">
                        <span>4室2厅·161平米 </span>
                        <span>228万</span>
                    </div>
                    
                </div>
                <div class="js">
                    <div class="js_bj">
                        <a href=""><img src="images/bk/positon.png"></a>
                    </div>
                    <p>九龙坡·谢家湾</p>
                    <p>华宇春江花月</p>
                    <div class="xxjs">
                        <span>2室1厅·78.95平米</span>
                        <span>98万</span>
                    </div>
                    
                </div>
            </div>
        </div>
        <div class="t1">
            <div class="bt">
                <h2>小区精选</h2>
                <div class="bt_h">
                    <span>纵览小区，恋上这座城</span>
                    <a href="">更多重庆小区</a>   
                </div>
            </div>
            <div class="nte">
                <div class="js">
                    <div class="js_bj"></div>
                    <p>江北·大石坝</p>
                    <p>东方港湾</p>
                    <div class="xxjs">
                        <span>3室2厅·122.11平米 </span>
                        <span>130万</span>
                    </div>
                    
                </div>
                <div class="js">
                    <div class="js_bj"></div>
                    <p>沙坪坝·大学城</p>
                    <p>金科廊桥水乡四组团</p>
                    <div class="xxjs">
                        <span>3室1厅·101.19平米</span>
                        <span>106万</span>
                    </div>
                    
                </div>
                <div class="js">
                    <div class="js_bj"> </div>
                    <p>沙坪坝·大学城</p>
                    <p>贝蒙天地</p>
                    <div class="xxjs">
                        <span>4室2厅·161平米 </span>
                        <span>228万</span>
                    </div>
                    
                </div>
                
            </div>
        </div>
    </div>

    
    
</body>
</html>

CSS

body,p{
    margin: 0;
    background-image: url(../images/bk/bg.jpg);
    background-repeat: no-repeat;
    background-position: center 0;
}
header{
    width: 100%;
    height: 600px;
    padding: 50px 100px 0 50px;
}   
header .header_left{
    float: left;
}

header .location{
    float: right;
    width: 40px;
    height: 30px;
    border: 2px solid  white;
    border-radius: 30px;
    font-size: 14px;
    color: white;
    line-height: 30px;
    padding-left: 35px;
    background-image: url(../images/bk/location.png);
    background-repeat: no-repeat;
    background-position: 10px center;
    margin-left: 30px;
    
}

header .header_right{
    padding-left: 1000px;
}
.header_right a{
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: bold;
    margin-right: 15px;
} 
.header_right span{
    color: white;
}  
 header .header_center{
    width: 800px;
    margin-left: 400px;
    overflow: hidden;
    margin-top: 130px;
}
.header_center .c1{
    color: white;
}
.header_center .c2{
    color: white;
    font-size: 32px;
}
.c3 a{
    display: block;
    text-decoration: none;
    color:#333;
    font-size: 16px;
    font-weight: bold;
    float: left;
    margin-left: 18px;

}
.c3 a:nth-child(1){
    color: white;
}
.c3 a:hover{
    color: white;
}
.header_center .c4{
    width: 600px;
    height: 70px;
}
.c4 input{
    float: left;
   margin-top: 20px;
   border: none;
}
.c4 button{
    background-color: rgb(91, 91, 236);
    border: none;
    margin: 0;
    padding: 0;
    float: left;
    margin-top: 20px;
}
.header_center .c5{
    width: 200px;
    height: 28px;
    background-image: url(../images/bk/news.png);
    background-repeat: no-repeat;
    color: white;
    font-size: 14px;
    margin-top: 60px;
}
.c5 span{
    padding-left: 40px;
    line-height: 28px;
}
.tro{
    width: 100%;
    overflow: hidden;
    margin: auto;
}
.tro .t1{
    width: 1210px;
    overflow: hidden;
    margin: auto;
}
.t1 .bt{
    width: 100%;
    overflow: hidden;
    background-image: none;
}
.bt h2{
    font-size: 35px;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
}
.bt .bt_h{
    width: 100%;
    height: 20px;
    margin-bottom: 20px;
}
.bt span{
    font-size: 16px;
    color: #616669;
    float: left;
    font-weight: bold;
    line-height: 20px;
}
.bt a{
    display: block;
    float: right;
    text-decoration: none;
    color: rgb(91, 91, 224);
    line-height: 20px;
}
.bt .nte{
    width: 100%;
    overflow: hidden;
}
.nte .js{
    width: 280px;
    overflow: hidden;
    margin-right: 30px;
    float: left;
}
.js .js_bj{
    width: 280px;
    height: 210px;
    background-image: url(../images/bk/img01.jpg);
    background-repeat: no-repeat;
    position: relative;
    margin-bottom: 15px;
}
.js_bj a{
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}
.js p{
    font-size: 18px;
    font-weight: bold;
    color: #222222;
    background-image: none;
}
.js .xxjs{
    width: 280px;
    height: 20px;
    margin-top: 15px;
}
.js span:nth-child(1){
    float: left;
    font-size: 12px;
    color: #616669;
    line-height: 20px;
}
.js span:nth-child(2){
    float: right;
    font-size: 16px;
    color: #fa5741;
    font-weight: bold;
    line-height: 20px;
}
.js .js_bj:nth-child(2){
    background-image: url(../images/bk/img02.jpg);
}
.js .js_bj:nth-last-child(2){
    background-image: url(../images/bk/img03.jpg);
}
.js .js_bj:nth-last-child(1){
    background-image: url(../images/bk/img04.jpg);
}
.nte .js:nth-last-child(1){
    margin-right: 0;
}

 

gjklj
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
链家网页爬虫_爬虫入门—静态网页(链家北京二手房)
weixin_29612723的博客
12-23 183
1 引言最近写了一些简单的爬虫，感觉到爬虫这个东西实践大于理论，需要实际操作才能体会更深，写下这篇短文，希望给有需要的同学在爬虫入门的时候一点小小的帮助。本文适合具备一定Python基础的同学，需要用到包括列表，循环，函数，文件读写等基础知识，没有接触过Python的同学突击了解一下即可，动手为先。2 环境Python3.6IDE: Pycharm操作系统：Windows3 基础知识本节介绍Req...
链家网页爬虫_分享最近做的一个链家二手房爬虫和对爬到的数据进行可视化分析的案例...
weixin_34014076的博客
02-12 917
本帖最后由 super谦 于 2020-12-4 10:29 编辑# 爬虫部分# 导入必要的包from bs4 import BeautifulSoupimport pandas as pdfrom tqdm import tqdmimport mathimport requestsimport lxmlimport reimport time# 构造url字典area_dic = {#'罗湖区'...
北邮 python 链家二手房静态页面爬取数据
计算机科学与技术专业学生的成长之路
11-18 1025
spider.py import json import scrapy from nxtzx.items import NxtzxItem class NxtzxSpider(scrapy.spiders.Spider): name = "nxtzx" allowed_domains = ["xuetangx.com"] # 请求头 headers = { 'authority': 'www.xuetangx.com', 'method':
链家网站页面
03-08
HTML5+CSS3实现页面布局，JS、jQuery美化页面，登录注册的表单验证
链家网二手房网页仿制
m0_46364435的博客
05-25 419
http://39.97.107.92/%e9%93%be%e5%ae%b6%e7%bd%91%e4%ba%8c%e6%89%8b%e6%88%bf-project/
大型网站首页之链家实现
wyhcczz的博客
09-13 427
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ulife生活-引领你生活</title> <link rel="stylesheet" type="text/css" href="css/public.css"/> <link rel="stylesheet" type="text/css" href="css/index..
静态网页——儿童节作品
06-10
静态网页、6个静态网页\毕业设计作品，比较简单、但很是实用
静态网页制作——微信主页
04-07
根据html工具，完成静态网页的制作——微信主页。是一个练习题，相对原网页简化很多，只保留网页上所有静态的内容。
web大作业 静态网页
01-31
web大作业 静态网页web大作业 静态网页web大作业 静态网页web大作业 静态网页web大作业 静态网页web大作业 静态网页web大作业 静态网页web大作业 静态网页web大作业 静态网页web大作业 静态网页
HTML静态网页作业
02-15
北邮信息网络应用基础HTML静态网页作业，下载后注意修改后使用（@-@）
贝壳主题BLOG网页模板
01-14
贝壳主题BLOG网页模板
仿贝壳房少房产系统网站
03-18
首家百分百开源房少房产系统网站，帮您一站式快速搭建类似58.链家，安居客网站平台 房少房产系统，全网唯一拥有pc端+手机端内外网erp和外网运营的中介系统，适用于房产门户和联盟的多个场景， 拥有新房、二手房、出租房、小区、问答等多套系统满足各类型房产企业电商化发展需求 ； 产品特色： 网站所有信息和软件系统同步，技术方案成熟稳定，支持各类房产中介业务场景，可以方便的进行网站的管理，实现高度的信息化， 帮您一站式快速搭建类似于链家，58，我爱我家，房多多，Q房网， 房天下,等网站平台，提升了企业品牌形象和服务范围，客户可实现在线的房源查询和发布。 建立自己的运营平台，拥有自主的房产电商平台，不仅能够便捷地接收网络订单，还能挖掘更多的潜在客户； 多区域分站平台，系统后台管理员对某区域绑定相对应子域名就能迅速形成一个新的分站系统，快速跨区域扩张自已的业务。 开拓连锁加盟事业，运用系统超强的会员分配权限，可以提供自主运营与加盟运营相结合模式。加盟商的管理权限可以自由分配。 二次开发成其它电商产品，系统源码提供，丰富优秀的源码能支持您迅速二次开发成您所需求的其它产品平台。 房产电商细分门户，根据运营者的需求，可对家新房，二手房、出租、商业地产(商铺与写字档)、楼盘分销等功能模板单独或组合运营。 平台植入广告，吸引客源，增加企业知名度，树立品牌形象，达到互利共赢，专业的网络维护交给我们，您只管专心做好平台运营。
房产中介公司网站HTML5模板
11-29
房产中介公司网站HTML5模板是一款适用于房地产公司或个人销售房产，销售你的别墅，土地，公寓，房子。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
网页HTML代码
12-06
JS+DIV+CSS网页模板
HTML静态网页的设计
07-23
设计的部分效果：https://link2points.blog.csdn.net/article/details/108247231 其它效果：多页面持续背景音，css动画等等
html在线编辑器链家,实战项目练习 ---- 链家二手房数据（清洗与合并篇）
weixin_33548923的博客
05-30 357
前言现在已经学到了数据规整与合并这一章，为了加深对数据分析的理解接下来需要做个小项目练习一下。目的通过项目能够真实的了解到数据分析是做什么的加深对pandas的熟悉程度重新梳理一下目前学到的那些基础知识，查缺补漏前期准备此次项目准备对2018年北京链家网的二手房数据做一次分析数据来源：Python数据科学的公众号工具：暂时还是使用iTerm2，还未找到更合适的开发工具。Sublime Text2目...
Python使用css方式爬去链家网数据写入csv文档
m0_54188335的博客
07-20 378
使用python的resquests模型对链家二手房的数据进行爬取。
python爬取南京市房价_基于python的链家小区房价爬取——仅需60行代码
weixin_39816362的博客
12-04 603
简介首先打开相关网页(北京链家小区信息)。注意本博客的代码适用于爬取某个城市的小区二手房房价信息。如果需要爬取其他信息，可修改代码，链家的数据获取的基本逻辑都差不多。效果展示因为只需要60行左右的代码，所以就不写入excel了，直接在终端打印出来。效果如下，为了展示美观我加了个json.dumps。分析网页用谷歌浏览器打开北京链家小区信息，如果需要其他城市的可以直接替换。首先可以看看我们要爬取的信...
Python爬取链家租房信息
木秀于林 风亦惧之 虽为萤火 亦绽光芒
10-22 1462
Python爬取链家租房信息 兴趣点： 继续练手，今天以石家庄市开发区为例，爬取所有链家在租房屋信息 这种静态网页我已经练了很多了，已经驾轻就熟了 目标网站： 传送门：https://sjz.lianjia.com/zufang/kaifaqu1/ 爬虫大体思路与方法： 大体思路： （1）找到翻页的规律（链家是静态网页，直接看浏览器上方显示的链接就能找到规律） （2）获取我们想要的出租房的信息包括房源、面积、具体地址等，整理到列表中 （3）存储到本地 方法： （1）getHTMLText(url)：页面获取
静态成员 —— 模拟共享书店
最新发布
05-04
好的，让我们来模拟一个共享书店的例子，并使用静态成员来实现。 首先，我们需要一个`Book`类表示书籍，其中包括书名和作者： ```cpp class Book { public: Book(string title, string author) : title_(title), author_(author) {} string getTitle() const { return title_; } string getAuthor() const { return author_; } private: string title_; string author_; }; ``` 接下来，我们需要一个`Bookstore`类来表示书店。我们将使用静态成员变量来存储所有书籍的列表。每当有新书加入或旧书出售时，这个列表都会被更新。 ```cpp class Bookstore { public: static void addBook(const Book& book) { books_.push_back(book); } static void sellBook(const Book& book) { for (auto it = books_.begin(); it != books_.end(); ++it) { if (it->getTitle() == book.getTitle() && it->getAuthor() == book.getAuthor()) { books_.erase(it); break; } } } static void printBooks() { cout << "Books in stock:" << endl; for (const auto& book : books_) { cout << book.getTitle() << " by " << book.getAuthor() << endl; } } private: static vector<Book> books_; }; vector<Book> Bookstore::books_; ``` 在这个例子中，`books_`是一个静态成员变量，它是一个`vector`，存储所有在书店中的书籍。 现在我们可以使用`Bookstore`类来添加、出售和打印书籍。下面是一个例子： ```cpp int main() { Bookstore::addBook(Book("The Great Gatsby", "F. Scott Fitzgerald")); Bookstore::addBook(Book("To Kill a Mockingbird", "Harper Lee")); Bookstore::addBook(Book("1984", "George Orwell")); Bookstore::printBooks(); Bookstore::sellBook(Book("To Kill a Mockingbird", "Harper Lee")); Bookstore::printBooks(); return 0; } ``` 输出： ``` Books in stock: The Great Gatsby by F. Scott Fitzgerald To Kill a Mockingbird by Harper Lee 1984 by George Orwell Books in stock: The Great Gatsby by F. Scott Fitzgerald 1984 by George Orwell ``` 可以看到，我们成功地使用了静态成员变量来存储所有书籍的列表，并在添加和出售书籍时更新了它。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值