Web前端框架与移动应用开发第八章

Web前端框架与移动应用开发:制作58招聘专题页

1.html代码:

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/58city.css"/>
    <title>58招聘季专题页title>
head>
<body>
<img class="img" src="images/1_01.gif" alt=""/>
<section class="section1">
    <span>1span>
    <span>2span>
    <span>3span>
    <span>4span>
    <span>5span>
    <span>6span>
    <span>7span>
    <span>8span>
    <span>9span>
section>
<section class="section2">
    <h2>h2>
    <div class="wrap">
        <p>投递简历有机会获得开工礼物呦p>
        <div class="links">
            <a href="#">销售a> <a href="#">客服a> <a href="#">普工a>
            <a href="#">司机a> <a href="#">快递a> <a href="#">保安a>
            <a href="#">库管a> <a href="#">店员a> <a href="#">会计a>
            <a href="#">法务a> <a href="#">人事a> <a href="#">行政a>
            <a href="#">设计a> <a href="#">美工a> <a href="#">家教a>
        div>
        <div class="links2">
            <a href="#">写简历a>
            <a href="#">更多职位a>
        div>
    div>
section>
<section class="section3">
    <h2>h2>
    <div class="wrap">
        <div class="list">
            <div class="p">
                <h3>财务/审计h3>
                <a href="#">会计师a> <a href="#">出纳a>
            div>
            <div class="p">
                <h3>房产中介h3>
                <a href="#">销售经理a> <a href="#">客服a>
            div>
            <div class="p">
                <h3>广告会展h3>
                <a href="#">广告设计a> <a href="#">企业策划a>
            div>
            <div class="p">
                <h3>酒店旅游h3>
                <a href="#">大堂经理a> <a href="#">前台a>
            div>
            <div class="p">
                <h3>医疗护理h3>
                <a href="#">护士a> <a href="#">药剂师a>
            div>
            <div class="p">
                <h3>餐饮h3>
                <a href="#">厨师a> <a href="#">配菜师a>
            div>
            <div class="links3">
                <p>24小时反馈,<span>更多急速入职机会span>p>
            div>
        div>
    div>
section>
<footer>
    <p>@58.com 帮助中心p>
footer>
<script>
    /*有些不一样*/
    (function () {
        var supportsOrientationChange = 'onorientationchange' in window ? 'orientationchange' : 'resize';
        var timeoutId;
        function setRem() {
            var clientWidth = document.documentElement.clientWidth;
            var nowPX = clientWidth / 375 * 100;
            document.documentElement.style.fontSize = nowPX + 'px';
        }
        setRem();
        window.addEventListener(supportsOrientationChange, function () {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(function () {
                setRem();
            }, 300);
        }, false);
    })();
script>
body>
html>


2.css
@charset "UTF-8";/*统一编码格式*/
*{
    margin: 0;
    padding: 0;
}
html{
    font-size: 100px;
    background-color: #DF3A3A;
}
.img{
    width: 100%;
}
a{
    text-decoration: none;
}
img{
    vertical-align: top;
}
.section1{
    width:3.75rem ;
    height: 1.36rem;
    background: url(../images/2_02.jpg);
    background-size:contain;
    display: flex;
    padding-top: 0.585rem;
    padding-left: 0.585rem;
    box-sizing: border-box;
    margin-bottom: 0.45rem;
}
.section1 span{
    font-size: 0.24rem;
    color: #FFFFFF;
    font-weight: bold;
    display: block;
    width: 0.24rem;
    height: 0.3rem;
    line-height: 0.3rem;
    text-align: center;
    outline: 1px solid  #fff;
    margin-right: 0.03rem;
}
.section2{
    margin-bottom: 0.5rem;
}
.section2 h2{
    width: 3.75rem;
    height: 0.425rem;
    background: url(../images/3_05.jpg) ;
    background-size: contain;

}
.wrap{
    background-color: #FFDC4F;
    width: 3.53rem;
    margin: -0.02rem auto 0;
    padding-bottom: 0.21rem;
    border-radius: 0 0 0.06rem 0.06rem;
}
.wrap p{
    font-size: 0.15rem;
    color: #CC7304;
    text-align: center;
    font-weight: bold;
    line-height: 0.41rem;
}
.links{
    font-size: 0px;
    display: flex;
    justify-content: center;
    flex-wrap:wrap ;
}

.section2 .links a{
    font-size: 0.18rem;
    color: #FFFFFF;
    font-weight: bold;
    background: url(../images/4_08.jpg);
    background-size: contain;
    display: block;
    width: 0.98rem;
    height: 0.4rem;
    line-height: 0.4rem;
    text-align: center;
    margin: 0.05rem  0.055rem;
}
.links2{
    font-size: 0px;
    padding-top: 0.13rem;
    padding-left: 0.74rem;
}
.links2 a{
    font-size: 0.18rem;
    color: #df3938;
    font-weight: bold;
    text-decoration: underline;
    margin-right: 0.54rem;
    background: url(../images/6_08.jpg) right no-repeat;
    background-size:  0.07rem 0.1rem;
    padding-right: 0.11rem;
}
.section3{
    margin-bottom: 0.5rem;
}
.section3 h2{
    width: 3.75rem;
    height: 0.425rem;
    background: url(../images/5_02.jpg) no-repeat 100%;
    background-size: contain;
}
.section3 .list{
    font-size: 0px;
    background-color: #FFFFFF;
    margin: 0 0.09rem;
    padding: 0.25rem  0.14rem;
}
.section3 h3{
    font-size: 0.18rem;
    color: #DE3B3C;
    padding-top: 0.15rem;

}
.section3 .p{
    border-bottom: 1px solid #EFF5F5;
    background: url(../images/9_14.jpg) right no-repeat;
    background-size: 0.07rem 0.1rem;
}

.section3 a{
    display: inline-block;
    padding: 0.07rem 0.15rem;
    font-size: 0.14rem;
    color: #ABABAB;
    background-color: #EFF5F5;
    margin: 0.16rem 0.08rem 0.22rem 0;
}
.link3{

}
.section3 p{
    font-size: 0.18rem;
    color: #DE8104;
    padding-top: 0.16rem;
}
.section3 p span{
    color: #DF3B39;
    text-decoration: underline;
}
footer p{
    color: #BF1B1F;
    font-size: 0.18rem;
    text-align: center;
    margin-bottom: 0.24rem;
}



3.实现效果

 

 



转载于:https://www.cnblogs.com/zeussbook/p/9100816.html

你可能感兴趣的:(Web前端框架与移动应用开发第八章)