HTML静态网页作业招聘信息网站div+css布局

最新推荐文章于 2023-07-30 10:22:16 发布
最新推荐文章于 2023-07-30 10:22:16 发布
阅读量6.4k 收藏 90
点赞数 18
分类专栏： Dreamweaver作业 网页作业 html网页 文章标签： css html html5
原文链接：https://www.zuoyehome.com/htmlweb/42.html
版权

  本网站共四个页面，纯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;
}

 原文链接：HTML静态网页作业招聘信息网站div+css布局-HTML静态网站-网站作业之家-大学生网页作业，网站毕业设计，课程设计，PHP作业、html网页作业原创定制代做，网站成品，Dreamweaver网页制作

黑白说程序
关注
  • 18
    点赞
  • 踩
  • 90
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
招聘网站html模版
10-16
招聘网站HMTL模版文件；html模版；最全的网站模版文件
简单的静态登录注册页面
05-02
对于刚接触前端的同学 在学习了html+css+js后 可以对应写一个简单的登录注册的静态页面。压缩包里面有两个类型的登录注册页面。具体价值意义不大，主要是前期练练对于基本语言的熟练度哈。
html网页设计与制作：基于html设计整套招聘网站求职前端模板页面 静态网页HTML代码 学生网页课程设计期末作业下载...
qq_365392777
11-06 390
????精彩专栏推荐 ???? ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 ???? 作者主页: ​​【主页——????获取更多优质源码】​​ ???? web前端期末大作业： 【????毕设项目精品实战案例 (1000套) 】 ???? 程序员有趣的告白方式：【????HTML七夕情人节表白网页制作 (110套) 】 ????超炫酷的Echarts大屏可视...
个人设计web前端大作业~ 酒店网页设计(HTML5+CSS3+Bootstrap)
热门推荐
qq_365392777
08-09 1万+
个人设计web前端大作业~ 酒店网页设计(HTML5+CSS3+Bootstrap)瑞豪国际酒店 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS...
用HTML CSS JS 实现一个工作招聘平台展示响应式网站
前端路上有你有我！
05-16 3001
主页：搞前端的半夏 简介：前端领域优质创作者。扫码或搜索添加文末公众号「搞前端的半夏」：🍗 回复 ”网站模板“，免费送网站模板！ 欢迎点赞 👍 收藏 ⭐留言 📝 私信📄 N++网站模板 源码链接：https://pan.baidu.com/s/1ZoEYDLVwy6-kXQbLOpFIdw?pwd=3zuu 本网站可以作为一个公司内部的招聘平台，同时也可以作为第三方人力资源自建的岗位库，最重要的你可以利用它自建一个招聘平台！充满无限商机！！！ 为什么要搭建网站招聘平台。 1、灵活性 网络招聘没有时间和.
HTML5（css定义招聘网页样式案例）
qq_52638405的博客
11-27 1487
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> :root{font-family:"楷体"；} h3:before{content: url(img/密码框小眼睛.png);} p:nth-of-type(odd){color: #29D3F8;}.
Layui网页模板
最新发布
qq_53374893的博客
07-30 1303
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>会员管理</title> <link href="layui/css/layui.css" rel="sty
HTML5网页设计小案例：逸仙园茶馆招聘启事网页的设计
weixin_63279307的博客
07-04 475
HTLM5网页设计小案例：逸仙园茶馆招聘启事网页的设计
php网页源码招聘求职管理系统mysql数据库web结构html布局计算机软件工程
qq_251836457的博客
12-19 657
一、源码特点 PHP招聘求职管理系统是一套完善的web设计系统，对理解php编程开发语言有帮助，系统具有完整的源代码和数据库，系统主要采用B/S模式开发。开发环境为PHP APACHE，数据库为mysql5.0，使用php语言开发。 php网页源码招聘求职管理系统mysql数据库web结构html布局计算机软件工程-互联网文档类资源-CSDN下载一、源码特点PHP招聘求职管理系统是一套完善的web设计系统，对理解php编程开发语言有帮助，系更多下载资源、学习资料请访问CSDN下载频道.https:...
用css+html完成学校官网
qq_63357593的博客
12-11 923
【代码】用css+html完成学校官网。
阿赛企业网站系统 17.rar
05-27
阿赛企业网站系统是一套功能强大、安全稳定、代码简洁、易改易用的全开源专业建站系统。基于ASP ACCESS/MSSQL开发，支持多模式生成HTML，提供文章、产品、商品交易、下载、图片、视频、介绍、资质证书、招聘、友情链接等模块，可无限制增减频道、支持无限级分类等，经深度SEO优化、业界最专业的ASP、HTML5技术渗入。另外有评价与点评系统、会员系统、短信、交易、个人专栏、订单系统、优惠券、购物车、论坛等互动功能。 系统功能介绍： 加入高兼容性原创编辑器系统《阿赛HTML在线编辑器》，支持插入媒体、文件、表格等；开放代码，全开源严密架构，预留足够功能扩展空间，方便二次开发与修改，欢迎大家开刀，出彩作品也请发给我们分享一下；数据库临时转文件本地储存架构，可以从根本降低数据库的读写压力，提高网站整体访问与反应速度（使用得当，此功能完全优于生成HTML功能）；支持application等常规缓存技术，可在后台选择，依据自身运行服务器的能力自由调配；全新的评论模式，设有评论开关，随心开启；后台自动生成调用代码，支持即时预览，全ASP模板开发，方便大家自由增减页面功能；网站系统所有上传接口均使用最新版《阿赛文件上传系统》，安全性和实用性极高；全站启用随机验证码和内设验证码双保险验证提交数据，拒绝机器人发送垃圾信息充斥网站，提高网站安全性；提供多种验证码供选，彻底告别验证码烦恼；系统自带加密功能，对某些只想指定人看到的内容，可以通过加密来实现；内容集合储存，方便全局管理，设有频道、无限级分类方便归类各内容；已有开发频道产品、文章、商城、图片、多媒体（播放影音视频）、介绍、资质、照片、链接等，支持无限复制，并可自行拓展其他功能；加入点击访问数、我顶、点评等网友很喜欢的即时交互系统；程序、模版、网站数据与设置等全面分离储存，方便大家更新制作模版与开发新功能；提供六种可选的列表模式标题列表、图文列表、图片列表、简介列表、全文列表、云签模式，可通过频道管理进行单个频道设置；鼠标注释美化升级，摒弃之前的美化方式，采用全新美化JS，兼容性和反应速率均有提高；全站div css标准页面设计架构，延续系统的一贯风格，可通过对ASP页面的HTML模版直接编辑以便达到不同效果；管理员入库，可添加多个管理员，每个管理员可设置不同的权限，有首席管理员、站长、编辑人员、后台游客等；网站主页和频道首页各设有舌签模式和列表模式两种主体内容显示方式，可通过对网站设置选择适合自己的；网站导航支持二级下拉幻色，更美观，兼容性也好很多；整站幻灯片为旧版的加强版支持所有常规浏览器，并已测试通过，纯js css完成，支持一个页面调用多个幻灯片；系统使用三色调配原则，大家可以按颜色喜欢在后台直接调配喜欢的色彩风格，实现秒变风格；独立的留言系统，支持回复，并可拓展更多实用功能；后台管理提供批量审核、推荐、删除等大规模操作按钮，方便大家大批量更改网站，请大家操作时小心谨慎；最新《阿赛聊天系统》嵌入，反应速度超快，管理性卓越；全站生成静态HTML网站的功能，同时支持多种生成静态HTML网站的模式选择，自动生成、仅生成一些指定的页面等；自带全站频道与分类的导航地图生成/?map.html；支持sitemap在线生成，及xml搜索引擎蜘蛛文件系统生成；自带完整《阿赛访问统计系统》，含今日访问、昨日访问、最高访问、历史访问、开站多少天、平均每天访问等；系统自带《阿赛在线人数统计系统》，可以凭借后台直接设置以上两统计的开关；提供最新《阿赛网站文件在线管理系统》，支持在线管理网站及各个文件及文件夹，同时还支持对网站编码类、文字类文件的修改；网站设置、系统设置、广告设置独立储存，可在线管理与设置，方便大家对网站的备份操作，普通操作只需保护好核心数据文件夹内内容即可；支持标签及搜索关键词储存查找与显示；为增强网站数据库安全性，提供数据库在线压缩、备份、恢复等功能，方便大家在线对数据库进行管理；支持一网多站模式（一个系统运行多个不同域名的网站，互不冲突）；自带完善的会员系统；支持会员间短信发送、公告发布等；自带订单系统、交易系统（处于对安全与免责考虑，本系统并未设置第三方支付系统，支持站内或线下交易）；含购物车功能；支持优惠券、优惠券的使用；个人投稿功能，设置个人专栏；最新版《阿赛树形论坛系统》植入，超强功能，个性体验，让您爱不释手！
web课程设计 网页设计 包含js，div+css布局
03-14
精心制作的web课程设计，包含javascript，div+css布局。
一个汽车类DIV+css布局的html网站
02-17
汽车类网页代码，供学习使用，DIV+css布局，适合大家学习研究使用
宠物咖啡学生网页设计作业源码 宠物咖啡HTML静态网页设计作业成品下载 DIV+CSS布局网站作业模板
11-16
宠物咖啡HTML静态网页设计作业由DIV+CSS布局制作，共1个页面，顶部及左侧导航为空链接，页面宽度980PX，制作了页面背景图。首页制作了小表单窗口，页数少，单基础技术都包含，无特殊HTML技术，初级网页设计水平。
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
div+css布局实现个人网页设计(HTML期末作业)
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
期末大作业+html+css网页制作
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
HTML静态网页作业(HTML+CSS)——外卖平台主题网页设计制作(8个页面)
weixin_42283461的博客
02-05 5353
学生静态网页作业--外卖平台网页设计（8页）
毕业生求职招聘网站的设计与实现（JAVA源码+文档）（SpringBoot+VUE+Mysql）
MMMMMMNONG的博客
07-25 1049
由SpringBoot+VUE+Mysql实现求职招聘网站的设计 主要分为3类角色：毕业生（用户）、企业（用户）、管理员 求职招聘网站的功能模块是用户在使用本网站时，不同用户所具有的功能，不同的角色所能够管理的模块也是不尽相同。
H5学习小结——div+css创建电子商务静态网页
05-30
很好，我可以回答你关于H5学习小结——div+css创建电子商务静态网页的问题。 首先，使用div+css创建电子商务静态网页的基本步骤如下： 1. 设计页面结构，使用div元素来划分页面区域。 2. 使用CSS样式对div元素进行布局、样式设置等。 3. 添加页面内容，包括文字、图片等。 4. 设置页面链接，添加导航栏等。 具体来说，你需要了解以下内容： 1. HTML基础知识，掌握标签的使用方法，包括div、p、img等。 2. CSS基础知识，包括样式设置、选择器、盒模型等。 3. 掌握一些CSS框架，如Bootstrap等，可以帮助你更快地创建网页布局和样式。 4. 熟悉网页设计的一些规范和最佳实践，如网页布局、颜色搭配、字体选择等。 最后，我还要提醒你，学习网页设计需要持续的练习和实践，多看一些优秀的网页设计作品，不断积累经验和提高自己的设计水平。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值