/* * -- 样式说明 -- * 最大优先实现法，全局能实现不用区域，区域能实现不用模板， * 模板能实现不用界面，界面能实现不用标签 * g - 全局 * t - 区域 * m - 模板 * ui - 界面 * lb - 标签 * 特殊标签 * j - 脚本 * fix - 浮窗 */
思考添加的样式
/** * form - 表单 * focus - 焦点图 * is | reg - 正则 * f - 一切浮窗 * */
如下的公共样式，经过不断的修改和完善才得到的。
/*base style*/
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, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary{ margin:0; padding:0;}
body{ font-family:"\5FAE\8F6F\96C5\9ED1","Microsoft Yahei","Arial"; color:#333; background-color:#fff; font-size:14px; overflow-x:hidden;}
a{ color:#06f; text-decoration:none;}
a:hover{ color:#f60; text-decoration:none;}
img{ border:none;}
i,em{ font-style:normal;}
li{ list-style-type:none;}
textarea{ resize:vertical;}
input, select, textarea{ font-family:"\5FAE\8F6F\96C5\9ED1","Microsoft Yahei","Arial"; background-color:#fff; margin:0; padding:0; outline:none;}
/*global style*/
.g-fl{ float:left;}
.g-fr{ float:right;}
.g-c{ zoom:1;}
.g-c:after{ clear:both; content:"."; display:block; height:0; visibility:hidden;}
.g-w{ width:320px; margin-left:auto; margin-right:auto;}
.g-hide{ display:none !important;}
再次修改，解决图片百分比的问题和图片下面会出现高度的问题
/*base style*/
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, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary{ margin:0; padding:0;}
body{ font-family:"\5FAE\8F6F\96C5\9ED1","Microsoft Yahei","Arial"; color:#333; background-color:#fff; font-size:14px; overflow-x:hidden;}
a{ color:#06f; text-decoration:none;}
a:hover{ color:#f60; text-decoration:none;}
img{ border:none; vertical-align:middle; max-width: 100%;}
i,em{ font-style:normal;}
li{ list-style-type:none;}
textarea{ resize:vertical;}
input, select, textarea{ font-family:"\5FAE\8F6F\96C5\9ED1","Microsoft Yahei","Arial"; background-color:#fff; margin:0; padding:0; outline:none;}
/*global style*/
.g-fl{ float:left;}
.g-fr{ float:right;}
.g-c{ zoom:1;}
.g-c:after{ clear:both; content:"."; display:block; height:0; visibility:hidden;}
.g-w{ max-width:414px; min-width:320px; width: 96%; margin-left:auto; margin-right:auto;}
.g-hide{ display:none !important;}
再次修改二，修改字体，禁止长按链接与图片弹出菜单，禁止选中文本
/*base style*/
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, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary{ margin:0; padding:0;}
html,body{ font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif; color:#000; background-color:#fff; font-size:16px; overflow-x:hidden; -webkit-user-select: none; user-select: none;}
a{ color:#06f; text-decoration:none;}
a:hover{ color:#f60; text-decoration:none;}
img{ border:none; vertical-align:middle; max-width: 100%; -webkit-touch-callout: none;}
i,em{ font-style:normal;}
li{ list-style-type:none;}
textarea{ resize:vertical;}
input, select, textarea{ font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif; background-color:#fff; margin:0; padding:0; outline:none;}
/*global style*/
.g-fl{ float:left;}
.g-fr{ float:right;}
.g-c{ zoom:1;}
.g-c:after{ clear:both; content:"."; display:block; height:0; visibility:hidden;}
.g-w{ max-width:414px; min-width:320px; width: 96%; margin-left:auto; margin-right:auto;}
.g-hide{ display:none !important;}
/*
a, img {
-webkit-touch-callout: none; //禁止长按链接与图片弹出菜单
}
html, body {
-webkit-user-select: none; //禁止选中文本（如无文本选中需求，此为必选项）
user-select: none;
}
*/
PC端的公共样式的思路
/*base style*/
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, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary{ margin:0; padding:0;}
body{ font-family:"\5FAE\8F6F\96C5\9ED1","Microsoft Yahei","Arial"; color:#333; background-color:#fff; font-size:15px; background-image:url(about:blank); background-attachment:fixed; overflow-x:hidden;}
a{ color:#06f; text-decoration:none;}
a:hover{ color:#f60; text-decoration:none;}
img{ border:none; vertical-align:middle; max-width: 100%;}
i,em{ font-style:normal;}
li{ list-style-type:none;}
textarea{ resize:vertical;}
input, select, textarea{ font-family:"\5FAE\8F6F\96C5\9ED1","Microsoft Yahei","Arial"; background-color:#fff; margin:0; padding:0; outline:none;}
area{ outline: none;}
/*global style*/
.g-fl{ float:left;}
.g-fr{ float:right;}
.g-c{ zoom:1;}
.g-c:after{ clear:both; content:"."; display:block; height:0; visibility:hidden;}
.g-w{ max-width: 1200px; min-width: 980px; width: 96%; margin-left:auto; margin-right:auto;}
.g-hide{ display:none !important;}