前端学习(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>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/422785.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C语言进阶深度学习记录】三十二 函数指针与使用函数指针实现回调函数

回调函数是非常重要的概念 文章目录1 函数的类型2 函数指针2.1 函数指针的使用2.2 使用函数指针实现回调函数3 总结1 函数的类型 跟以前学数组的时候是一样的&#xff0c;C语言中的数组是有自己的类型的。函数也是有自己的类型的。 函数的类型由返回值、参数的类型、参数的个…

【C语言进阶深度学习记录】三十三 C语言中动态内存分配

如何在程序运行的时候动态给程序分配内存&#xff1f; 文章目录1 动态内存分配的意义1.1 C语言中如何动态申请内存空间1.2 malloc和free的用法1.3 calloc与realloc1.31 calloc和realloc的代码案例分析2 总结1 动态内存分配的意义 在C语言中&#xff0c;一切操作都是基于内存的…

java并发实战

推荐一个Java并发编程实战的学习专栏。此专栏为极客时间收费专栏。 学习交流加 个人qq&#xff1a; 1126137994个人微信&#xff1a; liu1126137994学习交流资源分享qq群 &#xff1a; 962535112 对于一个 Java 程序员而言&#xff0c; 能否熟练掌握并发编程是判断他优秀与否的…

a critical review of preetham skylight model 笔记

也是为了试用下Xmind。 上图是我用Xmind作的某篇文章的笔记。 感想&#xff1a; 1. 之以一直觉得这种东西没多大用处&#xff0c;回想起来大概是因为那时没有太多应用场景。 2. 如果留心&#xff0c;可以把许多事情做得更漂亮、更容易&#xff0c;这也是工具的用途。 贴一下软件…

【C语言进阶深度学习记录】三十四 C语言实现内存泄漏检测模块

上一篇文章学习了malloc系列的三个函数的使用。众所周知malloc的使用很容易导致内存泄漏。本文的目的就是使用C语言来实现内存泄漏检测模块&#xff0c;来帮忙自动检测我们写的程序中是否出现内存泄露。 文章目录1 内存泄露检测模块的实现原理1.1 各个函数模块的设计1.2 模块整…

重学前端----前端知识系统学习推荐专栏

推荐一个前端知识学习专栏。此专栏为极客时间收费专栏。 学习交流加 个人qq&#xff1a; 1126137994个人微信&#xff1a; liu1126137994学习交流资源分享qq群&#xff1a; 962535112 文章目录1 概述2 专栏内容2.1 模块一&#xff0c;JavaScript2.2 模块二&#xff0c;HTML 和 …

【C语言进阶深度学习记录】三十五 程序中的堆、栈以及静态存储区(数据区)

学习交流加 个人qq&#xff1a; 1126137994个人微信&#xff1a; liu1126137994学习交流资源分享qq群&#xff1a; 962535112 在我之前学习底层的知识的时候&#xff0c;也写过相关的内容。可以对比的学习&#xff1a;【软件开发底层知识修炼】二十 深入理解可执行程序的结构&a…

【C语言进阶深度学习记录】三十六 程序与进程的区别(程序的内存布局)

上一篇文章学了堆&#xff0c;栈以及静态存储区。它们实际上都是针对进程来说的。那么程序与进程有什么区别呢&#xff1f; 本文不细讲程序与进程。 1 程序与进程 1.1 什么是程序 写完的.c文件是源文件。也叫源代码。 将源代码编译后&#xff0c;会生成可执行文件程序&#…

使用Cucumber+Rspec玩转BDD(2)——邮件激活

使用CucumberRspec玩转BDD(2)——邮件激活 2009年3月2日 星期一 ### 温故知新 ###前面我们已经完成了新用户注册功能的开发&#xff0c;为了方便我们后面的开发工作且不扰乱之前的工作成果&#xff0c;我们先将这份源代码归档并做个标记。为了获得更好的阅读体验&#xff0c;读…

【C语言进阶深度学习记录】三十七 C/C++中造成程序内存错误的原因(野指针)

什么是野指针&#xff1f; 指针变量存的地址是一块非法内存地址。进而形成野指针。但是需要注意一点&#xff0c;野指针不是NULL指针。 文章目录1 野指针的概念1.1 野指针代码案例初探2 如何避免野指针2.1 野指针代码案例分析进阶3 总结1 野指针的概念 野指针变量中的值是非法…

算法补充 2011-9-12

设计一个算法将顺序表L中所有小于0的整数放前半部分&#xff0c;大于等于0的整数放在后半部分二叉树的删除设计一个算法将顺序表L中所有小于0的整数放前半部分&#xff0c;大于等于0的整数放在后半部分 思路:从左侧找出>0的元素&#xff0c;从右侧找出<0的元素,然后进行交…

【C语言进阶深度学习记录】三十八 C/C++语言中的函数声明与函数定义

文章目录1 函数的声明和定义1.1 代码分析2 总结1 函数的声明和定义 声明的意义在于告诉编译器程序单元的存在。只是告诉编译器它存在但是不在声明这里定义&#xff0c;有可能在当前文件中的其他地方或者其他文件中定义。如果在它还没有被定义之前就使用它&#xff0c;会导致编…

ASP.NET MVC3 系列教程 - 部署你的WEB应用到IIS 6.0

I:ASP.NET MVC3 部署的前期工作 1.确认部署的服务器操作系统环境 首先我们确认服务器的操作系统版本可以从系统命令行工具里输入: systeminfo 获取相关操作系统信息例如然后再确认IIS版本信息 -> 打开IIS管理工具即可接着确认.NET Framework的版本可以在系统命令行工具执行:…

【C语言进阶深度学习记录】三十九 C语言中的可变参数(参数可变的函数)

用过printf()函数的热都知道&#xff0c;printf的参数可以有多个&#xff0c;它是可变的&#xff0c;根据我们输出参数的类型以及个数的不同来确定参数。今天来学习C语言中参数可变的函数是如何实现的。 文章目录1 可变参数2 总结1 可变参数 首先我们要明白一点&#xff0c;在…

【离散数学中的数据结构与算法】一 最大公约数与最小公倍数之间的关系

文章目录1 算数基本定理2 最大公约数3 最小公倍数4 性质5 推论1 算数基本定理 设正整数 n>1&#xff0c; 则 n 可唯一地表示为&#xff1a; 其中 p1<p2<,…, <ps 是 s 个相异的素数&#xff0c; 指数ki都是正整数。 此定理又称作唯一析因定理&#xff08;unique f…

【离散数学中的数据结构与算法】二 欧几里得算法与裴蜀等式

欧几里得算法是计算两个数最大公因子算法。又称辗转相除法。本文将学习为什么辗转相除法可以求得两个数的最大公因子。同时也可以根据最大公因子计算两个数的最小公倍数。 文章目录1 欧几里得算法的理论基础1.1 欧几里得算法&#xff08;辗转相除法&#xff09;2 裴蜀等式&…

【离散数学中的数据结构与算法】四 加法法则与乘法法则

文章目录1 加法法则2 乘法法则3 例子3.1 例一3.2 例二3.3 例三4 总结1 加法法则 加法法则&#xff1a; 设事件 A 有 m 种产生方式&#xff0c; 事件 B 有n 种产生方式&#xff0c;则当 A 与 B 产生的方式不重叠时&#xff0c;“事件 A 或 B 之一” 有 mn 种产生方式。 加法法…

前端学习(310):清除浮动的方法

我们经常把高度塌陷问题也叫做常见的几种清除浮动的方法 高度塌陷问题—父元素高度自适应&#xff0c;子元素float后&#xff0c;造成父元素高度为0&#xff0c;就叫做高度塌陷问题 给父元素一个高度 缺点&#xff1a;无法高度自适应 父元素{overflow:hidden;} 缺点&#xf…