前端页面boss直聘

最新推荐文章于 2024-07-23 14:51:29 发布
最新推荐文章于 2024-07-23 14:51:29 发布
阅读量535 收藏 7
点赞数
文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoquan1997/article/details/125413525
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/rest.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="font/iconfont.css">
</head>
<body>
    <div id="header">
        <section class="warp">
            <div class="logo">
                <a href="#"><img src="images/logo.jpg" alt=""></a>
            </div>
            <ul>
                <li>首页</li>
                <li>求职</li>
                <li>扫码登陆</li>
                <li>道具兑换</li>
            </ul>
            <p class="p1"><i class="iconfont icon-ios"></i><i>iphone</i></p>
            <p class="p2"><i class="iconfont icon-anzhuo"></i><i>Android</i></p>
            
        </section>
    </div>
    <div id="nav">
   <div class="news">
       <p>键注册BOSs直聘,与Boss直接开始沟通~ </p>
   </div>
    </div>
    <div id="baaner">
        <div class="img">
            <img src="images/baaner.jpg" alt="">
        </div>
    </div>
    <div id="news">
        <div class="login">
            <div class="z3">
                <div class="box1">
                    <p style="font-size: 20px; color: aqua; margin-left: 20px;">技术</p>
                    <ul>
                        <li>java</li>
                        <li>PHP</li>
                        <li>web前端</li><br>
                        <li>Android</li>
                    </ul>
                </div>
                <div class="box1">
                    <p style="font-size: 20px; color: aqua; margin-left: 20px;">产品</p>
                    <ul>
                        <li>产品经理</li>
                        <li>移动产品经理</li>
                        <li>产品助理</li><br>
                        <li>产品总监</li>
                    </ul>
                </div>
                <div class="box1">
                    <p style="font-size: 20px; color: aqua; margin-left: 20px;">设计</p>
                    <ul>
                        <li>平面设计师</li>
                        <li>美工</li>
                        <li>视觉设计师</li><br>
                        <li>UI设计师</li>
                    </ul>
                </div>
                <div class="box1">
                    <p style="font-size: 20px; color: aqua; margin-left: 20px;">运营</p>
                    <ul>
                        <li>客服专员</li>
                        <li>新媒体运营</li>
                        <li>文案策划</li><br>
                        <li>产品运营</li>
                    </ul>
                </div>
                <div class="box1">
                    <p style="font-size: 20px; color: aqua; margin-left: 20px;">市场</p>
                    <ul>
                        <li>市场营销</li>
                        <li>市场推广</li>
                        <li>商务渠道</li><br>
                        <li>网络营销</li>
                    </ul>
                </div>
                <div class="box1">
                    <p style="font-size: 20px; color: aqua; margin-left: 20px;">职能/高级管理</p>
                    <ul>
                        <li>人力资源</li>
                        <li>前台</li>
                        <li>助理/文员</li><br>
                        <li>人事/HR</li>
                    </ul>
                </div>
                <div class="box1">
                    <p style="font-size: 20px; color: aqua; margin-left: 20px;">销售</p>
                    <ul>
                        <li>销售专员</li>
                        <li>销售经理</li>
                        <li>销售顾问</li><br>
                        <li>电话销售</li>
                    </ul>
                </div>
                <div class="box1">
                    <p style="font-size: 20px; color: aqua; margin-left: 20px;">传媒</p>
                    <ul>
                        <li>编辑</li>
                        <li>文案</li>
                        <li>主持人/主播/DJ</li><br>
                        <li>后期制作</li>
                    </ul>
                </div>
                <div class="box1">
                    <p style="font-size: 20px; color: aqua; margin-left: 20px;">金融</p>
                    <ul>
                        <li>理财顾问</li>
                        <li>投资经理</li>
                        <li>理财顾问</li><br>
                        <li>客户经理</li>
                    </ul>
                </div>
                <div class="box1">
                    <p style="font-size: 20px; color: aqua; margin-left: 20px;">汽车</p>
                    <ul>
                        <li>java</li>
                        <li>PHP</li>
                        <li>web前端</li><br>
                        <li>Android</li>
                    </ul>
                </div>
                <div class="box1">
                    <p style="font-size: 20px; color: aqua; margin-left: 20px;">技术</p>
                    <ul>
                        <li>汽车销售</li>
                        <li>汽车维修</li>
                        <li>汽车美容</li><br>
                        <li>汽车售后服务</li>
                    </ul>
                </div>
                <div class="box1" style="margin-top: 20px;">
                    <p style="font-size: 20px; color: aqua; margin-left: 20px;">咨询/翻译/法律</p>
                    <ul>
                        <li>英语翻译</li>
                        <li>公司法务</li>
                        <li>猎头顾问</li><br>
                        <li>企业管理咨询</li>
                    </ul>
                </div>
                <div class="box1" style="margin-top: 20px;">
                    <p style="font-size: 20px; color: aqua; margin-left: 20px;">咨询/翻译/法律</p>
                    <ul>
                        <li>英语翻译</li>
                        <li>公司法务</li>
                        <li>猎头顾问</li><br>
                        <li>企业管理咨询</li>
                    </ul>
                </div>



            </div>
            <div class="z2">
                <form action="" class="input">
                    <input type="text" id="" name="" value="搜索公司,BOSS或职位...">
                    <input type="button" name="" id="" value="搜索">
                </form>
            </div>
            <div class="z1">
                <div class="cos1">
                    <p class="ll">【研发中心】hadoop研发工程</p>
                    <p class="kk">¥20K-40K</p>
                    <p class="oo">北京的︱1-3年︱本科</p>
                </div>
                <div class="cos2">
                    <span class="n1"><img src="images/求职_07.jpg" alt=""></span><br>
                    <span class="n2">唐贵辉</span><br>
                    <span class="n3">搜狐︱研发工程师</span>
                    <span class="n4">在线</span>
                </div>
            </div>
            <div class="z1"><div class="cos1">
                <p class="ll">【研发中心】hadoop研发工程</p>
                <p class="kk">¥20K-40K</p>
                <p class="oo">北京的︱1-3年︱本科</p>
            </div>
            <div class="cos2">
                <span class="n1"><img src="images/求职_07.jpg" alt=""></span><br>
                <span class="n2">唐贵辉</span><br>
                <span class="n3">搜狐︱研发工程师</span>
                <span class="n4">在线</span>
            </div></div>
            <div class="z1"><div class="cos1">
                <p class="ll">【研发中心】hadoop研发工程</p>
                <p class="kk">¥20K-40K</p>
                <p class="oo">北京的︱1-3年︱本科</p>
            </div>
            <div class="cos2">
                <span class="n1"><img src="images/求职_07.jpg" alt=""></span><br>
                <span class="n2">唐贵辉</span><br>
                <span class="n3">搜狐︱研发工程师</span>
                <span class="n4">在线</span>
            </div></div>
            <div class="z1"><div class="cos1">
                <p class="ll">【研发中心】hadoop研发工程</p>
                <p class="kk">¥20K-40K</p>
                <p class="oo">北京的︱1-3年︱本科</p>
            </div>
            <div class="cos2">
                <span class="n1"><img src="images/求职_07.jpg" alt=""></span><br>
                <span class="n2">唐贵辉</span><br>
                <span class="n3">搜狐︱研发工程师</span>
                <span class="n4">在线</span>
            </div></div>
            <div class="z1"><div class="cos1">
                <p class="ll">【研发中心】hadoop研发工程</p>
                <p class="kk">¥20K-40K</p>
                <p class="oo">北京的︱1-3年︱本科</p>
            </div>
            <div class="cos2">
                <span class="n1"><img src="images/求职_07.jpg" alt=""></span><br>
                <span class="n2">唐贵辉</span><br>
                <span class="n3">搜狐︱研发工程师</span>
                <span class="n4">在线</span>
            </div></div>
            <div class="z1"><div class="cos1">
                <p class="ll">【研发中心】hadoop研发工程</p>
                <p class="kk">¥20K-40K</p>
                <p class="oo">北京的︱1-3年︱本科</p>
            </div>
            <div class="cos2">
                <span class="n1"><img src="images/求职_07.jpg" alt=""></span><br>
                <span class="n2">唐贵辉</span><br>
                <span class="n3">搜狐︱研发工程师</span>
                <span class="n4">在线</span>
            </div></div>
            <div class="z1"><div class="cos1">
                <p class="ll">【研发中心】hadoop研发工程</p>
                <p class="kk">¥20K-40K</p>
                <p class="oo">北京的︱1-3年︱本科</p>
            </div>
            <div class="cos2">
                <span class="n1"><img src="images/求职_07.jpg" alt=""></span><br>
                <span class="n2">唐贵辉</span><br>
                <span class="n3">搜狐︱研发工程师</span>
                <span class="n4">在线</span>
            </div></div>
            <div class="z1"><div class="cos1">
                <p class="ll">【研发中心】hadoop研发工程</p>
                <p class="kk">¥20K-40K</p>
                <p class="oo">北京的︱1-3年︱本科</p>
            </div>
            <div class="cos2">
                <span class="n1"><img src="images/求职_07.jpg" alt=""></span><br>
                <span class="n2">唐贵辉</span><br>
                <span class="n3">搜狐︱研发工程师</span>
                <span class="n4">在线</span>
            </div></div>
            <div class="z1"><div class="cos1">
                <p class="ll">【研发中心】hadoop研发工程</p>
                <p class="kk">¥20K-40K</p>
                <p class="oo">北京的︱1-3年︱本科</p>
            </div>
            <div class="cos2">
                <span class="n1"><img src="images/求职_07.jpg" alt=""></span><br>
                <span class="n2">唐贵辉</span><br>
                <span class="n3">搜狐︱研发工程师</span>
                <span class="n4">在线</span>
            </div></div>
            <div class="z4">
                <div class="uu">
                    <p>还有超过<span>100万</span>BOSS正在直聘</p>
                </div>
                <div class="jj">
                    <p>下载BOSS直聘app<br>&nbsp;&nbsp;&nbsp;&nbsp;查看更多职位
                </p>
                        <span><img src="images/erweima.jpg" alt=""></span>
                </div>
            </div>
            
        </div>
    </div>
    <div id="footer">
        <div class="foot">
            <h4>首页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Boss网页版&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;文章&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;关于我们&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h4>
            <p>opyright＠2016 kanzhuI
                4013441号-1京公网安备11010502027210</p>
            <p>m.保留所有版权.使用这些服务遵守用户协议 </p>
        </div>
    </div>
</body>
</html>

css样式

#header{
    width: 1920px;
    height: 100%;
    background: #fff;
    margin: 0 auto;
}
.warp{
    width: 1170px;
    margin: 0 auto;
    height: 100px;
    
    
}
.logo{
    float: left;
    margin-top: 22px;
    
}
.warp ul{
    float: left;
}

.warp ul li {
    display: inline-block;
    font-size: 20px;
    line-height: 100px;
    margin-left: 36px;
}
.warp ul li:hover{
    color: #a2e4e2;
}
.p1{
    display: inline-block;
    float: right;
}
.p2{
    display: inline-block;
    float: right;
}
.p1 i{
    display: inline-block;
    font-size: 25px;
    line-height: 100px;
}
.p2 i{
    display: inline-block;
    font-size: 25px;
    line-height: 100px;
}
.p2 {
    margin-right: 36px;
}
.p2 i{
    margin-right: 10px;
}
.p1 i {
    margin-right: 10px;
}
#nav{
    width: 1920px;
    height: 38px;
    margin: 0 auto;
    background: #f3f3f3;
    display: flex;
    padding: 16px;
    
}
 .news{
    width: 1920px;
    height: 36px;
    border: 1px solid #ffe7b7;
    justify-content: space-between;
    color: #af5a31;
    background: #fdf8e4;
    text-align: center;
    line-height: 38px;
}
#baaner{
    width: 1920px;
    background: #f3f3f3;
    margin: 0 auto;
}
#baaner .img{
    width: 1170px;
    height: 100%;
    margin: 0 auto;
}
#baaner .img img{
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
}
#news{
    width: 1920px;
    background:#f3f3f3 ;
    margin:  0  auto;
    height: 100%;
    
}
#news .login{
    width: 1170px;
    height: 1550px;
    margin: 0 auto;
    background: #f3f3f3;  
}
.login .z3{
    width: 266px;
    height: 1400px;
    background: #fff;
    border: 1px solid #dcdcdc;
    margin:  0 0 0 0;
    float: left;
    position: relative;
}
.login .z3 .box1{
    width: 266px;
    height: 100px;
    border: none;
    float: left;
}
.box1 ul{
    float: left;
}
.box1 ul li{
    margin-left: 20px;
    float: left;
    font-size: 14px;
    color:#999;
    line-height: 30px;
}
.login .z2{
    width: 888px;
    height: 54px;
    border: 1px solid #dcdcdc;
    background-color: #fff;
    margin: 20px 0 0 14px ;
    margin: 0 auto;
    right: 0;
    margin-right: 0px;
    position: relative;
    
}
.input{
    width: 888px;
    height: 54px;
}
.input input:nth-child(1){
    width: 888px;
    height: 54px;
    border: 1px solid #e0e0e0;
    position: absolute;
    color: #d6d5dd;
}
.input input:nth-child(2){
    float: right;
    width: 104px;
    height: 45px;
    margin: 6px 6px 6px 0 ;
    position: relative;
    background-color: #5ecfc9;
    color: #fff;
    border: none;
}
.login .z1{
    width: 888px;
    height: 124px;
    border: 1px solid #dcdcdc;
    background-color: #fff;
    margin: 0 auto;
    margin-right: 0;
    margin-top: 20px; 
    position: relative;
    float: right;
}
.z1 .cos1{
    width: 287px;
    height: 124px;
    float: left;

}
.z1 .cos1 .ll{
    font-size: 16px;
    color: #000100;
    margin: 20px 0 0 20px;
}
.z1 .cos1 .kk{
    font-size: 16px;
    color: #e85253;
    margin: 20px 0 0 22px;
}
.z1 .cos1 .oo{
    font-size: 12px;
    color: #666668;
    margin: 20px 0 0 22px;
}
.z1 .cos2{
    width: 162px;
    height: 124px;
    float: right;
}
.z1 .cos2 .n1 img{
    margin-left: 83px;
    border-radius: 50%;
}
.z1 .cos2 .n2{
    margin:0 13px 0 103px;
}
.z1 .cos2 .n3 {
    margin-left: 15px;
}
.z1 .cos2 .n4{
    margin-left: 13px;
    width: 30px;
    height: 20px;
    background-color: #6ad62b;
    color: #fff;
}
.z4{
    width: 888px;
    height: 124px;
    border: 1px solid #dcdcdc;
    background-color: #fef9e5;
    margin: 0 auto;
    margin-right: 0;
    margin-top: 20px; 
    position: relative;
    float: right;
    
}
.uu{
    width: 260px;
    height: 124px;
    margin-left: 10px;
    float: left;

}
.uu p{
    font-size: 18px;
    color: #9ee4e6;
    margin-top: 44px;
}
.jj{
    width: 262px;
    height: 124px;
    float: right;
}
.jj p{
    display: inline-block;
    float: left;
    margin-top: 44px;
    font-size: 18px;
    color: #9ee4e6;
}
.jj span img{
    float: right;
    margin: 25px  14px;
}
#footer{
    height: 240px;
    width: 1920px;
    background:#000;
    margin: 0 auto;
}
.foot{
    width: 1170px;
    height: 240px;
    background: #000;
    margin: 0 auto;
}
.foot h4{
    color: #fff;
    text-align: center;
    font-size: 20px;
    line-height: 120px;
}
.foot p{
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 30px;
}

快点码啊
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
python:实现爬取boss直聘并可视化(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
04-11 2309
python:实现爬取boss直聘并可视化(附完整源码)
复刻boss直聘School界面（css+html）
weixin_45863061的博客
01-13 1354
复刻boss直聘School界面（css+html）
复刻boss直聘官网首页（css+html）
weixin_45863061的博客
01-12 2853
boss直聘首页复刻
boss直聘网页
weixin_45956737的博客
09-14 1403
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> *{
python爬取boss直聘源码
淡入淡出
09-19 2080
说明：登录boss直聘、获取推荐牛人信息、筛选牛人，然后进行沟通，目前只能做到沟通，还不能进行继续交流。 图片验证码目前只能将验证码图片保存到本地，通过图片管理器打开之后手工输入。 一次登录后，可在会话失效前多次执行牛人推荐沟通 import requests from bs4 import BeautifulSoup import json import datetime import r...
模仿boss直聘的部分前端页面
05-05
【标题】：“模仿boss直聘的部分前端页面” 在这个项目中，开发者旨在模仿知名招聘网站“Boss直聘”的部分前端界面，以实现类似的功能。通过使用“uni-app”框架，开发者可以构建一个跨平台的Web应用，覆盖PC端、...
BOSS直聘静态首页
08-02
在"BOSS直聘静态首页"实践中，可能还会涉及到媒体查询（Media Queries），以实现响应式设计，使页面在不同设备和屏幕尺寸下都能良好展示。 文件名列表中的"day3"可能指的是练习的第三天，可能包含了一些更复杂或者...
BOSS直聘-PC端.rar
12-08
1. **前端开发**：BOSS直聘的PC端界面主要由HTML、CSS和JavaScript构建。HTML负责结构化内容，CSS则用于美化和布局，使页面具有良好的视觉效果。JavaScript作为客户端脚本语言，用于实现动态交互，如表单验证、数据...
vue20全家桶实现Boss直聘WebAPP
08-10
在"Vue2.0全家桶实现Boss直聘Web APP"项目中，开发者将利用Vue.js 2.0及其相关生态工具来构建一个类似Boss直聘的招聘网站应用。"全家桶"一词通常指的是包括Vue核心库、Vuex状态管理、Vue Router路由管理和Webpack...
react-一款简易版类Boss直聘的移动端SPA单页应用
08-14
标题 "react-一款简易版类Boss直聘的移动端SPA单页应用" 描述了一款使用React技术构建的移动应用程序，其设计灵感来源于流行的招聘平台Boss直聘。这个应用旨在为用户提供一个简洁、高效的求职和招聘体验，通过单一...
Boss直聘（求职）仿版
11-22
Boss直聘求职版demo，求职的基本功能都实现啦~包括界面UI和功能，登录界面有点丑看官不要介意。
flutter仿BOSS直聘（二），大前端技术实现
weixin_34293059的博客
01-20 613
项目简介 记得上一篇的写作时间还在2018年2月份，已经很久没更新了，而flutter的版本更新了好几次，自flutter 1.0正式版推出之后，一直有打算把之前的项目重写一下，因为flutter本身更新了许多新特性，老的已经是过去式了，也老有人来问我，之前的项目运行不了，是的，因为sdk太老了，而且之前的项目纯粹是练手玩。 在过去的这段时间里，踊跃出了很多关于flutter的技术文章和开源项目例...
Boss直聘网爬虫 基于requests 请求的源码
feifeiyechuan的博客
04-08 4166
import requests from bs4 import BeautifulSoup import re import time import random # from zhi_lian_zhao_pin def from_Boss_ZhiPin(position_name, headers_strs, page_nums=None): ''' :param pos...
python爬boss网站_【Python】+boss直聘爬虫 无框架无登录
weixin_39980596的博客
12-06 214
[Asm] 纯文本查看 复制代码#coding=utf-8from bs4 import BeautifulSoupfrom abc import ABCMeta,abstractmethodfrom urllib.parse import urljoinimport reimport logginglogger = logging.getLogger('boss')job_info = {}cl...
html制作招聘表格代码,html中表单提交的实现
weixin_35051143的博客
05-30 670
表单提交代码1、源代码分析Document用户名密码性别男女最喜欢的城市北京上海重庆爱好读书插花唱歌button2、终端操作打开终端gitbash，切换到html所在的文件夹用命令行http-server打开静态服务器，打开后会出现两个ip地址。127.xxx是本地访问地址，125.xxx是局域网访问地址(这里的前提是已经安装了nodejs，并用npm安装了http-server这个服务器)用浏览...
boss直聘职位爬虫源代码
snjyor的博客
10-28 4060
boss直聘职位爬虫源代码 boss直聘数据分析职位爬虫源代码。 boss的反爬门槛较高，有cookies反爬，一个cookies只能爬取4页的数据，爬完4页后需要重新获取cookies，再更改一下for循环的起始页。 代码中的url需要更改为自己需要的url。 另外，当显示：IndexError: list index out of range 错误时，需要自己将浏览器的cookies复制到header字典中，一个cookies可以爬4页的数据，爬完4页会继续报IndexError: list index
android 仿Boss直聘消息界面
陈果的博客
06-12 3636
仿Boss直聘 Android Tab切换 app架构 java fragment APP 底部切换 仿Boss直聘切换
5.CSS学习（浮动）
最新发布
ShawLee0925的博客
07-23 372
css浮动——float特点
Python+Selenium打造BOSS直聘Python岗位数据分析系统
该文档是关于基于Python和Selenium的BOSS直聘Python岗位数据分析系统的本科毕业论文。作者通过此系统设计，旨在帮助求职者更有效地获取和分析BOSS直聘平台上的Python职位数据。 本论文共分为六章： 第一章介绍了...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值