标签：rap 布局 微软雅黑 name value pad tab opacity auto
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
宽度等于设备宽度 缩放比例1 最小1 最大1 不允许用户手动缩放
这样移动端的图片设置：
img{ max-width: 100%; vertical-align: top;} 这样属性 就不会超出屏幕宽度
div也是如此
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Document</title> <link rel="stylesheet" href="0.css"> <style> body,ul,li,dl,dt,dd,p,ol,h1,h2,h3,h4,h5,h6,form,img,table,fieldset,legend{margin:0; padding:0;}ul,li,ol{list-style:none;}img,fieldset{border:0; }img{display:block;}a{text-decoration:none; color:#333;}h1,h2,h3,h4,h5,h6{font-weight:100;}body{ font-family:"微软雅黑";} input,a{outline:none;} /*..0000000*/ /*html{font-size:12px;}*/ .nav ul{ max-width:640px; margin:0 auto; display: flex; flex-flow: row nowrap;background-color: #C51010;justify-content: space-around; height: 6rem; } li{font-size: 2.5rem;color: white;text-align: center;line-height: 6rem } img{ max-width: 100%; vertical-align: top; } .main{margin: 0 auto;max-width:640px;position: relative; } .main a:nth-child(3){ width: 10%;height:5%;/*background-color: orange;*/display: inline-block;position: absolute;opacity: 0.9; left: 39%;top: 93%; } </style> <!-- <link rel="stylesheet" href="http://m.jjchfcyy.cn/zt2/media_screen.css"> --> </head> <body> <div class="nav"> <ul> <li>首页</li> <li>简介</li> <li>科室</li> <li>专家</li> <li>路线</li> </ul> </div> <div class="main"> <a href=""><img src="http://m.jjchfcyy.cn/zt2/zt4.jpg" alt=""></a> <img src="http://www.jjfcyy.com/templets/mypctemp/images/1-1F4251144000-L.jpg" alt=""> <a href="#"></a> </div> </body> </html>
标签：rap 布局 微软雅黑 name value pad tab opacity auto
原文地址：https://www.cnblogs.com/nice2018/p/9670268.html
