前端学习（294）：rem小实例

alt+z转换为rem

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="./iconfont1/"><title>移动端</title><link rel="stylesheet" href="./iconfont1/iconfont.css"><style>body{font-size: 0.16rem;}html{font-size: 26.66666667vw;}*{margin: 0;padding: 0;}ul{list-style: none;}img{display: block;}a{text-decoration: none;color: #333333;}header{height: 0.45rem;background:#00b38a;font-size: 0.2rem;color: white;text-align: center;line-height: 0.45rem;}.login{height: 0.43rem;display: flex;justify-content: space-between;align-items: center;font-size: 0.14rem;}.login p{margin-left: 0.16rem;}.login div{width: 0.84rem;height: 0.3rem;background: #f5f5f5;margin-right: 0.15rem;text-align: center;line-height: 0.3rem;border-radius: 0.15rem;}.login div a{display: block;width: 100%;height: 100%;}.list{}.list li{height: 0.9rem;border-top: 0.01rem #e8e8e8 solid;display: flex;align-items: center;}.list .list_img{width: 0.6rem;margin: 0 0.1rem 0 0.14rem;}.list .list_img img{width: 100%;}.list .list_info{flex: 1;}.list .list_info h2{font-size: 0.18rem;}.list .list_info p:first-of-type{font-size: 0.14rem;display: flex;justify-content: space-between;}.list .list_info p:first-of-type span:last-of-type{margin-right: 0.14rem;color: #17b994;}.list .list_info p:last-of-type{font-size: 0.12rem;color: #888888;margin-top: 0.08rem;}.more{height: 0.5rem;background: #fafafa;border-top: 0.01rem #e8e8e8 solid;text-align: center;line-height: 0.5rem;}.more a{display: block;width: 100%;height: 100%;}footer{height: 1.15rem;text-align: center;font-size: 0.12rem;line-height: 0.22rem;padding-top: 0.27rem;box-sizing: border-box;margin-bottom: 0.45rem;}.tabber{width: 100%; height: 0.45rem;border-top: 0.01rem #e8e8e8 solid;display: flex;position: fixed;bottom: 0;background: #f6f6f6;font-size: 0.18rem;color: #c2cfcc;}.tabber i{font-size: 0.22rem;position: relative;top: 0.02rem;}.tabber div{flex: 1;text-align: center;line-height: 0.45rem;}.tabber .active{background: #e7f3f0;color:#00b38a;}</style>
</head>
<body><header>拉勾网</header><section class="login"><p>十秒钟定制职位</p><div><a href="#">去登陆</a></div></section><ul class="list"><li><div class="list_img"><a href="#"><img src="./lagou1.jpg"> </a></div><div class="list_info"><h2><a href="">正大艾特</a></h2><p><span>中级java工程师</span><span>13k-20k</span></p><p>今天11：16</p></div></li></ul><ul class="list"><li><div class="list_img"><a href="#"><img src="./lagou1.jpg"> </a></div><div class="list_info"><h2><a href="">正大艾特</a></h2><p><span>中级java工程师</span><span>13k-20k</span></p><p>今天11：16</p></div></li></ul><ul class="list"><li><div class="list_img"><a href="#"><img src="./lagou1.jpg"> </a></div><div class="list_info"><h2><a href="">正大艾特</a></h2><p><span>中级java工程师</span><span>13k-20k</span></p><p>今天11：16</p></div></li></ul><ul class="list"><li><div class="list_img"><a href="#"><img src="./lagou1.jpg"> </a></div><div class="list_info"><h2><a href="">正大艾特</a></h2><p><span>中级java工程师</span><span>13k-20k</span></p><p>今天11：16</p></div></li></ul><ul class="list"><li><div class="list_img"><a href="#"><img src="./lagou1.jpg"> </a></div><div class="list_info"><h2><a href="">正大艾特</a></h2><p><span>中级java工程师</span><span>13k-20k</span></p><p>今天11：16</p></div></li></ul><ul class="list"><li><div class="list_img"><a href="#"><img src="./lagou1.jpg"> </a></div><div class="list_info"><h2><a href="">正大艾特</a></h2><p><span>中级java工程师</span><span>13k-20k</span></p><p>今天11：16</p></div></li></ul><section class="more"><a href="">加载更多</a></section><footer><p>@2019 lan.com,all right reserved</p><p><a href="#">移动端</a> ! <a href="#">移动端</a> ! <a href="#">移动端</a></p></footer><section class="tabber"><div class="active"><i class="iconfont icon-home"></i> 职位</div><div><i class="iconfont icon-sousuo-"></i> 搜索</div><div><i class="iconfont icon-wode"></i> 我的</div></section>
</body>
</html>

前端学习（294）：rem小实例相关推荐

2020最新版前端学习路线图--微信小程序制作原来如此简单
黑马程序员前端学习路线图大纲中第六阶段的学习是微信小程序的学习:主要介绍了前端学习路线图中微信小程序的学习目标,前端学习路线图中微信小程序的市场价值,前端学习路线图中微信小程序的重点知识.前端学习路线 ...
前端学习(2900):微信小程序简介
前端学习（1169）:实例数组find
学习前端第三天-----小程序制作
几天没有更新,最近参加了前端学习的夏令营,收获了很多东西. 学习周期 7月26~8月4日学习内容 1. 统一讲授基础的技术(前端 + 后端) 2. 暂定时间 7月30日结束基础技术讲解 3. 7月 ...
前端学习路线_前端学习路线图
2020年全新前端学习路线图分享给大家! 学习是一个循序渐进的过程,是一件非常难得坚持的事情.如果真的想学习前端开发,一定要下决心! 我这里分享给你的前端学习路线图,希望对你有帮助,以下为2020年更 ...
web 前端学习线路图
web 前端学习线路图一.HTML 教程 HTML教程 HTML简介 HTML编辑器 HTML基础 HTML元素 HTML属性 HTML标题 HTML段落 HTML样式 HTML格式化 HTML引用 ...
react实战项目_前端学习路线图--从网页设计到项目开发
前端学习路线是螺旋上升的,需要耗费的时间和精力不比其他编程的少,由于其稳健性的特点,使其成为大多数企业开发的刚需编程语言.在网上看到有很多的前端学习路线图,但大部分的前端学习路线图是很零碎的,没有系统 ...
入门前端学习路线图【送书】
大家好,我是若川.记得点上方音频听小姐姐配音,超级好听. 华章图书又赞助了书籍送福利给大家.本次送4本书的抽奖方式是:截止到9月6日(周一)20:00,在留言区留言任意内容.我会在留言区抽取「1位」关 ...
前端自适应----单位rem
下边是大神对<移动前端自适应解决方案和比较>的链接: 移动前端自适应解决方案和比较通过使用,自我感觉网易的解决方案是最方便我们使用时候的计算. 代码: (function(factory ...

前端学习（294）：rem小实例

前端学习（294）：rem小实例相关推荐

最新文章

热门文章