在初級web前端工程師的作業中，經常需要寫一些靜態/H5/花里胡哨的頁面，這里分享我多年做這些頁面總結的經驗，希望對大家有點幫助，
頁面初始化及手機端viewport配置
直接上代碼：
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
margin:0;
padding:0;
border:0;
}
dl,ul,ol,menu,li {
list-style: none
}
body, html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";background: white;}
input {
outline: none;
}
a {
text-decoration: none; /* 去除默認的下劃線 */
outline: none; /* 去除舊版瀏覽器的點擊后的外虛線框 */
color: #000; /* 去除默認的顏色和點擊后變化的顏色 */
}
img{
width:100%;
height: auto;
}
.left{
float: left;
}
.right{
float: right;
}
html里加上
<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5">
這樣就可以解決為什么你的div和別人的div不一樣的問題，原因很簡單，瀏覽器是有默認css的，需要我們去屏蔽掉才能進行開發
圖框式內容布局（自己取的名字）
思路如下：
這里需要一個全域的盒子來放內容，沒有特殊情況，建議所有的內容放到盒子里，方便做回應式
.main-width{
width:1200px;
margin:0 auto;
}
能統一的要統一，防止代碼重復，能流動布局就少用浮動，能相對定位就少用絕對定位
這一點決定你的代碼量有多少，一般可以減少40%的代碼量，并且后期維護簡單
如下：
.a h1{
font-size:20px;
line-height:20px;
}
.b h1{
font-size:15px;
line-height:20px;
}
可以寫成：
h1{
line-height:20px;
}
.a h1{
font-size:20px;
}
.b h1{
font-size:12px;
}
為什么能用流動就少用浮動呢，因為浮動是不能撐起盒子的，所以不推薦用（除非你全vw，哪當我沒說）
少用絕對定位的原因是定位需要外層支持，而相對定位不需要，
先分享到，如果有補充的，歡迎評論留言，如果對你有用，麻煩點個關注，謝謝，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/251551.html
標籤：Html/Css
上一篇：網頁跳轉微信小程式的方案
下一篇：前端面試題 HTML（一）