購(gòu)房App搜索界面
1. 效果圖
購(gòu)房App搜索界面效果圖1.png
購(gòu)房App搜索界面效果圖2.png
2. 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#search{
/*position: fixed;
margin-bottom: 200px;*/
padding-bottom: 10px;
border: 0;
border-bottom: 1px solid rgb(150,150,150);
}
select{
border: 0;
width: 100px;
font-size: 24px;
}
input{
width: 450px;
height: 35px;
vertical-align: middle;
border: 0;
background-color: rgb(210,210,210);
text-align: center;
}
#recommend{
font-size: 30px;
padding-top: 10px;
padding-left: 4px;
}
#box1{
float: left;
width: 200px;
height: 150px;
/*background-color: lawngreen;*/
}
#box2{
float: left;
width: 350px;
height: 150px;
/*background-color: blueviolet;*/
position: relative;
}
h3{
margin-top: -3px;
margin-left: 4px;
/*vertical-align: top;*/
/*background-color: aquamarine*/
}
#div1{
position: absolute;
bottom: 30px;
}
span{
margin-left: 9px;
margin-right: 1px;
/*position: absolute;
bottom: 20px;*/
}
font{
color: rgb(150,150,150);
margin-left: 4px;
/*position: absolute;
bottom: 30px;*/
}
p{
margin-left: 4px;
color: red;
/*vertical-align: bottom;*/
position: absolute;
bottom: -20px;
/*background-color: black;*/
font-size: 20px;
}
</style>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="search">
<select name="">
<option value="">成都</option>
</select>
<input type="" name="" id="" value="" placeholder="找工作 找房子 找服務(wù)"/>
</div>
<div id="recommend">
推薦
</div>
<!--<div id="box1">
<img src=""/>
</div>
<div id="box2">
<h3 class="h3">阿斯頓發(fā)</h3>
<div id="div1">
<font id="f1"></font><span>|</span>
<font id="f2"></font><span>|</span>
<font id="f3"></font>
</div>
<p id="p1"></p>
</div>-->
<script>
$.ajax({
url:'http://rap2api.taobao.org/app/mock/177073/houseList',
type: 'get',
async: true,
dataType: 'json',
success:function(result){
console.log(result)
console.log(result.datalist.length)
for (var x=0; x<result.datalist.length; x++){
boxNode = $('<div class="firstBox'+x+'"></div>')
//創(chuàng)建圖片區(qū)域標(biāo)簽
box1Node = $('<div id="box1" class="box'+x+'Class"></div>')
box1Node.append($('<img src=""/>'))
//創(chuàng)建文字區(qū)域標(biāo)簽
box2Node = $('<div id="box2" class="box'+x+'"></div>')
box2Node.append($('<h3 class="h'+x+'"></h3>'))
//創(chuàng)建小區(qū)酵镜、戶型、面積
divNode = $('<div id="div1"></div>')
divNode.append('<font id="f1" class="f'+x+'"></font><span>|</span><font id="f2" class="f'+x+'"n><font id="f3" class="f'+x+'"></font>')
box2Node.append(divNode)
box2Node.append($('<p id="p1" class="p'+x+'"></p>'))
boxNode.append(box1Node)
boxNode.append(box2Node)
$('script').before(boxNode)
//給標(biāo)簽添加內(nèi)容
$('.h'+x).text(result.datalist[x].title)
$('.f'+x).text(result.datalist[x].name)
$('.f'+x).text(result.datalist[x].type)
$('.f'+x).text(result.datalist[x].area+"平方米")
$('.p'+x).text(result.datalist[x].price)
$('.box'+x+'Class img').attr('src', result.datalist[x].image)
boxNode.css({"width": "100%", "overflow": "hidden","padding":"20px","border": "0","border-bottom":"1px solid rgb(150,150,150)"})
}
// $('.h3').text(result.datalist[0].title)
// $('.f1').text(result.datalist[0].name)
// $('.f2').text(result.datalist[0].type)
// $('.f3').text(result.datalist[0].area+"平方米")
// $('.p1').text(result.datalist[0].price)
// $('.box1 img').attr('src', result.datalist[0].image)
}
})
</script>
</body>
</html>
