HTML静态网页作业招聘信息网站div+css布局
(来源:网站编辑 2024-11-22 15:11)
文章正文
本网站共四个页面，纯div+css布局，没有js特效，页面分别 为首页、信息页、登陆页、注册页，页面效果比较简单，比较适合用于学生作业，放图和代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="top_link">
<div class="version"> <a href="#">上传简历</a> ｜ <a href="#/">我要找工作hot</a> ｜<a href="#">我要招聘 </a> </div>
</div>
<header class="header">
<section class="logobox">
<div class="logo"> <a href="#"><img src="images/logo.png" width="250"></a> </div>
<div class="searchBox">
<form name="head_search" id="searchFrom" method="GET">
<input type="text" placeholder="搜索" class="searchInput">
<input type="button" value="" class="searchBtn">
</form>
</div>
</section>
</header>
<!-------导航开始-------------------->
<section class="navbox">
<nav class="nav">
<ul>
<li> <a href="index.html">首页</a> </li>
<li> <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>
<li> <a href="#"> 发现</a> </li>
<li> <a href="login.html"> 登陆</a> </li>
<li> <a href="res.html"> 注册</a> </li>
</ul>
</nav>
<!-------导航结束-------------------->
</section>
<div class="main">
<div class="menu">
<ul>
<li>
<strong>技术</strong> <a href="#"> Java </a><a href="#">PHP </a><a href="#">web前端 </a><a href="#">算法工程师</a>
</li>
<li>
<strong>产品</strong> <a href="#">产品经理 </a><a href="#">产品总监 </a><a href="#">数据产品经理</a>
</li>
<li>
<strong>设计</strong> <a href="#">UI设计师 </a><a href="#">平面设计 </a><a href="#">交互设计师</a>
</li>
<li>
<strong>运营</strong> <a href="#">新媒体运营 </a><a href="#">产品运营 </a><a href="#">网络推广</a>
</li>
<li>
<strong> 市场</strong> <a href="#">市场营销 </a><a href="#">市场推广 </a><a href="#">品牌公关 </a><a href="#">策划经理</a>
</li>
<li>
<strong>人事/财务/行政</strong> <a href="#">人力资源专员/助理 </a><a href="#">行政主管</a>
</li>
<li>
<strong> 高级管理</strong> <a href="#">总裁/总经理/CEO </a><a href="#">分公司/代表处负责人</a>
</li>
</ul>
</div>
<div class="banner">
<img src="./images/banner2.jpg" alt="" height="286">
</div>
</div>
<div class="main">
<div class="title">
<h3>热招职位</h3>
</div>
<div class="list">
<ul>
<li>
<div class="subbox">
<a href="detail.html">
<div class="subtop">
<p class="name">前端开发工程师（广州） </p><span class="salary">15-23K</span>
</div>
<p class="job-text">广州5-10年本科</p>
</a>
<div class="commanybox">
<a href="#" class="user-info">
<p><img src="./images/logo1.jpg"></p>
</a>
<a href="#" class="commany-info">
<span>企企通</span>
<span>企业服务</span>
<span>C轮</span>
</a>
</div>
</div>
</li>
<li>
<div class="subbox">
<a href="detail.html">
<div class="subtop">
<p class="name">缓存高级开发工程师
</p><span class="salary">30-60K·16薪</span>
</div>
<p class="job-text">北京3-5年本科</p>
</a>
<div class="commanybox">
<a href="#" class="user-info">
<p><img src="./images/logo2.jpg"></p>
</a>
<a href="#" class="commany-info">
<span>BOSS直聘</span>
<span>
人力资源服务</span>
<span>上市</span>
</a>
</div>
</div>
</li>
<li>
<div class="subbox">
<a href="detail.html">
<div class="subtop">
<p class="name">运营管理 </p><span class="salary">15-23K</span>
</div>
<p class="job-text">滁州3-5年本科</p>
</a>
<div class="commanybox">
<a href="#" class="user-info">
<p><img src="./images/logo3.jpg"></p>
</a>
<a href="#" class="commany-info">
<span>
智学教育
</span>
<span>培训机构</span>
<span>C轮</span>
</a>
</div>
</div>
</li>
<li>
<div class="subbox">
<a href="detail.html">
<div class="subtop">
<p class="name">腾讯在线教育后端开发 </p><span class="salary">15-30K
</span>
</div>
<p class="job-text">深圳经验不限本科</p>
</a>
<div class="commanybox">
<a href="#" class="user-info">
<p><img src="./images/logo4.png"></p>
</a>
<a href="#" class="commany-info">
<span>
腾讯互娱
</span>
<span>游戏</span>
<span>不需要融资</span>
</a>
</div>
</div>
</li>
<li>
<div class="subbox">
<a href="detail.html">
<div class="subtop">
<p class="name">产品专家 </p><span class="salary">15-23K</span>
</div>
<p class="job-text">北京经验不限本科</p>
</a>
<div class="commanybox">
<a href="#" class="user-info">
<p><img src="./images/logo5.jpg"></p>
</a>
<a href="#" class="commany-info">
<span>京东集团</span>
<span>电子商务</span>
<span>已上市</span>
</a>
</div>
</div>
</li>
<li>
<div class="subbox">
<a href="detail.html">
<div class="subtop">
<p class="name">垂类质量效能部_测试开发 </p><span class="salary">15-23K</span>
</div>
<p class="job-text">北京经验不限本科</p>
</a>
<div class="commanybox">
<a href="#" class="user-info">
<p><img src="./images/logo6.png"></p>
</a>
<a href="#" class="commany-info">
<span>
百度 </span>
<span>互联网
</span>
<span>已上市</span>
</a>
</div>
</div>
</li>
<li>
<div class="subbox">
<a href="detail.html">
<div class="subtop">
<p class="name">资深开发工程师/技术专家
</p><span class="salary">15-30K
</span>
</div>
<p class="job-text">深圳经验不限本科</p>
</a>
<div class="commanybox">
<a href="#" class="user-info">
<p><img src="./images/logo4.png"></p>
</a>
<a href="#" class="commany-info">
<span>
腾讯互娱
</span>
<span>游戏</span>
<span>不需要融资</span>
</a>
</div>
</div>
</li>
<li>
<div class="subbox">
<a href="detail.html">
<div class="subtop">
<p class="name">算法工程师 </p><span class="salary">15-23K</span>
</div>
<p class="job-text">北京经验不限本科</p>
</a>
<div class="commanybox">
<a href="#" class="user-info">
<p><img src="./images/logo5.jpg"></p>
</a>
<a href="#" class="commany-info">
<span>京东集团</span>
<span>电子商务</span>
<span>已上市</span>
</a>
</div>
</div>
</li>
<li>
<div class="subbox">
<a href="detail.html">
<div class="subtop">
<p class="name">Python开发工程师 </p><span class="salary">15-23K</span>
</div>
<p class="job-text">北京经验不限本科</p>
</a>
<div class="commanybox">
<a href="#" class="user-info">
<p><img src="./images/logo6.png"></p>
</a>
<a href="#" class="commany-info">
<span>
百度 </span>
<span>互联网
</span>
<span>已上市</span>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<Br>
<Br>
<Br>
<Br>
<div class="footer">
<div class="footmain">
<div class="footbox" style="width: 120px;">
<div class="widget-title">
企业服务
</div>
<div class="foottext">
<ul>
<li> <a href="#">职位搜索 </a> </li>
<li> <a href="#">新闻资讯
</a> </li>
<li> <a href="#">BOSS直聘APP </a> </li>
<li> <a href="#">投资者关系 </a> </li>
</ul>
</div>
</div>
<div class="footbox" style="width: 120px;">
<div class="widget-title">
使用与帮助
</div>
<div class="footblog">
<ul>
<li> <a href="#">协议与规则 </a> </li>
<li> <a href="#">个人信息保护政策
</a> </li>
<li> <a href="#">防骗指南 </a> </li>
<li> <a href="#">使用帮助 </a> </li>
</ul>
</div>
</div>
<div class="footbox" style="width: 120px;">
<div class="widget-title">
招聘频道介绍
</div>
<div class="footblog">
<ul>
<li> <a href="#">北京培训策划招聘</a> </li>
<li> <a href="#">北京磨工招聘 </a> </li>
<li> <a href="#"> 北京培训策划招聘</a> </li>
<li> <a href="#"> 北京模具工招聘</a> </li>
</ul>
</div>
</div>
<div class="footbox">
<div class="widget-title">
联系我们
</div>
<div class="footimg">
<ul>
<li>
<img src="./images/vx.png" alt="">
<p>微信</p>
</li>
<li>
<img src="./images/vx.png" alt="">
<p>微博</p>
</li>
<li>
<img src="./images/vx.png" alt="">
<p>支付宝</p>
</li>
</ul>
</div>
</div>
<div class="footbox">
<div class="widget-title">
关于我们
</div>
<div class="footabout">
<p>BOSS直聘北京招聘频道，展示北京招聘信息，百万Boss在线直聘，直接开聊，在线面试，北京找工作就上BOSS直聘网站或APP。</p>
<p>BOSS直聘北京招聘频道，展示北京招聘信息，百万Boss在线直聘，直接开聊，在线面试，北京找工作就上BOSS直聘网站或APP。</p>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/detail.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="top_link">
<div class="version"> <a href="#">上传简历</a> ｜ <a href="#/">我要找工作hot</a> ｜<a href="#">我要招聘 </a> </div>
</div>
<header class="header">
<section class="logobox">
<div class="logo"> <a href="#"><img src="images/logo.png" width="250"></a> </div>
<div class="searchBox">
<form name="head_search" id="searchFrom" method="GET">
<input type="text" placeholder="搜索" class="searchInput">
<input type="button" value="" class="searchBtn">
</form>
</div>
</section>
</header>
<!-------导航开始-------------------->
<section class="navbox">
<nav class="nav">
<ul>
<li> <a href="index.html">首页</a> </li>
<li> <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>
<li> <a href="#"> 发现</a> </li>
<li> <a href="login.html"> 登陆</a> </li>
<li> <a href="res.html"> 注册</a> </li>
</ul>
</nav>
<!-------导航结束-------------------->
</section>
<div class="detailtitle">
<div class="main">
<h1>前端开发工程师（广州） <span>15-23K</span> <i>五险一金</i><i>带薪年假</i><i> 通讯补贴 </i><i> 节日福利</i><i> 零食下午茶</i></h1>
<h2>广州5-10年本科</h2>
<h3> <span>北京3-5年本科全职招10人</span> </h3>
</div>
</div>
<div class="main">
<div class="jdbxo">
<div class="jdrgtitle">
<h3> 职位描述</h3>
</div>
<div class="zplist">
<div class="zptitle">招聘公司地址</div>
济南市历下区经十路13777号中润广场18栋503室
</div>
<div class="zplist">
<div class="zptitle">招聘职位详情</div>
1、负责网站应用前端开发，与后台工程师协作，完成数据交互、动态信息展现；<Br>
2、维护及优化网站前端页面性能；<Br>
3、参与产品需求的讨论与设计<Br>
4、与产品经理、测试工程师、其他团队沟通合作，保证产品研发工作的质量和进度。
</div>
<div class="zplist">
<div class="zptitle">岗位要求</div>
1、计算机相关专业本科及以上学历，具有5年以上JavaScript语言为主的Web前端开发经验;<Br>
2、 熟练运用主流的JS开发框架，如：jQuery、Zepto、Angular、Vue、React等，熟练掌握前后端分离技术;<Br>
3、 熟悉各主流浏览器的兼容性调试，有相关的性能优化经验，具备良好的编程习惯；<Br>
4、 技术视野广阔，有主导前端技术方案设计的能力和经验，能够独立承担项目开发工作;<Br>
5、 具有一定的业务需求分析能力、问题定位和沟通表达能力;<Br>
6、 具备较强的学习能力和主动性，有良好的时间和流程意识。<Br>
</div>
<div class="zplist">
<div class="zptitle">公司详情介绍</div>
深圳市企企通科技有限公司（简称“企企通”，Shenzhen ELS Technology Co.,
Ltd.）成立于2014年，是一家行业领先的供应链信息化管理和供应链保理产品开发、实施及运维的互联网科技公司，致力于实现企业间的互联互通。
企企通是国家高新技术
</div>
</div>
<div class="zpright">
<div class="jdrgtitle">
<h3> 相关职位</h3>
</div>
<div class="list">
<ul>
<li>
<div class="subbox">
<a href="detail.html">
<div class="subtop">
<p class="name">前端开发工程师（广州） </p><span class="salary">15-23K</span>
</div>
<p class="job-text">广州5-10年本科</p>
</a>
</div>
</li>
<li>
<div class="subbox">
<a href="detail.html">
<div class="subtop">
<p class="name">前端开发工程师（广州） </p><span class="salary">15-23K</span>
</div>
<p class="job-text">广州5-10年本科</p>
</a>
</div>
</li>
<li>
<div class="subbox">
<a href="detail.html">
<div class="subtop">
<p class="name">前端开发工程师（广州） </p><span class="salary">15-23K</span>
</div>
<p class="job-text">广州5-10年本科</p>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<div class="footmain">
<div class="footbox" style="width: 120px;">
<div class="widget-title">
企业服务
</div>
<div class="foottext">
<ul>
<li> <a href="#">职位搜索 </a> </li>
<li> <a href="#">新闻资讯 </a> </li>
<li> <a href="#">BOSS直聘APP </a> </li>
<li> <a href="#">投资者关系 </a> </li>
</ul>
</div>
</div>
<div class="footbox" style="width: 120px;">
<div class="widget-title">
使用与帮助
</div>
<div class="footblog">
<ul>
<li> <a href="#">协议与规则 </a> </li>
<li> <a href="#">个人信息保护政策 </a> </li>
<li> <a href="#">防骗指南 </a> </li>
<li> <a href="#">使用帮助 </a> </li>
</ul>
</div>
</div>
<div class="footbox" style="width: 120px;">
<div class="widget-title">
招聘频道介绍
</div>
<div class="footblog">
<ul>
<li> <a href="#">北京培训策划招聘</a> </li>
<li> <a href="#">北京磨工招聘 </a> </li>
<li> <a href="#"> 北京培训策划招聘</a> </li>
<li> <a href="#"> 北京模具工招聘</a> </li>
</ul>
</div>
</div>
<div class="footbox">
<div class="widget-title">
联系我们
</div>
<div class="footimg">
<ul>
<li>
<img src="./images/vx.png" alt="">
<p>微信</p>
</li>
<li>
<img src="./images/vx.png" alt="">
<p>微博</p>
</li>
<li>
<img src="./images/vx.png" alt="">
<p>支付宝</p>
</li>
</ul>
</div>
</div>
<div class="footbox">
<div class="widget-title">
关于我们
</div>
<div class="footabout">
<p>BOSS直聘北京招聘频道，展示北京招聘信息，百万Boss在线直聘，直接开聊，在线面试，北京找工作就上BOSS直聘网站或APP。</p>
<p>BOSS直聘北京招聘频道，展示北京招聘信息，百万Boss在线直聘，直接开聊，在线面试，北京找工作就上BOSS直聘网站或APP。</p>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/login.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="top_link">
<div class="version"> <a href="#">上传简历</a> ｜ <a href="#/">我要找工作hot</a> ｜<a href="#">我要招聘 </a> </div>
</div>
<header class="header">
<section class="logobox">
<div class="logo"> <a href="#"><img src="images/logo.png" width="250"></a> </div>
<div class="searchBox">
<form name="head_search" id="searchFrom" method="GET">
<input type="text" placeholder="搜索" class="searchInput">
<input type="button" value="" class="searchBtn">
</form>
</div>
</section>
</header>
<!-------导航开始-------------------->
<section class="navbox">
<nav class="nav">
<ul>
<li> <a href="index.html">首页</a> </li>
<li> <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>
<li> <a href="#"> 发现</a> </li>
<li> <a href="login.html"> 登陆</a> </li>
<li> <a href="res.html"> 注册</a> </li>
</ul>
</nav>
<!-------导航结束-------------------->
</section>
<div class="main">
<div class="titlemenu" style="border-bottom: 1px solid #ddd;">
<ul>
<li class="cur" style="border: 1px solid #ddd; border-bottom: 2px solid #fff;">
用户登陆
</li>
</ul>
</div>
<div class="login">
<form class="form sign-up" method="post" action="#" name="form1" id="zhuce" onsubmit="return lymz(this)">
<ul class="ulnop">
<li><span>请输入用户名</span><input class="name " placeholder="请输入用户名" ></li>
<li><span>请输入密码</span><input type="password" class="pass" placeholder="请输入密码" ></li>
<li><span>请输入验证码</span>
<input class="name" placeholder="验证码" style="width:270px;">
<div class="btn_wx"><span id="code">HDuz</span></div>
</li>
<li><button class="btn" type="submit">确认登陆</button></li>
</ul>
</form>
</div>
</div>
<div class="footer">
<div class="footmain">
<div class="footbox" style="width: 120px;">
<div class="widget-title">
企业服务
</div>
<div class="foottext">
<ul>
<li> <a href="#">职位搜索 </a> </li>
<li> <a href="#">新闻资讯 </a> </li>
<li> <a href="#">BOSS直聘APP </a> </li>
<li> <a href="#">投资者关系 </a> </li>
</ul>
</div>
</div>
<div class="footbox" style="width: 120px;">
<div class="widget-title">
使用与帮助
</div>
<div class="footblog">
<ul>
<li> <a href="#">协议与规则 </a> </li>
<li> <a href="#">个人信息保护政策 </a> </li>
<li> <a href="#">防骗指南 </a> </li>
<li> <a href="#">使用帮助 </a> </li>
</ul>
</div>
</div>
<div class="footbox" style="width: 120px;">
<div class="widget-title">
招聘频道介绍
</div>
<div class="footblog">
<ul>
<li> <a href="#">北京培训策划招聘</a> </li>
<li> <a href="#">北京磨工招聘 </a> </li>
<li> <a href="#"> 北京培训策划招聘</a> </li>
<li> <a href="#"> 北京模具工招聘</a> </li>
</ul>
</div>
</div>
<div class="footbox">
<div class="widget-title">
联系我们
</div>
<div class="footimg">
<ul>
<li>
<img src="./images/vx.png" alt="">
<p>微信</p>
</li>
<li>
<img src="./images/vx.png" alt="">
<p>微博</p>
</li>
<li>
<img src="./images/vx.png" alt="">
<p>支付宝</p>
</li>
</ul>
</div>
</div>
<div class="footbox">
<div class="widget-title">
关于我们
</div>
<div class="footabout">
<p>BOSS直聘北京招聘频道，展示北京招聘信息，百万Boss在线直聘，直接开聊，在线面试，北京找工作就上BOSS直聘网站或APP。</p>
<p>BOSS直聘北京招聘频道，展示北京招聘信息，百万Boss在线直聘，直接开聊，在线面试，北京找工作就上BOSS直聘网站或APP。</p>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/login.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="top_link">
<div class="version"> <a href="#">上传简历</a> ｜ <a href="#/">我要找工作hot</a> ｜<a href="#">我要招聘 </a> </div>
</div>
<header class="header">
<section class="logobox">
<div class="logo"> <a href="#"><img src="images/logo.png" width="250"></a> </div>
<div class="searchBox">
<form name="head_search" id="searchFrom" method="GET">
<input type="text" placeholder="搜索" class="searchInput">
<input type="button" value="" class="searchBtn">
</form>
</div>
</section>
</header>
<!-------导航开始-------------------->
<section class="navbox">
<nav class="nav">
<ul>
<li> <a href="index.html">首页</a> </li>
<li> <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>
<li> <a href="#"> 发现</a> </li>
<li> <a href="login.html"> 登陆</a> </li>
<li> <a href="res.html"> 注册</a> </li>
</ul>
</nav>
<!-------导航结束-------------------->
</section>
<div class="main">
<div class="titlemenu" style="border-bottom: 1px solid #ddd;">
<ul>
<li class="cur" style="border: 1px solid #ddd; border-bottom: 2px solid #fff;">
用户注册
</li>
</ul>
</div>
<div class="login">
<form class="form sign-up" method="post" action="#" name="form1" id="zhuce" onsubmit="return lymz(this)">
<ul class="ulnop">
<li><span>请输入用户名</span><input class="name " placeholder="请输入用户名" ></li>
<li><span>请输入密码</span><input type="password" class="pass" placeholder="请输入密码" ></li>
<li><span>确认密码</span><input type="password" class="pass" placeholder="确认密码" ></li>
<li><span>请输入手机号</span><input class="name " placeholder="请输入手机号" ></li>
<li><span>请输入邮箱</span><input class="name " placeholder="请输入邮箱"></li>
<li><span>请输入验证码</span>
<input class="name" placeholder="验证码" style="width:270px;">
<div class="btn_wx"><span id="code">HDuz</span></div>
</li>
<li><button class="btn" type="submit">确认注册</button></li>
</ul>
</form>
</div>
</div>
<div class="footer">
<div class="footmain">
<div class="footbox" style="width: 120px;">
<div class="widget-title">
企业服务
</div>
<div class="foottext">
<ul>
<li> <a href="#">职位搜索 </a> </li>
<li> <a href="#">新闻资讯 </a> </li>
<li> <a href="#">BOSS直聘APP </a> </li>
<li> <a href="#">投资者关系 </a> </li>
</ul>
</div>
</div>
<div class="footbox" style="width: 120px;">
<div class="widget-title">
使用与帮助
</div>
<div class="footblog">
<ul>
<li> <a href="#">协议与规则 </a> </li>
<li> <a href="#">个人信息保护政策 </a> </li>
<li> <a href="#">防骗指南 </a> </li>
<li> <a href="#">使用帮助 </a> </li>
</ul>
</div>
</div>
<div class="footbox" style="width: 120px;">
<div class="widget-title">
招聘频道介绍
</div>
<div class="footblog">
<ul>
<li> <a href="#">北京培训策划招聘</a> </li>
<li> <a href="#">北京磨工招聘 </a> </li>
<li> <a href="#"> 北京培训策划招聘</a> </li>
<li> <a href="#"> 北京模具工招聘</a> </li>
</ul>
</div>
</div>
<div class="footbox">
<div class="widget-title">
联系我们
</div>
<div class="footimg">
<ul>
<li>
<img src="./images/vx.png" alt="">
<p>微信</p>
</li>
<li>
<img src="./images/vx.png" alt="">
<p>微博</p>
</li>
<li>
<img src="./images/vx.png" alt="">
<p>支付宝</p>
</li>
</ul>
</div>
</div>
<div class="footbox">
<div class="widget-title">
关于我们
</div>
<div class="footabout">
<p>BOSS直聘北京招聘频道，展示北京招聘信息，百万Boss在线直聘，直接开聊，在线面试，北京找工作就上BOSS直聘网站或APP。</p>
<p>BOSS直聘北京招聘频道，展示北京招聘信息，百万Boss在线直聘，直接开聊，在线面试，北京找工作就上BOSS直聘网站或APP。</p>
</div>
</div>
</div>
</div>
</body>
</html>
css代码
/* CSS Document */
* {
font-family: "Microsoft YaHei UI", 'microsoft yahei', '微软雅黑';
}
body {
margin: 0;
font-size: 12px;
font-family: "Microsoft YaHei UI", 'microsoft yahei', '微软雅黑';
line-height: 1.5;
color: #333;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
img,
form,
input,
p,
th,
td
{
border: none;
padding: 0;
margin: 0;
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #f60;
text-decoration: none;
}
.logo {
float: left;
}
.top_link {
width: 100%;
background-color: #f1f1f1;
}
.version {
width: 1100px;
margin: 0 auto;
text-align: right;
}
.logobox {
overflow: hidden;
padding: 30px 0 20px 0;
}
.header {
width: 1100px;
margin: 0 auto;
text-align: right;
overflow: hidden;
}
.version {
height: 30px;
line-height: 30px;
text-align: right;
}
.navbox {
height: 42px;
line-height: 42px;
background-color: #F08B3D;
margin-bottom: 20px;
}
.nav {
width: 1100px;
margin: 0 auto;
text-align: right;
overflow: hidden;
}
.nav ul li {
float: left;
width: 100px;
text-align: center;
}
.nav ul li a {
font-size: 16px;
color: #fff;
}
.searchBox {
width: 548px;
margin: 0px 0 0 105px;
float: left;
height: 38px;
border: 2px solid #F08B3D;
position: relative;
border-radius: 2px;
background: #fff;
}
.searchBox .searchInput {
border: none;
line-height: 24px;
height: 24px;
width: 375px;
margin: 7px 0;
float: left;
font-size: 14px;
outline: none;
}
.searchBox .searchBtn {
width: 68px;
height: 42px;
margin: -2px -2px 0 0;
background: #F08B3D url(../images/search.png) no-repeat center;
background-color: #F08B3D;
border: none;
float: right;
font-size: 16px;
color: #fff;
cursor: pointer;
}
.main{ width: 1100px; margin: 0 auto; overflow: hidden;}
.menu{ width:290px; float: left; background-color: #f9f9f9; padding:10px 20px;}
.menu ul li{ line-height: 38px; overflow: hidden; height: 38px;}
.menu ul li strong{ margin-right: 10px;}
.menu ul li a{ margin: 0 10px 0 0; color: #666; }
.title {
padding: 30px 0
}
.title h3 {
text-align: center;
font-size: 20px;
margin-bottom: 10px;
font-weight: 400;
}
.title p {
text-align: center;
color: #888;
margin-bottom: 15px;
}
.list { overflow: hidden;}
.list ul li {
height: 130px;
width: 350px;
float: left;
margin: 0 14px 16px 0;
background: #fff;
border: 1px solid #eef0f5;
}
.subbox {
display: block;
height: 130px;
width: 350px;
padding: 16px 20px;
box-sizing: border-box;
}
.subtop{ overflow: hidden;}
.name {
position: relative;
font-size: 15px;
color: #414a60;
margin-right: 8px;
overflow: hidden;
float: left;
}
.salary{ float: right; color: #f90; font-size: 14px;}
.job-text{ line-height: 40px;}
.user-info img{ width: 30px; height: 30px; float: left; margin-right: 10px;}
.commanybox { border-top: 1px solid #eef0f5; line-height: 30px; padding-top: 12px;}
.commany-info span{ font-size: 14px; margin-right: 10px;}
.footer {
border-top: 5px solid #F08B3D;
color: #888;
overflow: hidden;
padding: 20px 0 0;
}
.footmain {
width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.footbox {
width: 250px;
}
.widget-title {
color: #333;
text-transform: uppercase;
margin-bottom: 25px;
font-size: 14px;
}
.footer a {
color: #888;
}
.foottext img {
padding: 4px;
border: solid 1px #424242;
float: left;
margin-right: 10px;
}
.foottext ul li {
overflow: hidden;
margin-bottom: 20px;
}
.footblog ul li {
line-height: 28px;
}
.footimg {
overflow: hidden;
}
.footimg ul li {
float: left;
margin-right: 20px;
text-align: center;
}
.footimg ul li img {
padding: 4px;
border: solid 1px #424242;
width: 50px;
height: 50px;
}
.footabout p {
line-height: 26px;
margin-bottom: 20px;
}
.foottips {
background: #1b1b1b;
width: 100%;
}
.footlayout {
background: #1b1b1b url(../images/bg-afterfooter.png) center center no-repeat;
width: 1100px;
margin: 0 auto;
height: 90px;
line-height: 90px;
color: #999;
}
原文链接：
