大伙儿晚上今天又到了咱分享实践记录的时间了。今儿个我折腾了个啥？就是这个《城市家园官方网站》。也不算啥官方的，就是我自己瞎琢磨，想把一些零散的信息给它归拢归拢，整个像模像样的页面出来。
起初的想法
是这么回事，我发现，这“城市家园”，到处都有，名字都差不多，但实际上，位置、价格、年代，那真是五花八门。有时候想查个具体信息，东一个犄角旮旯找点，西一个犄角旮旯看点，太费劲了。我就寻思，能不能把这些信息都弄到一个地方，一目了然？说干就干！
动手收集信息
第一步，那肯定是把这些乱七八糟的信息给它捋顺了。我就到处翻了翻，你还别说，真不少。比如我看到有说“城市家园 广场路87号”，价格是七千出头一平，在售的房子有二十来套。然后又看到一个“城市家园 北七马路14号”，这个就便宜点，五千多一平，房子没几套在卖。还有那个“振兴西路”的，好家伙，一万多一平，在售的五十多套。建造年代也是跨度挺大，有的是2000年左右的，也有的是2017、2018年比较新的，像那个“洪家南环路”的，就挺新，价格也到了一万四还多。
我把这些信息，像什么：
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
- 小区名字（虽然都叫城市家园，但路名不一样）
- 具体位置
- 大概的房价（元/平）
- 跟上个月比是涨了还是跌了（虽然这个数据老变，但做个参考）
- 在售房源数量
- 建造年代
- 建筑类型（什么小高层，高层，板楼）
- 产权性质（商品房还是经济适用房啥的）
这些都给它一条条记下来。这个过程挺枯燥的，就跟整理屋子似的，得有耐心。
规划网站结构
信息有了，就得琢磨网站怎么展示了。我寻思着，这网站嘛不用搞得太花里胡哨，关键是信息要清楚，人家一看就能找到自己想要的。
我就计划着，首页肯定得有个大概的介绍，让大家知道这个网站是干啥的。然后得分几个主要板块：
小区概览：这里面就放每个“城市家园”的基本情况，比如建造年代、建筑类型、物业是啥样的。把那些不同路段的“城市家园”都列出来，比如广场路的、七马路的、振兴西路的、洪家南环路的，各自的基本信息都摆上。
在售房源：这个板块就重要了，把每个小区当前有多少套房子在卖，参考均价是多少，都列出来。比如“广场路87号，在售房源23套，均价7310元/平”，“振兴西路那个，在售房源54套，均价10134元/平”。让想了解的人有个直观的感受。
户型信息：本来还想加个这个，放点什么三居四居，面积多大，比如有的地方写着建面155-182平。不过这个信息收集起来比较麻烦，这回就先放放。
基本上就是这么个思路，简单直接。
开始搭建页面
接下来就是实际动手做了。我没用啥复杂的技术，就是最基础的HTML和CSS，把文字和数据给它码上去。先把整体框架搭起来，导航栏、内容区、页脚这些。然后一个一个页面地做。
比如做“小区概览”页面，我就把收集到的“城市家园 广场路87号”的信息，像建造年代2000年-2017年，建筑类型小高层，交易权属商品房/经济适用房这些，一条条填进去。再比如“城市家园 北七马路14号”，建造年代1996年-2010年，小高层，商品房，这些信息也都对应放力求每个小区的信息都准确。
在“在售房源”那里，我也是把各个小区目前大概有多少套在售，以及参考价格写清楚。有的地方还提到了绿化率，产权年限50年，这些能找到的，我也尽量给它加上。
整个过程就是不断地复制、粘贴、排版。中间也遇到些小麻烦，比如有的信息不全，或者有的信息相互有点矛盾，我就尽量找个看起来最靠谱的写上去，或者干脆空着，以后再补。
的效果与反思
搞得差不多了，我就自己先点点看，在浏览器里打开，看看排版顺不顺眼，信息有没有错漏。虽然只是个静态页面，也没啥酷炫的交互，但看着自己把一堆零散信息整理得井井有条，还是挺有成就感的。
现在这个“城市家园官方网站”的雏形算是出来了，主要就是信息展示。大家可以通过这个页面，对不同地方的“城市家园”小区有个大概的了解。比如你想知道广场路那个怎么样，点进去就能看到它的基本情况和房源信息。想对比一下振兴西路和洪家南环路的，也能很方便地切换查看。
这只是个开始，以后有空了，说不定还能再加点图片、地图定位啥的，让它更丰满一些。或者再把数据弄得更动态一点，不过那就得学更多东西了，哈哈。
行了，今天就先分享到这。这回实践主要是体验了一把信息收集、整理和前端展示的过程，挺有意思的。希望能给大伙儿一点启发。下次再有啥好玩的实践，再来跟大家唠！
