以JSON形式实现前端交互1（BOSS直聘静态）
因为主要是体验以JSON形式实现交互，所以静态页面就随便写写，不要画太多时间去写样式。
此案例设计三个html，一个css下面直接给出代码
首页：index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" type="text/css" href="main.css"/> </head> <body> <div class="container"> <div class="home-header"> <img src="img/home-search-text.png" > <form action="" method=""> <input type="" name="" id="" value="" /> <button type="button">搜索</button> </form> </div> <div class="categories"> <div> <div class="cate-one"> 技术 <img src="img/technology.png" alt=""> </div> <div> <ul> <li><a href="">JavaScript</a></li> <li><a href="">JavaScript</a></li> <li><a href="">JavaScript</a></li> <li><a href="">JavaScript</a></li> <li><a href="">JavaScript</a></li> <li><a href="">JavaScript</a></li> </ul> </div> </div> <div> <div class="cate-one"> 技术 <img src="img/technology.png" alt=""> </div> <div> <ul> <li><a href="">JavaScript</a></li> <li><a href="">JavaScript</a></li> <li><a href="">JavaScript</a></li> <li><a href="">JavaScript</a></li> <li><a href="">JavaScript</a></li> <li><a href="">JavaScript</a></li> </ul> </div> </div> <div> <div class="cate-one"> 技术 <img src="img/technology.png" alt=""> </div> <div> <ul> <li><a href="">JavaScript</a></li> <li><a href="">JavaScript</a></li> <li><a href="">JavaScript</a></li> <li><a href="">JavaScript</a></li> <li><a href="">JavaScript</a></li> <li><a href="">JavaScript</a></li> </ul> </div> </div> </div> <div class="footer"> <p>违法和不良信息举报邮箱：jubao@kanzhun.com</p> <p>违法和不良信息举报邮箱：jubao@kanzhun.com</p> </div> </div> </body> </html>
列表页（list.html）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" type="text/css" href="main.css"/> <title></title> </head> <body> <div class="container"> <div class="list-heaer flex"> <img src="img/technology.png" alt=""> <form action="" method=""> <div class="innner"> <input type="" name="" id="" value="" /> <span>×</span> <button type="button">搜索</button> </div> </form> </div> <div class="filter flex"> <div class="active"> 经验 <ul> <li class="active">不限</li> <li>一年</li> <li>两年</li> <li>三年</li> </ul> </div> <div> 经验 <ul> <li>不限</li> <li>一年</li> <li>两年</li> <li>三年</li> </ul> </div><div> 经验 <ul> <li>不限</li> <li>一年</li> <li>两年</li> <li>三年</li> </ul> </div><div> 经验 <ul> <li>不限</li> <li>一年</li> <li>两年</li> <li>三年</li> </ul> </div><div> 经验 <ul> <li>不限</li> <li>一年</li> <li>两年</li> <li>三年</li> </ul> </div> </div> <div class="job-list"> <ul> <li> <a href="" class="job flex"> <img src="img/technology.png" alt=""> <div class="text"> <div class="title"> 上海宝山 <span>9-12K</span> </div> <div class="company"> 公司：上海青松公司 </div> <div class="props"> <span>上海</span> <span>一年</span> <span>大专</span> </div> </div> </a> </li> <li> <a href="" class="job flex"> <img src="img/technology.png" alt=""> <div class="text"> <div class="title"> 上海宝山 <span>9-12K</span> </div> <div class="company"> 公司：上海青松公司 </div> <div class="props"> <span>上海</span> <span>一年</span> <span>大专</span> </div> </div> </a> </li> <li> <a href="" class="job flex"> <img src="img/technology.png" alt=""> <div class="text"> <div class="title"> 上海宝山 <span>9-12K</span> </div> <div class="company"> 公司：上海青松公司 </div> <div class="props"> <span>上海</span> <span>一年</span> <span>大专</span> </div> </div> </a> </li> </ul> </div> </div> </body> </html>
详情页：(命名:detail.html)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" type="text/css" href="main.css"/> <title></title> </head> <body> <div class="top-seach flex"> <img src="img/technology.png" alt=""> <form action=""> <input type="" name="" id="" value="" /> <button type="button">搜索</button> </form> </div> <div class="jon-info"> <div> <div class="title flex"> <span>Web前端</span> <span class="salary">8K-15K</span> </div> <div class="props flex"> <div> 上海|1-3年|不限。 </div> <div> 发布于7月24日 </div> </div> <div class="tags flex"> <span>VUE</span> <span>VUE</span> <span>VUE</span> </div> </div> </div> <div class="user flex"> <img src="img/technology.png" alt=""> <div> <div class="name "> <span>徐与真</span> <span>感兴趣</span> </div> <div>家事集团.软件工程师</div> <button type="button">立即沟通</button> </div> </div> <div class="job-detail"> <h3>职位描述</h3> <div class="text"> dsadasd </div> </div> <h3>团队介绍</h3> <div class="tags flex"> <span>公司氛围好</span> <span>不打卡</span> <span>领导nice</span> </div> <h3>公司信息</h3> <div class="text"> dasdasddddddddddddddddddddddddddddddddddddddddddddddddd </div> <div class="related-jobs"> <h3>相似职位</h3> <ul> <li> <a href="" class="job flex"> <img src="img/technology.png" alt=""> <div class="text"> <div class="title"> 上海宝山 <span>9-12K</span> </div> <div class="company"> 公司：上海青松公司 </div> <div class="props"> <span>上海</span> <span>一年</span> <span>大专</span> </div> <button type="button">立即沟通</button> </div> </a> </li> <li> <a href="" class="job flex"> <img src="img/technology.png" alt=""> <div class="text"> <div class="title"> 上海宝山 <span>9-12K</span> </div> <div class="company"> 公司：上海青松公司 </div> <div class="props"> <span>上海</span> <span>一年</span> <span>大专</span> </div> <button type="button">立即沟通</button> </div> </a> </li> <li> <a href="" class="job flex"> <img src="img/technology.png" alt=""> <div class="text"> <div class="title"> 上海宝山 <span>9-12K</span> </div> <div class="company"> 公司：上海青松公司 </div> <div class="props"> <span>上海</span> <span>一年</span> <span>大专</span> </div> <button type="button">立即沟通</button> </div> </a> </li> </ul> </div> </body> </html>
三个页面的css:(命名为： main.css)
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
li{
list-style: none;
}
ul{
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
.home-header{
background: url(img/home-bg.png) no-repeat;
text-align: center;
background-size: 100% auto;
}
.home-header > img{
width: 65%;
padding: 2rem;
}
.home-header input{
border: 0;
}
.categories img{
width: 3rem;
height: 3rem;
}
.categories a{
padding: 0.1rem 0.5rem;
background-color: aqua;
text-decoration: none;
border-radius: .3rem;
}
.categories li{
margin-top: .3rem;
list-style: none;
}
.cate-one{
background-color: #00FFFF;
display: flex;
align-items: center;
}
.flex{
display: flex;
justify-content: space-around;
align-items: center;
}
.list-heaer img{
width: 3rem;
}
.list-heaer{
background-color: #00FFFF;
}
.job{
background-color: #00FFFF;
}
.filter>div>ul{
display: none;
}
.filter{
margin: .5rem;
}
.title span{
color: red;
font-size: 30px;
}
.job .props{
font-size: 13px;
}
.job{
padding: .5rem;
margin: .1rem;
}
.top-seach img{
width: 2rem;
}
.top-seach{
background-color: #00FFFF;
}
.jon-info{
margin-top: .2rem;
background-color: #00FFFF;
}
.user{
margin: .5rem;
background-color: #00FFFF;
}
.tags span{
padding: .2rem .3rem;
background-color: #00FFFF;
border-radius: .3rem;
}
页面如下：（真的很丑，单样式不是重点，下一节开始交互）
最简单
