<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--完美视口设定--><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}/*设置htmlfont-size的大小，则rem就可以派上用场假如：设计图是750px大小的要充满整个可视区域也就是100vw那么1px = 0.1333333333333333vw*/html{/*如果这个设置的话，理论上是可行的但是浏览器默然是字体最小是12px*/ /* font-size:0.1333333333333333vw;*//*扩大40倍相当于40px*/font-size:5.3333333vw}header{padding: 10px ;border-bottom: 0.5px solid #DADADA}.top{/*vw指的视口大小当值是100vw的时候不同的手机代表着宽度是100%*//*上面的设置是1rem = 40px 如果我想屏幕正好视频可以区域750/40*/width: 17.45rem;display: flex;margin: auto;justify-content:space-between;align-items: center;}.top-left{width:8.3rem;height:2.05rem;}.top-right{width: 3.7rem;height: 1.35rem;}.search{width: 17.45rem;margin: auto;display:flex;font-size: 0.75rem;justify-content: space-between;align-items: center;padding: 10px;}.chnose-city{border-color: black #fff #fff #fff;border-style: solid;border-width: 0.25rem 0.15rem 0 0.15rem;height: 0;width: 0;}.city{width: 2.3rem;height: 1.6rem;line-height: 1.6rem;}.search-content{width: 11.8rem;height: 1.625rem;line-height: 1.625rem;font-size:0.28rem;color: #AAABB3;border-radius: 2rem;background: #F5F5F5;justify-content: space-between;}.face{width: 1.5rem;height: 1.5rem;}.search-content span{padding-left:1.3rem;}.banner{display: block;width:17.25rem;margin: auto;height: 6rem;border-radius: 0.16rem;}.item{display: flex;width: 17.25rem;margin: auto;padding-top: 10px;}.item a{width:3.45rem;text-align: center;font-size: 0.65rem;text-decoration: none;color:#666;}.item a img{display: block;width: 2rem;height: 2rem;margin: auto;}</style>
</head>
<body><header><div class="top"><img class="top-left" src=".png"><img class="top-right" src="@3x-1589358121653.png"></div></header><div class="search"><div class="city">北京市</div><div class="chnose-city"></div><div class="search-content"><a></a><span>瘦脸针</span></div><img src=".png" class="face"></div><img class="banner" src=".jpg"/><section><div class="item"><a href="#"><img src=".png"><span>脂肪填充</span></a><a href="#"><img src=".png"><span>口腔齿科</span></a><a href="#"><img src=".png"><span>胸部</span></a><a href="#"><img src=".png"><span>美体塑形</span></a><a href="#"><img src=".png"><span>鼻部</span></a> </div><div class="item"><a href="#"><img src=".png"><span>面部轮廓</span></a><a href="#"><img src=".png"><span>玻尿酸</span></a><a href="#"><img src=".png"><span>除皱脸</span></a><a href="#"><img src=".png"><span>眼部</span></a><a href="#"><img src=".png"><span>鼻部</span></a> </div></section>
</body>
</html>
本文发布于:2024-01-31 14:06:53，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170668121529069.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
