拉钩网前端项目实战
文章目录
拉钩网前端项目实战03
search和banner部分设计
一、search部分设计
1.html部分
<div class="search">
<div class="searCon main">
<div class="sear">
<input type="text" placeholder="搜索公司，搜索职位或地点" class="searchInp fl">
<a href="" class="btn fl">搜索</a>
</div>
<ul class="searList clearFixed">
<li><a href="">热门搜索：</a></li>
<li><a href="">24小时极速入职</a></li>
<li><a href="">名企校招早班车</a></li>
<li><a href="">Java面试</a></li>
<li><a href="">架构设计</a></li>
<li><a href="">数据分析</a></li>
<li><a href="">PHP</a></li>
<li><a href="">C++</a></li>
</ul>
</div>
</div>
2.css部分
.search {
height: 132px;
background: #f2f5f4;
.searCon {
height: 102px;
padding-top: 30px;
.sear {
width: 937px;
height: 47px;
margin-left: 133px;
.searchInp {
width: 794px;
height: 45px;
border: 1px solid #e8e8e8;
}
.btn {
width: 141px;
height: 47px;
line-height: 47px;
text-align: center;
color: #fff;
font-size: 18px;
background: #00b38a;
}
}
.searList {
margin-left: 133px;
font-size: 12px;
height: 38px;
line-height: 38px;
li {
float: left;
a {
color: #00c1cc;
padding: 0 11px;
}
}
:first-child {
a {
color: #778ab9;
padding: 0;
}
}
}
}
}
二、banner部分设计
1.html部分
<div class="banner">
<div class="banCon main clearFixed">
<div class="banLeft fl">
<ul class="banList">
<li>
<a href="">技术</a>
<a href="">Java</a>
<a href="">PHP</a>
<a href="">区块链</a>
<span class="fr">></span>
</li>
<li>
<a href="">技术</a>
<a href="">Java</a>
<a href="">PHP</a>
<a href="">区块链</a>
<span class="fr">></span>
</li>
<li>
<a href="">技术</a>
<a href="">Java</a>
<a href="">PHP</a>
<a href="">区块链</a>
<span class="fr">></span>
</li>
<li>
<a href="">技术</a>
<a href="">Java</a>
<a href="">PHP</a>
<a href="">区块链</a>
<span class="fr">></span>
</li>
<li>
<a href="">技术</a>
<a href="">Java</a>
<a href="">PHP</a>
<a href="">区块链</a>
<span class="fr">></span>
</li>
<li>
<a href="">技术</a>
<a href="">Java</a>
<a href="">PHP</a>
<a href="">区块链</a>
<span class="fr">></span>
</li>
<li>
<a href="">技术</a>
<a href="">Java</a>
<a href="">PHP</a>
<a href="">区块链</a>
<span class="fr">></span>
</li>
</ul>
</div>
<div class="banRight fr">
<div class="banImgBox">
<img src="img/banner.JPG" alt="" class="banImg">
</div>
<span class="btnLeft"><</span>
<span class="btnRight">></span>
</div>
</div>
</div>
2.css部分
.banner {
.banCon {
padding-top: 46px;
.banLeft {
width: 300px;
.banList {
font-size: 12px;
li {
margin-bottom: 33px;
a {
padding: 0 13px;
color: #555555;
:first-child {
font-size: 17px;
padding: 0;
}
}
span {
font-family: '宋体';
margin-top: 5px;
color: #555555;
}
}
}
}
.banRight {
position: relative;
width: 840px;
height: 347px;
.banImgBox {
width: 840px;
height: 347px;
.banImg{
width: 100%;
height: 100%;
}
}
span{
position: absolute;
top:50%;
margin-top: -17px;
width: 22px;
height: 34px;
font-size: 34px;
color: #000;
font-family: '宋体';
font-weight: blod;
}
.btnRight{
right: 20px;
}
.btnLeft{
left: 20px;
}
}
}
}
设计结果图
