拉勾网主页面HTML+CSS布局代码，style.css代码部分

最新推荐文章于 2020-12-18 20:35:45 发布
最新推荐文章于 2020-12-18 20:35:45 发布
阅读量1k 收藏 6
点赞数
分类专栏： 练习 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45488467/article/details/111395879
版权

HTML页面布局位置：链接: link.

style.css

/*顶部样式开始*/
.header {
    height: 160px;
}

/* 顶部上部分开始 */
.header .h_top {
    height: 40px;
    background-color: #32373E;
}

.header .h_top .h_top_l {
    line-height: 40px;
}

.header .h_top .h_top_l .logou {
    font-size: 17px;
    margin-right: 32px;
}

.header .h_top .h_top_l .nation,
.header .h_top .h_top_l .city {
    font-size: 12px;
    margin-right: 13px;
}

.header .h_top .h_top_l .city {
    margin-right: 35px;
    color: #AF9987;
}

.header .h_top .h_top_l .ulLis li {
    height: 40px;
    display: inline-block;
    width: 70px;
    text-align: center;
}

.header .h_top .h_top_l .ulLis li a,
.header .h_top .h_top_r a {
    font-size: 12px;
    color: #A3B5A7;
}

.header .h_top .h_top_l .ulLis li:first-child a {
    color: #ffffff;
}

.header .h_top .h_top_l .ulLis li:first-child {
    background-color: #24282C;
}

.header .h_top .h_top_r {
    line-height: 40px;
}

.header .h_top .h_top_r .login_logo {
    width: 18px;
    height: 18px;
    display: inline-block;
    background: url(../mainimg/sprite.png) no-repeat -76px -174px;
    vertical-align: middle;
    margin-right: 9px;
}

.header .h_top .h_top_r a:first-child {
    margin-right: 9px;
}

.header .h_top .h_top_r .line {
    width: 2px;
    height: 15px;
    background-color: #3D5366;
    display: inline-block;
    margin-right: 12px;
    vertical-align: middle;
}

.header .h_top .h_top_r a:nth-child(2) {
    margin-right: 39px;
}

.header .h_top .h_top_r .app {
    width: 12px;
    height: 17px;
    display: inline-block;
    vertical-align: middle;
    background: url(../mainimg/sprite.png) no-repeat -64px -212px;
    margin-right: 4px;
}

.header .h_top .h_top_r a:nth-child(3) {
    margin-right: 24px;
}

.header .h_top .h_top_r a:nth-last-child(1) {
    margin-right: 6px;
}

/* 顶部上部分结尾 */

/* 顶部下部分开始 */
.header .h_bottom {
    height: 120px;
    background-color: #00B38A;
}

.header .h_bottom .bottom_l {
    height: 120px;
}

.header .h_bottom .bottom_l div {
    display: inline-block;
    height: 55px;
    vertical-align: 34px;
}

.header .h_bottom .bottom_l span:first-child {
    width: 228px;
    height: 120px;
    display: inline-block;
    background: url(../mainimg/logo.png) no-repeat;
}

.header .h_bottom .bottom_l div span:first-child {
    width: 334px;
    height: 30px;
    background: url(../mainimg/text.png) no-repeat;
    background-size: 334px 100%;
}

.header .h_bottom .bottom_l div p {
    color: #ffffff;
    font-size: 14px;
}

.header .h_bottom .bottom_r {
    margin-top: -2px;
}

.header .h_bottom .bottom_r .btn {
    line-height: 120px;
}

.header .h_bottom .bottom_r .btn div {
    display: inline-block;
}

.header .h_bottom .bottom_r input {
    height: 35px;
    font-size: 12px;
    text-indent: 10px;
    /*进行首行缩进！！！！！！！！！*/
}

.header .h_bottom .bottom_r .get {
    width: 146px;
    display: inline-block;
    font-size: 0;
}

.header .h_bottom .bottom_r .tel {
    width: 163px;
    margin-right: 25px;
}

.header .h_bottom .bottom_r .yanzheng {
    width: 94px;
}

.header .h_bottom .bottom_r button {
    width: 51px;
    height: 35px;
    background-color: #ffffff;
    line-height: 36px;
    padding: 0;
    font-size: 12px;
}

.header .h_bottom .bottom_r .get {
    position: relative;
    margin-right: 9px;
}

.header .h_bottom .bottom_r .get div {
    width: 1px;
    height: 35px;
    display: inline-block;
}

.header .h_bottom .bottom_r button::before {
    /* 在获取按钮前添加一个元素，但是并没有添加可见的标签元素 */
    content: "";
    width: 1px;
    height: 12px;
    background: #d5dadf;
    position: absolute;
    left: 95px;
    top: 50px;
}

.header .h_bottom .bottom_r .btn input[type="submit"] {
    width: 107px;
    height: 35px;
    border: 1px solid #ffffff;
    color: #CCEFE7;
    font-size: 12px;
    background-color: #00B38A;
    text-indent: 5px;
}

/* 顶部下部分结尾 */
/*顶部样式结尾*/

/* 搜索部分开始 */
.search {
    height: 130px;
    background-color: #F2F5F4;
}

.search .search_main {
    width: 1206px;
    height: 100%;
    padding-top: 30px;
}

.search .search_main .search_main_input {
    font-size: 0;
    width: 937px;
    height: 70px;
}

.search .search_main .search_main_input input {
    font-size: 14px;
    width: 795px;
    height: 46px;
    border: 1px solid #E8E8E8;
    text-indent: 16px;
    font-weight: bold;
}

.search .search_main .search_main_input button {
    width: 142px;
    height: 46px;
    background-color: #00B38A;
    color: #fff;
    line-height: 45px;
    padding: 0;
    font-size: 16px;
}

.search .search_main .search_main_input ul {
    font-size: 13px;
    margin-top: 9px;
}

.search .search_main .search_main_input ul li {
    display: inline-block;
    margin: 0 10px;
}

.search .search_main .search_main_input ul li:first-child {
    margin: 0;
}

.search .search_main .search_main_input ul li a {
    color: #00B38A;
}

.search .search_main .search_main_input ul li:first-child a {
    color: #777777;
}

/* 搜索部分结束 */

/* 轮播一行位置样式开始 */
.lunbo {
    height: 395px;
    padding-top: 47px;
}

.lunbo .lunbo_main {
    width: 1207px;
    height: 348px;
}

.lunbo .lunbo_main .lunbo_main_l {
    width: 299px;
    height: 100%;
}

.lunbo .lunbo_main .lunbo_main_l li {
    font-size: 0;
    margin-bottom: 21px;
}

.lunbo .lunbo_main .lunbo_main_l li:nth-last-child(1) {
    margin-bottom: 0;
}

.lunbo .lunbo_main .lunbo_main_l li b {
    font-size: 19px;
}

.lunbo .lunbo_main .lunbo_main_l li a {
    font-size: 14px;
    margin: 0 14px;
}

.lunbo .lunbo_main .lunbo_main_l li span {
    width: 6px;
    font-family: "宋体";
    font-size: 17px;
    vertical-align: -1px;
    float: right;
    margin: 6px 2px 0 0;
}

.lunbo .lunbo_main .lunbo_main_r {
    width: 839px;
    height: 345px;
    margin: 0 7px 2px 62px;
    position: relative;
}

.lunbo .lunbo_main .lunbo_main_r .lunbo_main_r_cont img {
    width: 839px;
    height: 345px;
}

.lunbo .lunbo_main .lunbo_main_r span {
    position: absolute;
    top: 50%;
    margin-top: -17px;
    font-family: "宋体";
    font-size: 40px;
    width: 18px;
    height: 34px;
    line-height: 34px;
    display: none;
}

.lunbo .lunbo_main .lunbo_main_r span:nth-child(2) {
    margin-left: 20px;
}

.lunbo .lunbo_main .lunbo_main_r span:nth-child(3) {
    right: 0;
    margin-right: 20px;
}

.lunbo .lunbo_main .lunbo_main_r:hover span {
    display: block;
}

/* 轮播一行位置样式结束 */

/*信息发布样式开始*/
.cont {
    width: 1206px;
}

.cont .one {
    padding: 68px 7px 2px 0;
}

.cont .one .banner {
    height: 35px;
    border-bottom: 1px solid #E8E8E8;
}

.cont .one .banner span {
    height: 100%;
    display: inline-block;
    font-size: 15px;
}

.cont .one .banner span:nth-last-child(1) {
    color: #999999;
}

.cont .one .banner span:first-child {
    border-bottom: 1px solid #333333;
    color: #333333;
    margin-right: 58px;
}

.cont .one .tixing {
    height: 64px;
    padding: 28px 814px 18px 0;
    font-size: 14px;
}

.cont .one .tixing span {
    width: 18px;
    height: 18px;
    display: inline-block;
    background: url(../mainimg/wenhao.png) no-repeat;
}

.cont .one .tixing p:nth-child(2) {
    color: #99B2D8;
    margin: 0 56px 0 14px;
}

.cont .one .ulLis li {
    width: 389px;
    height: 200px;
    border: 1px solid #EAEEED;
    margin: 0 16px 15px 0;
    float: left;
}

.cont .one .ulLis li.nomarginr,
.cont .one .ulLiss li.nomarginr {
    margin-right: 0;
}

.cont .one .ulLis li .infor {
    width: 351px;
    height: 158px;
    margin: 25px 19px 17px 19px;
    font-size: 14px;
}

.cont .one .ulLis li .infor .infor_top {
    height: 102px;
    border-bottom: 1px dashed #E0E0E0;
}

.cont .one .ulLis li .infor .infor_top .infor_top_info {
    height: 53px;
}

.cont .one .ulLis li .infor .infor_top .infor_top_info .someinfo p {
    display: inline-block;
}

.cont .one .ulLis li .infor .infor_top .infor_top_info .someinfo p:first-child {
    font-size: 16px;
}

.cont .one .ulLis li .infor .infor_top .infor_top_info .someinfo p:nth-child(2) {
    margin: 0 8px;
    color: #999999;
}

.cont .one .ulLis li .infor .infor_top .infor_top_info .someinfo img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.cont .one .ulLis li .infor .infor_top .infor_top_info .someinfo p:nth-child(4) {
    margin-left: 68px;
    color: #FA6041;
}

.cont .one .ulLis li .infor .infor_top .infor_top_info>p {
    margin: 13px 237px 12px 0;
    color: #7777A1;
}

.cont .one .ulLis li .infor .infor_top .infor_top_btn {
    margin-top: 12px;
    font-size: 0;
}

.cont .one .ulLis li .infor .infor_top .infor_top_btn button {
    border: 1px solid #F0F0F0;
    border-radius: 2px;
    color: #A599A5;
    width: 79px;
    height: 28px;
    font-size: 13px;
    background-color: #fff;
}

.cont .one .ulLis li .infor .infor_top .infor_top_btn button:first-child {
    margin-right: 10px;
}

.cont .one .ulLis li .infor .infor_botton {
    padding-top: 16px;
    font-size: 0;
}

.cont .one .ulLis li .infor .infor_botton span {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url(../mainimg/daosui.png) no-repeat;
}

.cont .one .ulLis li .infor .infor_botton div {
    display: inline-block;
    width: 311px;
    height: 40px;
    vertical-align: 2px;
}

.cont .one .ulLis li .infor .infor_botton div p {
    display: inline-block;
    font-size: 14px;
}

.cont .one .ulLis li .infor .infor_botton div p:nth-child(1) {
    margin: 4px 115px 3px 14px;
    color: #55557A;
}

.cont .one .ulLis li .infor .infor_botton div p:nth-child(2) {
    margin: 0px auto 3px 14px;
    color: #A18C8C;
    font-size: 12px;
}

.cont .one>button {
    width: 389px;
    height: 44px;
    border: 1px solid #00B38A;
    background-color: #fff;
    display: block;
    margin: 0 auto;
}

.cont .one .ulLiss li {
    width: 288px;
    height: 270px;
    border: 1px solid #EAEEED;
    margin: 0 15px 15px 0;
    float: left;
}

.cont .one .ulLiss .infor {
    width: 260px;
    height: 228px;
    margin: 21px 14px 21px 14px;
}

.cont .one .ulLiss .infor .infor_top {
    height: 182px;
    border-bottom: 1px dashed #99B2D8;
}

.cont .one .ulLiss .infor .infor_top img {
    width: 80px;
    height: 80px;
    display: block;
    margin: 0 auto;
}

.cont .one .ulLiss .infor .infor_top>div {
    height: 102px;
    padding: 17px 6px 19px 6px;
    font-size: 12px;
    text-align: center;
    color: #555555;
}

.cont .one .ulLiss .infor .infor_top>div p:first-child {
    font-size: 16px;
    color: #333333;
}

.cont .one .ulLiss .infor .infor_top>div p:nth-child(2) {
    margin: 5px auto 7px;
    color: #999999;
}

.cont .one .ulLiss .infor .infor_botton {
    height: 29px;
    margin-top: 17px;
    display: flex;
    justify-content: space-between;
}

.cont .one .ulLiss .infor .infor_botton span {
    width: 82px;
    height: 100%;
    display: inline-block;
    border-right: 1px solid #EDEDED;
    text-align: center;
    font-size: 12px;
}

.cont .one .ulLiss .infor .infor_botton span p:first-child {
    height: 14px;
}

.cont .one .ulLiss .infor .infor_botton span p:nth-child(2) {
    color: #B2A5C2;
}

/*信息发布样式结束*/

/* s=友情链接样式开始 */
.friendly {
    width: 1199px;
    margin-top: 70px;
    font-size: 15px;
}

.friendly .banner {
    height: 35px;
    border-bottom: 1px solid #E8E8E8;
}

.friendly .banner span {
    height: 100%;
    display: inline-block;
    font-size: 15px;
    border-bottom: 1px solid #333333;
    color: #333333;
    margin-right: 58px;
}

.friendly ul {
    height: 137px;
    padding-top: 31px;
}

.friendly ul li {
    float: left;
    margin-right: 19px;
}

.friendly ul li:nth-last-child(1) {
    float: right;
    margin-right: 0;
}

.friendly ul li a,
.friendly ul li section {
    font-size: 12px;
    color: #7A7AB9;
}

.friendly ul li section {
    padding-right: 12px;
    margin-top: 4px;
    background: url(../mainimg/open.jpg) no-repeat;
    background-position: 24px;
}

/* s=友情链接样式结束 */

/*底部信息样式开始*/
.footer_top {
    border-top: 1px solid #E8E8E8;
}

.footer {
    width: 1206px;
    padding: 48px 0 66px 0;
}

.footer .footer_l {
    width: 313px;
    height: 100%;
    border-right: 1px solid #E8E8E8;
}

.footer .footer_l button {
    width: 182px;
    height: 42px;
    border: 1px solid #00B38A;
    margin-bottom: 16px;
    display: block;
    background-color: #ffffff;
}

.footer .footer_l span {
    display: inline-block;
    background: url(../mainimg/sprite2.png) no-repeat;
}

.footer .footer_l button:first-child span {
    width: 10px;
    height: 13px;
    background-position: -151px -221px;
    vertical-align: -2px;
}

.footer .footer_l button:nth-child(2) span {
    width: 15px;
    height: 13px;
    background-position: -215px -54px;
    vertical-align: -1px;
}

.footer .footer_l div {
    width: 182px;
    display: flex;
    justify-content: space-between;
}

.footer .footer_l p {
    display: inline-block;
}

.footer .footer_l div p:first-child span {
    width: 18px;
    height: 18px;
    vertical-align: -4px;
    background-position: -114px -185px;
}

.footer .footer_l div p:nth-child(2) span {
    width: 18px;
    height: 18px;
    vertical-align: -4px;
    background-position: -214px -20px;
}

.footer .footer_r {
    width: 893px;
    height: 100%;
}

.footer .footer_r dl {
    height: 170px;
    float: left;
    margin-left: 131px;
}

.footer .footer_r dl dt {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 20px;
}

.footer .footer_r dl dd {
    margin-bottom: 14px;
}
/*底部信息样式结束*/

/*版权信息样式开始*/
.footer_info {
    height: 100px;
    background-color: #FAFAFA;
}

.footer_info .ctr>p{
    display: inline-block;
    line-height: 100px;
    color: #999999;
    margin-right: 21px;
}

.footer_info .ctr>div {
    display: inline-block;
    width: 188px;
    height: 60px;
    border: 1px solid #D5DADF;
    vertical-align: -19px;
}

.footer_info .ctr p span, .footer_info .ctr div span{
    width: 20px;
    height: 24px;
    display: inline-block;
    background: url(../mainimg/sprite2.png) no-repeat -132px -20px;
    margin: 17px 10px 18px 20px;
}

.footer_info .ctr p:nth-child(2) span {
    width: 15px;
    height: 15px;
    background-position: -152px -185px;
    vertical-align: -20px;
}

.footer_info .ctr img {
    margin-top: 40px;
}

.footer_info .ctr .jubao {
    font-size: 14px;
}

.footer_info .ctr>div p {
    color: #999999;
    font-size: 12px;
    display: inline-block;
}
/*版权信息样式结束*/
下雨打伞干嘛
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
拉勾网招聘数据爬取（公布源码）
python爬虫人工智能大数据
09-16 5399
公众号爬取拉勾网招聘数据，本文只讲重点，因为爬任何一个网站，可能最重要的就是遇到反爬怎么办，也就是第一步能不能爬下来数据的问题，本文讲如何爬取拉勾招聘数据 环境及软件：Linux乌邦图、redis、mysql、pycharm软件 所需库和包：截图中的 0、运行方法 构造城市列表和岗位列表，并发送请求，本文仅作学习参考，如果想爬取更多数据，请大家自己写方法获取拉勾所有城市和所有岗位 ...
百度新闻html css代码,仿百度首页XHTML+CSS代码
weixin_39696518的博客
06-07 835
百度一下,就就知道了/* *{margin:0px;padding:0px;font-size:14px;} 不要使用*，会影响整体的速度，只对需要重置的标签进行定义就可以了,还有当一个属性的数值为 0 时可以不加px，属性中的最后一个分号可以不写(个人习惯) */body,div,form,input{font-size:14px;margin:0;padding:0}/* a{color:rg...
仿拉勾网招聘HTML+CSS
03-04
精仿拉勾网招聘系统的HTML+CSS代码
拉勾网主页面HTML+CSS布局代码，附结果图精灵图
下雨打伞干嘛的博客
12-18 1867
commen.css+reset.css代码链接：链接: link. style.css代码链接：链接: link. 精灵图： HTML内容，文件名：index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
python爬虫：爬取拉勾网职位并分析
程序人生的博客
05-29 5996
点击上方“程序人生”，选择“置顶公众号”第一时间关注程序猿（媛）身边的故事作者闲庭信步原文https://blog.csdn.net/danspace1/article/...
仿拉勾网HTML模板
10-24
仿拉勾网HTML模板,真的跟拉勾网一样，拉勾网是所有招聘网站最好看的了把。
拉勾网主页面HTML+CSS布局代码，commen.css+reset.css代码部分
下雨打伞干嘛的博客
12-18 681
HTML页面布局位置： commen.css .fl { float: left; } .fr { float: right; } a { text-decoration: none; color: black; } input { border: 0; outline: none; } .ctr { margin: 0 auto; width: 1206px; } .clearfix:after{ content: "";
前端——拉勾网菜单：CSS+div实现鼠标滑动特效制作
Searchin_R的博客
09-26 1334
昨天逛拉勾网，发现它首页菜单在鼠标移上去之后会出现二级子菜单，正好最近在整理HTML的知识，就仿照这拉勾网首页的菜单写了大体的框架。 原网页如下： 如果鼠标滑过相应的区域，会出现相应的二级子菜单。 1、布局分析 这个菜单的布局特别明显，就是一个大的div_leftmenu,然后再在该div中设置各类小的div。相关的属性可以在拉勾网的源代码上找到。在每个小块中，如“技术”块，又分为...
【HTML+CSS】CSS篇章
amethystlmy9的博客
09-02 188
层叠样式表 css语法 1.字体相关样式
HTML+CSS+JS的爱心代码.zip
06-19
HTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码....
微信小程序源码-仿拉勾网APP界面.zip
06-26
微信小程序源码-仿拉勾网APP界面.zip
美淘网使用DIV+CSS设计Web前端页面.zip
11-06
这是一个有关于的网页制作页面，是大学生课堂上的项目，也是初学者需要借鉴的。应该可以帮到初学者进一步的了解div+css技术
仿拉勾网招聘网站模板HTML整站
01-09
仿拉勾网招聘网站模板HTML整站
web前端旅游页面div+css实现
12-17
这是一套完整的web前端旅游页面， 一共7个页面， 并且在登录、注册时具有js表单校验， 页面之间实现了跳转。
仿拉勾网页模板
09-13
共38个页面,所有js,css都有
css常用代码大全(html+css代码).pdf
07-13
这些只是CSS的一部分基础知识，实际应用中还有更复杂的布局技术，如响应式设计、Flexbox和Grid布局，以及更高级的动画和过渡效果。熟悉并熟练运用这些CSS代码，将能极大地提升网页设计的质量和效率。
登录页面HTML+CSS+JS代码.pdf
11-13
【标题】"登录页面HTML+CSS+JS代码.pdf"描述了一个网页登录界面的实现，包含HTML、CSS和JavaScript三部分代码。这个登录页面是互联网应用中常见的用户验证入口，主要功能是收集用户输入的用户名和密码，进行提交验证...
html+css+js学习代码.zip
最新发布
01-01
html+css+js学习代码html+css+js学习代码html+css+js学习代码 html+css+js学习代码html+css+js学习代码html+css+js学习代码 html+css+js学习代码html+css+js学习代码html+css+js学习代码 html+css+js学习代码...
html+css我的家乡.zip
06-24
此外，CSS预处理器如Sass或Less也可能被用来编写更高效的CSS代码，它们提供了变量、嵌套规则和混合功能等，提高了代码的可维护性。 压缩包中的“我的家乡”很可能就是这些页面的文件名，这表明每个页面都可能以作者...
包含五个页面的html+css网站代码
06-12
在编写HTML和CSS代码之前，您可以先设计一下您的网站，包括每个页面的布局和内容。这将有助于您更好地组织代码和提高效率。 最后，您可以参考一些在线资源和教程，例如w3schools、MDN Web Docs和Codecademy等，来...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值