boss直聘网的网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>boss直聘</title>
<style>
*{
margin: 0;
padding: 0;
}
a{
/* 取消超链接下划线 */
text-decoration: none;
}
/* 超链接未点击的颜色 */
.ul1 li a:link{
color:white;
}
/* 鼠标移动到链接上
.ul1 a:hover {
color: chartreuse;
}
鼠标已访问
.ul1 a:visited {
color: coral;
} */
.ul2 li a:link{
color: white;
}
.ul1 {
margin-left:300px;
}
.ul2{
float: right;
margin-right: 300px;
}
header ul li{
margin: 8px;
}
header ul li{
/* 去掉行元素 */
display: inline;
}
header ul{
display: inline;
height: 50px;
/* 垂直居中 */
line-height: 50px;
}
.boss{
font-size:30px ;
font-family: 宋体;
}
.ul1 .boss a:link{
color: rgb(45, 236, 236);
}
.ul1 .shou a:link{
color: rgb(45, 236, 236);
}
header{
background-color: black;
}
.ul2 li button{
background-color: black;
border-color:rgb(45, 236, 236) ;
border-radius: 60px;
color: white;
width: 70px;
height: 25px;
}
.fu{
display: inline;
display: flex;
background-color: #00d7c6;
height: 150px;
}
.fu .fu_left img{
height: 150px;
}
.fu .fu_right .tu{
margin-top: 5%;
}
.fu .fu_right .fr{
margin-top: 5%;
}
.fu .fu_right .fr input{
width: 150px;
height: 30px;
border:0;
}
.fu .fu_right .fr button{
background-color: #00d7c6;
border-color:white ;
color: white;
width: 100px;
height: 30px;
}
.fu .fu_right img{
height: 30px;
}
.fu .fu_right{
margin-left:20% ;
}
.fu .fu_left{
margin-left: 15%;
}
/* mian格式 */
body{
background-color: #f6f6f8;
}
.mian .mian1 input{
width: 40%;
height: 50px;
border:0;
margin-top: 1%;
margin-left: 20%;
}
.mian1 button{
width: 100px;
height: 50px;
color: white;
background-color: #00d7c6;
border: 0;
}
/* mian2格式 */
.mian2{
margin-left: 20%;
}
.mian2 p a{
margin-left: 1%;
}
/* mian3格式 */
.mian3{
display: inline;
display: flex;
margin-top: 1%;
}
.mian3_left{
margin-left: 10%;
background-color: white;
width: 400px;
height: 350px;
}
.mian3_left span{
font-weight: bold;
margin-left: 2%;
margin-top: 2%;
}
.mian3_left a{
font-weight: bold;
margin-left: 2%;
}
.mian3_left a:link{
color: black;
}
.mian3_left hr{
border: cornsilk 1px dotted;
margin-top: 15%;
}
.mian3_left .xian a:link{
color: #00d7c6 ;
}
.mian3_left p{
margin-top: 10%;
}
.mian3_right{
margin-left: 1%;
}
h1{
margin-top: 2%;
margin-bottom: 2%;
text-align: center;
}
.zhu{
height: 60px;
width: 75%;
background-color: white;
text-align: center;
}
.zhu p a{
margin-right: 5%;
line-height: 60px;
}
.zhu p a:link{
color: #00d7c6;
}
.zhu{
margin-left: 10%;
}
.kuai{
margin-left: 10%;
margin-top: 2%;
}
footer{
height: 230px;
width: 100%;
margin-top: 5%;
background-color: white;
}
footer a:link{
color:rgb(139, 138, 138);
}
footer a:visited{
color:rgb(139, 138, 138);
}
footer div{
margin-left: 10%;
}
footer div p a{
margin-right: 10%;
}
footer div p{
margin-top: 2%;
}
.footer2{
margin-top: 2%;
margin-left: 10%;
}
.footer2 a{
margin-left: 5%;
}
.footer2 a:link{
color:rgb(139, 138, 138);
}
.footer2 a:visited{
color:rgb(139, 138, 138);
}
</style>
</head>
<body>
<div>
<header>
<ul class="ul1">
<li class="boss"><a href="#">boss直聘</a></li>
<li class="shou"><a href="#">首页</a></li>
<li><a href="#">职位</a></li>
<li><a href="#">校园</a></li>
<li><a href="#">公司</a></li>
<li><a href="#">APP</a></li>
<li><a href="#">资讯</a></li>
</ul>
<ul class="ul2">
<li><a href="#">上传简历</a></li>
<li><a href="#">我要找工作</a></li>
<li><a href="#">我要招聘</a></li>
<li><button>注册</button></li>
<li><button>登录</button></li>
</ul>
</header>
</div>
<div class="fu">
<div class="fu_left">
<img src="../img/fast-reg.png">
</div>
<div class="fu_right">
<div class="tu">
<img src="../img/boss.png">
</div>
<div class="fr">
<input type="text" value="请输入电话号码">
<input type="text" value="验证码">
<button>登录/注册</button>
</div>
</div>
</div>
<div class="mian">
<div class="mian1">
<!-- <span><select>
<option value="1">职位类型</option>
<option value="2">不限</option>
<option value="2">技术</option>
<option value="2">产品</option>
<option value="2">设计</option>
</select></span> -->
<input type="text" value=" 搜索职位、公司">
<button>搜索</button>
</div>
<div class="mian2">
<p>
<span>热门职位：</span>
<a href="#">java</a>
<a href="#">销售</a>
<a href="#">产品经理</a>
<a href="#">web前端</a>
<a href="#">服务员</a>
<a href="#">行政</a>
<a href="#">iOS</a>
<a href="#">Android</a>
<a href="#">UI设计</a>
<a href="#">产品运营</a>
</ul>
</p>
</div>
<div class="mian3">
<div class="mian3_left">
<p>
<span>技术</span>
<a href="#">java</a>
<a href="#">PHP</a>
<a href="#">web前端</a>
<a href="#">算法工程师</a>
</p>
<p>
<span>产品</span>
<a href="#">产品经理</a>
<a href="#">产品总监</a>
<a href="#">数据产品经理</a>
</p>
<p>
<span>运营</span>
<a href="#">UI设计师</a>
<a href="#">平面设计师</a>
<a href="#">交互设计师</a>
</p>
<p>
<span>市场</span>
<a href="#">市场营销</a>
<a href="#">市场推广</a>
<a href="#">品牌公关</a>
<a href="#">策划经理</a>
</p>
<hr/>
<span class="xian"><a href>显示全部职位</a></span>
</div>
<div class="mian3_right">
<div>
<img src="../img/1.jpg">
<img src="../img/2.jpg">
</div>
<div>
<img src="../img/3.jpg">
<img src="../img/4.jpg">
</div>
</div>
</div>
<h1>热招职位</h1>
<div class="zhu">
<p>
<a href="#">IT-互联网</a>
<a href="#">金融</a>
<a href="#">房地产.建筑</a>
<a href="#">教育培训</a>
<a href="#">娱乐传媒</a>
<a href="#">医疗健康</a>
<a href="#">法律咨询</a>
<a href="#">供应链·物流</a>
</p>
</div>
</div>
</div>
</div>
</div>
<footer>
<div>
<p>
<a href="#">企业服务</a>
<a href="#"> <a href="#">企业服务</a></a>
<a href="#">联系BOSS直聘</a>
</p>
<p>
<a href="#">职位搜索</a>
<a href="#">平台协议</a>
<a href="#">北京有限公司</a>
</p>
<p>
<a href="#">新闻资讯</a>
<a href="#">防骗指南</a>
<a href="#">公司地址 北京市朝阳区太阳宫中路</a>
</p>
<p>
<a href="#">boss直聘APP</a>
<a href="#"> 使用帮助</a>
<a href="#">联系电话：12345555444</a>
</p>
</div>
</footer>
<div class="footer2">
<span>友情链接</span>
<a href="#">北京招聘</a>
<a href="#">上海招聘</a>
<a href="#">广东招聘</a>
<a href="#">杭州招聘</a>
<a href="#">天津招聘</a>
<a href="#">西安招聘</a>
</div>
</body>
</html>
转载自原文链接, 如需删除请联系管理员。
原文链接：boss直聘网页，转载请注明来源！