拉钩网前端项目实战

拉钩网前端项目实战04

banner和content设计

一、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">&gt;</span></li><li><a href="">技术</a><a href="">Java</a><a href="">PHP</a><a href="">区块链</a><span class="fr">&gt;</span></li><li><a href="">技术</a><a href="">Java</a><a href="">PHP</a><a href="">区块链</a><span class="fr">&gt;</span></li><li><a href="">技术</a><a href="">Java</a><a href="">PHP</a><a href="">区块链</a><span class="fr">&gt;</span></li><li><a href="">技术</a><a href="">Java</a><a href="">PHP</a><a href="">区块链</a><span class="fr">&gt;</span></li><li><a href="">技术</a><a href="">Java</a><a href="">PHP</a><a href="">区块链</a><span class="fr">&gt;</span></li><li><a href="">技术</a><a href="">Java</a><a href="">PHP</a><a href="">区块链</a><span class="fr">&gt;</span></li></ul></div><div class="banRight fr"><div class="banImgBox"><img src="img/banner.JPG" alt="" class="banImg"></div><span class="btnLeft">&lt;</span><span class="btnRight">&gt;</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;display: none;}.btnRight {right: 20px;}.btnLeft {left: 20px;}}.banRight:hover {span {display: block;}}}
}

二、content部分设计

1.html部分


```html<div class="content main"><div class="line1"><div class="lineTop"><div class="top1"><a href="" class="hotBtn">24Hour热门</a><a href="" class="newBtn">最新职位</a></div><div class="top2"><span class="fl">?</span><a href="" class="fl">在过去的24小时,最多人看过的岗位在这里</a><a href="" class="fl">我知道了</a></div></div><ul class="conUl"><li class="clearFixed"><div class="conBox fl"><p class="job clearFixed"><span class="jobTxt fl">Java开发工程师</span><span class="time fl">[10:35发布]</span><img src="img/icon_chat.png" alt="" class="fl"><span class="money fr">10K-15K</span></p><p class="btn btn2">经验5-10年/大专</p><p class="clearFixed  pBor"><span class="btn fl spa">电商</span><span class="btn fl spa">移动互联网</span></p><div class="imgBox clearFixed"><img src="img/con2.png" alt="" class="fl"><div class="imgTxt"><p class="txt1">长沙千锋教育科技有限公司</p><p class="txt2">教育/未融资/长沙</p></div></div></div><div class="conBox fl"><p class="job clearFixed"><span class="jobTxt fl">Java开发工程师</span><span class="time fl">[10:35发布]</span><img src="img/icon_chat.png" alt="" class="fl"><span class="money fr">10K-15K</span></p><p class="btn btn2">经验5-10年/大专</p><p class="clearFixed  pBor"><span class="btn fl spa">电商</span><span class="btn fl spa">移动互联网</span></p><div class="imgBox clearFixed"><img src="img/con2.png" alt="" class="fl"><div class="imgTxt"><p class="txt1">长沙千锋教育科技有限公司</p><p class="txt2">教育/未融资/长沙</p></div></div></div><div class="conBox fl"><p class="job clearFixed"><span class="jobTxt fl">Java开发工程师</span><span class="time fl">[10:35发布]</span><img src="img/icon_chat.png" alt="" class="fl"><span class="money fr">10K-15K</span></p><p class="btn btn2">经验5-10年/大专</p><p class="clearFixed  pBor"><span class="btn fl spa">电商</span><span class="btn fl spa">移动互联网</span></p><div class="imgBox clearFixed"><img src="img/con2.png" alt="" class="fl"><div class="imgTxt"><p class="txt1">长沙千锋教育科技有限公司</p><p class="txt2">教育/未融资/长沙</p></div></div></div></li><li class="clearFixed"><div class="conBox fl"><p class="job clearFixed"><span class="jobTxt fl">Java开发工程师</span><span class="time fl">[10:35发布]</span><img src="img/icon_chat.png" alt="" class="fl"><span class="money fr">10K-15K</span></p><p class="btn btn2">经验5-10年/大专</p><p class="clearFixed  pBor"><span class="btn fl spa">电商</span><span class="btn fl spa">移动互联网</span></p><div class="imgBox clearFixed"><img src="img/con2.png" alt="" class="fl"><div class="imgTxt"><p class="txt1">长沙千锋教育科技有限公司</p><p class="txt2">教育/未融资/长沙</p></div></div></div><div class="conBox fl"><p class="job clearFixed"><span class="jobTxt fl">Java开发工程师</span><span class="time fl">[10:35发布]</span><img src="img/icon_chat.png" alt="" class="fl"><span class="money fr">10K-15K</span></p><p class="btn btn2">经验5-10年/大专</p><p class="clearFixed  pBor"><span class="btn fl spa">电商</span><span class="btn fl spa">移动互联网</span></p><div class="imgBox clearFixed"><img src="img/con2.png" alt="" class="fl"><div class="imgTxt"><p class="txt1">长沙千锋教育科技有限公司</p><p class="txt2">教育/未融资/长沙</p></div></div></div><div class="conBox fl"><p class="job clearFixed"><span class="jobTxt fl">Java开发工程师</span><span class="time fl">[10:35发布]</span><img src="img/icon_chat.png" alt="" class="fl"><span class="money fr">10K-15K</span></p><p class="btn btn2">经验5-10年/大专</p><p class="clearFixed  pBor"><span class="btn fl spa">电商</span><span class="btn fl spa">移动互联网</span></p><div class="imgBox clearFixed"><img src="img/con2.png" alt="" class="fl"><div class="imgTxt"><p class="txt1">长沙千锋教育科技有限公司</p><p class="txt2">教育/未融资/长沙</p></div></div></div></li><li class="clearFixed"><div class="conBox fl"><p class="job clearFixed"><span class="jobTxt fl">Java开发工程师</span><span class="time fl">[10:35发布]</span><img src="img/icon_chat.png" alt="" class="fl"><span class="money fr">10K-15K</span></p><p class="btn btn2">经验5-10年/大专</p><p class="clearFixed  pBor"><span class="btn fl spa">电商</span><span class="btn fl spa">移动互联网</span></p><div class="imgBox clearFixed"><img src="img/con2.png" alt="" class="fl"><div class="imgTxt"><p class="txt1">长沙千锋教育科技有限公司</p><p class="txt2">教育/未融资/长沙</p></div></div></div><div class="conBox fl"><p class="job clearFixed"><span class="jobTxt fl">Java开发工程师</span><span class="time fl">[10:35发布]</span><img src="img/icon_chat.png" alt="" class="fl"><span class="money fr">10K-15K</span></p><p class="btn btn2">经验5-10年/大专</p><p class="clearFixed  pBor"><span class="btn fl spa">电商</span><span class="btn fl spa">移动互联网</span></p><div class="imgBox clearFixed"><img src="img/con2.png" alt="" class="fl"><div class="imgTxt"><p class="txt1">长沙千锋教育科技有限公司</p><p class="txt2">教育/未融资/长沙</p></div></div></div><div class="conBox fl"><p class="job clearFixed"><span class="jobTxt fl">Java开发工程师</span><span class="time fl">[10:35发布]</span><img src="img/icon_chat.png" alt="" class="fl"><span class="money fr">10K-15K</span></p><p class="btn btn2">经验5-10年/大专</p><p class="clearFixed  pBor"><span class="btn fl spa">电商</span><span class="btn fl spa">移动互联网</span></p><div class="imgBox clearFixed"><img src="img/con2.png" alt="" class="fl"><div class="imgTxt"><p class="txt1">长沙千锋教育科技有限公司</p><p class="txt2">教育/未融资/长沙</p></div></div></div></li></ul><p class="more">查看更多</p></div><div class="line2"><div class="lineTop"><div class="top1"><a href="" class="hotBtn">24Hour热门</a><a href="" class="newBtn">最新职位</a></div><div class="top2"><span class="fl">?</span><a href="" class="fl">在过去的24小时,最多人看过的岗位在这里</a><a href="" class="fl">我知道了</a></div></div><div class="con2Box clearFixed"><div class="listBox fl"><img src="img/con2.png" alt=""><span class="spa1">数据堂</span><p class="txt1">数据服务，数据服务</p><p class="txt2">发掘数据的价值，便利人们的生活，让人们点点点点点点</p><div class="listCon clearFixed"><div class="box1 fl"><p>20</p>面试评价</div><div class="box1 fl"><p>20</p>面试评价</div><div class="box1 fl"><p>20</p>面试评价</div></div></div><div class="listBox fl"><img src="img/con2.png" alt=""><span class="spa1">数据堂</span><p class="txt1">数据服务，数据服务</p><p class="txt2">发掘数据的价值，便利人们的生活，让人们点点点点点点</p><div class="listCon clearFixed"><div class="box1 fl"><p>20</p>面试评价</div><div class="box1 fl"><p>20</p>面试评价</div><div class="box1 fl"><p>20</p>面试评价</div></div></div><div class="listBox fl"><img src="img/con2.png" alt=""><span class="spa1">数据堂</span><p class="txt1">数据服务，数据服务</p><p class="txt2">发掘数据的价值，便利人们的生活，让人们点点点点点点</p><div class="listCon clearFixed"><div class="box1 fl"><p>20</p>面试评价</div><div class="box1 fl"><p>20</p>面试评价</div><div class="box1 fl"><p>20</p>面试评价</div></div></div><div class="listBox fl"><img src="img/con2.png" alt=""><span class="spa1">数据堂</span><p class="txt1">数据服务，数据服务</p><p class="txt2">发掘数据的价值，便利人们的生活，让人们点点点点点点</p><div class="listCon clearFixed"><div class="box1 fl"><p>20</p>面试评价</div><div class="box1 fl"><p>20</p>面试评价</div><div class="box1 fl"><p>20</p>面试评价</div></div></div><div class="listBox fl"><img src="img/con2.png" alt=""><span class="spa1">数据堂</span><p class="txt1">数据服务，数据服务</p><p class="txt2">发掘数据的价值，便利人们的生活，让人们点点点点点点</p><div class="listCon clearFixed"><div class="box1 fl"><p>20</p>面试评价</div><div class="box1 fl"><p>20</p>面试评价</div><div class="box1 fl"><p>20</p>面试评价</div></div></div><div class="listBox fl"><img src="img/con2.png" alt=""><span class="spa1">数据堂</span><p class="txt1">数据服务，数据服务</p><p class="txt2">发掘数据的价值，便利人们的生活，让人们点点点点点点</p><div class="listCon clearFixed"><div class="box1 fl"><p>20</p>面试评价</div><div class="box1 fl"><p>20</p>面试评价</div><div class="box1 fl"><p>20</p>面试评价</div></div></div><div class="listBox fl"><img src="img/con2.png" alt=""><span class="spa1">数据堂</span><p class="txt1">数据服务，数据服务</p><p class="txt2">发掘数据的价值，便利人们的生活，让人们点点点点点点</p><div class="listCon clearFixed"><div class="box1 fl"><p>20</p>面试评价</div><div class="box1 fl"><p>20</p>面试评价</div><div class="box1 fl"><p>20</p>面试评价</div></div></div><div class="listBox fl"><img src="img/con2.png" alt=""><span class="spa1">数据堂</span><p class="txt1">数据服务，数据服务</p><p class="txt2">发掘数据的价值，便利人们的生活，让人们点点点点点点</p><div class="listCon clearFixed"><div class="box1 fl"><p>20</p>面试评价</div><div class="box1 fl"><p>20</p>面试评价</div><div class="box1 fl"><p>20</p>面试评价</div></div></div></div><p class="more">查看更多</p></div></div>

2.css部分

.content {.line1 {margin-top: 20px;margin-bottom: 50px;li {margin-bottom: 17px;.conBox {width: 355px;border: 1px solid #eaeeed;padding: 24px 17px 16px;.job {font-size: 18px;.time {margin: 0px 8px;}img {margin-top: 6px;}.money {font-size: 12px;color: #fa6041;margin-top: 4px;}}.btn {font-size: 18px;color: #9999b2;}.btn2 {margin-top: 13px;margin-bottom: 13px;}.spa {border: 1px solid #eaeeed;padding: 8px 25px;margin-right: 12px;font-size: 12px;}.pBor {border-bottom: 1px dashed #eaeeed;padding-bottom: 20px;}.imgBox {padding-top: 18px;img {width: 40px;height: 40px;margin-right: 14px;}.imgTxt {font-size: 12px;.txt1 {color: #555;}.txt2 {color: #999;}}}}div:nth-of-type(2) {margin: 0px 13px 0px 14px;}}}.lineTop {height: 118px;.top1 {height: 53px;line-height: 53px;border-bottom: 1px solid #e8e8e8;.hotBtn {border-bottom: 2px solid #000;padding-bottom: 15px;margin-right: 60px;}.newBtn {color: #999;}}.top2 {height: 42px;padding-top: 24px;font-size: 12px;span {width: 18px;height: 18px;background: #e6e6e6;color: #fff;text-align: center;border-radius: 50%;margin-right: 14px;}a:nth-of-type(1) {color: #999;margin-right: 55px;}a:nth-of-type(2) {color: #00b38a;}}}.more{width: 388px;height: 42px;border: 1px solid #00b38a;margin: 0 auto;text-align: center;line-height: 42px;color: #00b38a;}.line2{.con2Box{.listBox{width: 248px;height: 244px;border: 1px solid #eeeeee;padding:12px 20px;text-align: center;margin: 0px 8px;margin-bottom: 16px;}.listBox:nth-child(2n-1){margin-left:0 ;}.listBox:nth-child(4n){margin-right: 0;}img{width: 80px;height: 80px;margin: 0 auto;margin-bottom: 16px;}.txt1{font-size: 12px;color: #999;margin-top: 10px;margin-bottom: 12px;}.txt2{font-size: 12px;color: #555;// 让多余文字以...形式显示// 1.让文字一行显示，即不换行// 2.溢出隐藏// 3.溢出文字显示方式white-space: nowrap;overflow: hidden;text-overflow: ellipsis;border-bottom: 1px dashed #e0e0e0;padding-bottom: 16px;}.listCon{font-size: 12px;color: #999;margin-top: 18px;p{color: #00b38a;}.box1{width: 78px;}.box1:nth-child(2){border-left: 1px solid #999;border-right: 1px solid #999;margin: 0 6px;}}}}
}

三、结果设计图

拉钩网前端项目实战04相关推荐

  1. WEB前端项目实战/酒仙网开发-李强强-专题视频课程

    WEB前端项目实战/酒仙网开发-204人已学习 课程介绍         WEB前端项目实战/酒仙网开发 课程收益     WEB前端项目实战/酒仙网开发 讲师介绍     李强强 更多讲师课程    ...

  2. Python项目实战 —— 04. 淘宝用户行为分析

    Python项目实战 Python项目实战--目录 Python项目实战 -- 04. 淘宝用户行为分析 一.背景 二.解题思路 三.数据分析 3.1 数据清洗 3.2 数据分析 3.2.1 用户整体 ...

  3. 最新麦子学院Web前端项目实战 Web前端开发从入门到精通33G完整版

    课程介绍 下载地址:百度网盘 一共超过33G的整套麦子学院Web前段视频教程,共分为4大阶段循序渐进的进行逐步深入的解读,从基础知识入门到后期的项目实战开发 对于想从事Web前端学习和开发工作的朋友来 ...

  4. html项目_学完html+css就可以做的前端项目实战

    爱创课堂专业前端培训 微信:haomei0452 前端资料免费分享平台 关注 博雅互动项目预览: 一.项目搭建 css部署:一定注意css引入顺序1 清除默认样式css文件 reset.css2 可以 ...

  5. web前端项目实战_vue项目仿美团【爱创课堂】

    目录 Vue 2.0 一.Vue Cli 1.1安装 1.2创建项目 1.3启动项目 1.4目录架构 1.5 webpack配置 二.项目实战 2.1技术架构 2.2目录部署 2.3路由 2.4 we ...

  6. web前端项目实战_Vue项目 仿美团【爱创课堂】

    目录 Vue 2.0 一.Vue Cli 1.1安装 1.2创建项目 1.3启动项目 1.4目录架构 1.5 webpack配置 二.项目实战 2.1技术架构 2.2目录部署 2.3路由 2.4 we ...

  7. 用html制作一个华为页面,Web前端项目实战——华为荣耀商城（学完html+css就可以做）...

    复习: 1.1到目前所学的布局方式 table布局: div+css布局: 固定布局 百分比布局 1.2 盒子模型 Margin  border padding  content 1.3 布局模型 流 ...

  8. html 怎么让tr的css覆盖td的_前端项目实战——华图教育网页（适合学习了HTML和CSS的小伙伴们）...

    这是在我学习了HTML和CSS以后做的实战项目,项目整体比较简单,但是有利于新手(比如我)了解和熟悉前端编程的代码和结构,因为在我最开始写这个网页的时候其实对于代码该怎么写并没有一个比较清晰的思路,就 ...

  9. 找工作前练手前端项目实战2

    这篇文章千锋长沙前端培训机构整理了10个前端实战项目,大家可以从当中选择自己想做的项目进行参考学习练手,你也可以从中寻找灵感去做自己的项目. 1.仿小米电商网站:本项目是基于原生JavaScript等 ...

最新文章

  1. Eclipse与AndroidStudio快捷键对比
  2. Hash特征编码在推荐系统的应用
  3. 在BAdI definition PRODUCT_R3_ADAPTER的implementation里获得download type
  4. linux 进程带宽限制,在Linux中限制网络带宽使用
  5. JWT令牌的秘密轮换
  6. 怎么才能成为一名PHP专家？
  7. dockerfile制作docker镜像
  8. 该死的配置系统未能初始化
  9. 工作中使用到的单词（软件开发）_2022_0815备份
  10. Linux中RAID与LVM磁盘列阵技术的使用
  11. Androi--内容提供器
  12. 猿人学第五题上---代码
  13. 云计算期末习题含答案
  14. 复制英文和中文PDF文字到word并去除回车符
  15. cmd中连接雷电模拟器时报错adb device not found
  16. spring AOP中 aop:advisor 与 aop:aspect 的区别
  17. Openwrt 分流-缓存-去广告
  18. html中怎么引用jquery
  19. CodeForces 356 C.Compartments（贪心）
  20. Unity3D多人协作开发环境搭建

热门文章

  1. Cesium中添加entitie模型，实现贴地。
  2. 【iOS】—— 高德地图SDK基础使用
  3. web学习一——We简介、Tomcat、HTTP协议
  4. POI生成word文档完整案例及讲解
  5. MFC实现简单连续加减计算器
  6. 亲身经历告诉你，学好英语的正确姿势(文末附自建英语学习网站)
  7. 解决ubuntu+windows双系统安装时无法修改SATA Mode为AHCI模式的问题（安装类型页是空白）
  8. 51nod-1278 相离的圆
  9. python快速入门【三】-----For 循环、While 循环
  10. 夹子机器人/pancakes科学家机器人这种骗局到现在还有人会上当！每天骗取上千万！带大家一同揭秘！！