前端学习（294）：rem小实例
生活随笔
收集整理的這篇文章主要介紹了
前端学习（294）：rem小实例
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
alt+z轉(zhuǎn)換為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>移動(dòng)端</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>拉勾網(wǎng)</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>中級(jí)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>中級(jí)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>中級(jí)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>中級(jí)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>中級(jí)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>中級(jí)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="#">移動(dòng)端</a> ! <a href="#">移動(dòng)端</a> ! <a href="#">移動(dòng)端</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>?
總結(jié)
以上是生活随笔為你收集整理的前端学习（294）：rem小实例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： pymssql出现的错误
- 下一篇： 前端学习（224）:iconfont矢量