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 ...
随机推荐
- SpringMVC的缓存对静态资源的影响 304 Not Modified
我们知道在springmvc的配置中,可以添加缓存,但是缓存到底对静态资源有什么影响? 测试 没有添加缓存 <mvc:resources mapping="/image/**" ...
- Django 静态文件相关设置
项目根目录创建 static 文件夹 settings.py 中加入 STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static") ...
- Leetcode 215. 数组中的第K个最大元素 By Python
在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 示例 1: 输入: [3,2,1,5,6,4] 和 k = 2 输出: 5 ...
- 自学华为IoT物联网_09 OceanConnect业务流程
点击返回自学华为IoT物流网 自学华为IoT物联网_09 OceanConnect业务流程 1. 物流网重要的连个协议介绍 1.1 重要物联网协议介绍----MQTT MQTT(消息队列遥测传输) ...
- Android 一些关于 Activity 的技巧
锁定 Activity 运行时的屏幕方向 Android 内置了方向感应器的支持.在 G1 中,Android 会根据 G1 所处的方向自动在竖屏和横屏间切换.但是有时我们的应用程序仅能在横屏 / 竖 ...
- 洛谷 P1129 [ZJOI2007]矩阵游戏 解题报告
P1129 [ZJOI2007]矩阵游戏 题目描述 小\(Q\)是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏――矩阵游戏.矩阵游戏在一个\(N*N\)黑白方阵进行(如同国际象棋一般 ...
- Chinese Mahjong UVA - 11210 （DFS）
先记录下每一种麻将出现的次数,然后枚举每一种可能得到的麻将,对于这个新的麻将牌,去判断可不可能胡,如果可以胡,就可以把这张牌输出出来. 因为eye只能有一张,所以这个是最好枚举的,就枚举每张牌成为ey ...
- nio 阻塞 非阻塞 同步 异步
https://mp.weixin.qq.com/s/5SKgdkC0kaHN495psLd3Tg 说在前面 上篇NIO相关基础篇二,主要介绍了文件锁.以及比较关键的Selector,本篇继续NIO相 ...
- 安装PHP ImageMagick笔记
安装过程 $ pecl install imagick 当提示Please provide the prefix of Imagemagick installation [autodetect] :直 ...
- 洛谷P3321 序列统计
气死了,FFT了半天发现是NTT... 1004535809 这个东西是NTT模数,原根为3. 题意:给定集合,元素的大小不超过M.用这些元素组成长为n的序列,要求乘积模M为k,求方案数. n < ...