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="data:images/1_01.gif" alt=""/>

<section class="section1">

    <span>1</span>

    <span>2</span>

    <span>3</span>

    <span>4</span>

    <span>5</span>

    <span>6</span>

    <span>7</span>

    <span>8</span>

    <span>9</span>

</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.实现效果

Web前端框架与移动应用开发第八章的更多相关文章

Web前端框架与移动应用开发第七章：二
3.练习3:抽奖大转盘注意事项:需要使用Zepto.js,区别于zepto.min.js 实现效果:转盘转动抽奖 html <!DOCTYPE html><html>< ...
Web前端框架与移动应用开发第七章
1.练习1:焦点图切换 html: <!doctype html><html><head> <meta charset="utf-8" / ...
React 还是 Vue: 你应该选择哪一个Web前端框架？
学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue 如果你喜欢简单和“能用就行”的东西 ...
最受Web前端开发者欢迎的五大开发工具
工其事,必利于器.好的开发工具毋容置疑会帮助Web前端开发者事半功倍,51CTO在上期主办的技术沙龙<大型网站PHP开发之道> 对现场的百余位Web开发者做了问卷调查,后经51CTO调研小 ...
Web前端框架学习成本比较及学习方法
就项目中自己用过的前端框架的学习成本比较与学习心得分享刚工作时间不长只用过这几个框架下面是难易程度比较: 不论哪个web前端框架, 究其本质都是把页面的数据传递给后台服务器语言(如java)进行处理 ...
国内5款优秀的WEB前端框架
1. JX(腾讯) 官网地址:http://alloyteam.github.io/JX/#home JX 是一个类似 Google Closure Library 的 Web 前端开发框架,服务于 ...
Web前端框架与类库
Web前端框架与类库的思考说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此 ...
Web前端框架与类库的思考
说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此毫无意义,框架也是一样.在技 ...
Web前端框架汇总
在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apach ...

随机推荐

Marriage Match III HDU - 3277（二分权值 + 拆点建边）
题意: 只不过是hdu3081多加了k种选择想一下,最多能玩x轮,是不是就是每个女生能最多选x个男生现在题中的每个女生比3081多了k中选择那就把女生拆点 i i‘ i --> i ...
Linux 多网卡绑定bond
mode=0:负载均衡模式,增加带宽,两块网卡使用的是同一个MAC地址,所以必须配置网卡相连的交换机,这两个端口应采用聚合方式. mode=1:主备模式,一个线断了,另一条自动备援. mode=6:负 ...
搭建本地yum源并定时同步
在生产中内网的机器都是不能访问外网,所以需要搭建本地yum源.以中国科学科技大学的yum源为基准.http://mirrors.ustc.edu.cn/ 有些模块会同步失败,可以wget下载至指定位置 ...
rt-thread之串口设备的配置流程
@2019-01-30 [小记] > rt-thread 工程启动之后先是进入函数 rtthread_startup 做一些系统运行前的基础工作,主要有: * 板级硬件初始化 * 系统定时器初始 ...
BJWC2018上学路线
题目描述小B 所在的城市的道路构成了一个方形网格,它的西南角为(0,0),东北角为(N,M). 小B 家住在西南角,学校在东北角.现在有T 个路口进行施工,小B 不能通过这些路口.小B 喜欢走最短的 ...
springAop @AfterReturning注解获取返回值
@AfterReturning(returning="rvt", pointcut="@annotation(com.sinosoft.redis.cache.PutCa ...
BZOJ 4562: [Haoi2016]食物链（拓扑排序）
题面: https://www.lydsy.com/JudgeOnline/problem.php?id=4562 一句话题意:给一个DAG,求有多少条不完全相同的链,使链首入度为0,链尾出度为0. ...
kafaka quickstart
http://kafka.apache.org/ http://kafka.apache.org/downloads cd /root/kafuka/kafka_2.12-0.11.0.0 nohup ...
在Vue框架中使用百度地图
1.首先在index.html中引入百度地图 <script type="text/javascript" src="http://api.map.baidu.co ...
react-native中的请求数据
很多移动应用都需要从远程地址中获取数据或资源.你可能需要给某个 REST API 发起 POST 请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容. 使用 Fetch React ...

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

1.html代码：

Web前端框架与移动应用开发第八章的更多相关文章

随机推荐

热门专题