网页程序界面开发规范(2)

2020-05-06 11:12

288546051.doc

宋体12px 和14px 这是经过优化的字号，黑体字，一般选用11pt和14.7pt 的字号比较合适。例如：

font-size: 9pt; font-family: 宋体; font-size: 14.7pt; font-family: 黑体; 注意：在定义字体尺寸的时候，不要分别定死在具体的表格中或标记中，而应该定义样式表CSS文件，统一定义。如：

* {font-size : 9pt} ? 为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用
来人工干预分段。

? 行距用百分比来定义，通用性更强、更稳健，常用的两个行距的值是line-height:120%和150%。

? 所有的字号都应该用样式表来实现，禁止在页面中出现标记。

? 请不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现

二.Head规范：

? 主要页面必须要写，杜绝出现开发工具的默认标题字符，标题的格式为： </p><p>[机构名称] [分隔符] [网站名称] [分隔符] [模块名称] 第 6 页共 31 页 </p><p>288546051.doc </p><p>? 要注意编写<meta>代码： </p><p>? </p><p>公司版权注释 </p><p> ? 网页显示字符集简体中文： </p><p><META HTTP-EQUIV=\charset=gb2312\CONTENT=\ 繁体中文： </p><p><META HTTP-EQUIV=\charset=BIG5\CONTENT=\ 英语： </p><p><META HTTP-EQUIV=\charset=iso-8859-1\CONTENT=\ 网站简介 </p><p><META NAME=\?\ 搜索关键字 </p><p><META NAME=\? 脚本代码编写规范格式： </p><p> 或： </p><p><script language=\注意：如果被引用的JS文件中，含有中文字符，并且明确所在的工程默认编码是支持简体中文显示的，请加上charset属性： </p><p><script language=\charset=\ /> 第 7 页共 31 页 </p><p>src=\288546051.doc </p><p>否则，如果网站工程不支持GB2312会出现脚本错误。 ? CSS样式表文件引用编写规范格式： </p><p><link type=\/> 直接在页面中定义样式表： </p><p><style type=\? </style> </p><p>三.表格和列表的使用： </p><p>? 在编写在一个表格的中放置一个图片并且不允许空格的时候，必须写成： </p><p><img src=?> 而不能写成： </p><p><img src=?> 因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写： </p><p><img src=?> ? 在编写一个显示内容较多的网页时，要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，</p><p>第 8 页共 31 页 </p><p>288546051.doc </p><p>他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用 <tbody> 标记，以便能够使这个大表格分块显示。 </p><p>? 需要指定表格中一行的高度时，只要在该行的第一列指定高度，保证高度的唯一性；同理，需要指定一列的宽度时，只需要给该列的第一行的指定一个宽度。如果表格中使用样式表，那么高度属性应该在CSS中定义。 ? 表格中强行换行和强行不换行：强行换行的规范做法是定义一个CSS样式： </p><p>.wordWrap {WORD-BREAK: break-all; WORD-WRAP: break-word} 使用该CSS的方法如下： </p><p></nobr>标记不允许换行的内容： </p><p><nobr>这里的文本不会被换行</nobr> ? 和的数据列表排版 </p><p>注释：使用UL排版的方式常常也叫做CSS排版，是以UL、LI结合CSS来代替表格进行排版的方法，通过给指定float的样式，使变成像文字一样的流动体，遇到行末宽度不够时进行自动换行。大部分情况下，和用途是完全可以分开的，但对于数据动态列表的展示，两种元素都可以胜任。通过应用的需要来取舍： </p><p>对于要求固定列数量的数据，用表格。用于一般报表、纯字符的</p><p>第 9 页共 31 页 </p><p>288546051.doc </p><p>数据。 </p><p>对于要求以流体形式来展示数据的，用后者。一般用于图片展示列表。 </p><p>四.图片： </p><p>? 图片的使用中，原则上不建议用 </p><p><img width=? height=?> 来人为干预图片显示的尺寸，而且建议<img>标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，必须在最后给<img>附上 width 和 height 属性。 </p><p>? 图片尽可能加入 alt 属性，以在图片由于各种因素无法显示的时候，能出现替代文字，特别是以图片作为操作按钮的情况，如 </p><p><img src=”../images/btn_Submit.gif” onclick=”submitForm()”> alt=”提交” ? 有时候需要用到一个图片资源，但在页面初始时是不显示的，只有在进行了某些操作后，该图片才会加载，这样的话，在网速条</p><p>第 10 页共 31 页 </p><p></p> <br /> <p><script type="text/javascript">s("content-m");</script></p> </div> <div class="m-pages"><li><a>共7页: </a></li><li><a href='1029112.html'>上一页</a></li><li><a href='1029112.html'>1</a></li><li class="thisclass"><a href='#'>2</a></li><li><a href='1029112_3.html'>3</a></li><li><a href='1029112_4.html'>4</a></li><li><a href='1029112_5.html'>5</a></li><li><a href='1029112_6.html'>6</a></li><li><a href='1029112_7.html'>7</a></li><li><a href='1029112_3.html'>下一页</a></li></div> <div class="down-word"> <div class="word-ico"></div> <div class="word-tit"> <span class="docx">网页程序界面开发规范(2).doc</span> <span>将本文的Word文档下载到电脑</span> <span>下载失败或者文档不完整，请联系客服人员解决！ </span> </div> <div class="word-pic"><a href="javascript:;">下载这篇word文档</a></div> </div> </article> <div class="art-prenext"> <p>下一篇：<a href="/wenku/jiaoyu/1029111.html">定量分析化学基础教案-安徽中医药高等专科学校 - 图文</a></p> </div> <script type="text/javascript">s("like-m");</script> <div class="main-tab"><a class="on" href="javascript:;">相关阅读</a></div> <div class="tab-box"> <ul class="main-new on clearfix"> <li><a href="/wenku/jiaoyu/1151876.html" title="中国石油大学(北京)远程在线考试答案—《油气">中国石油大学(北京)远程在线考试答案—《油气</a></li> <li><a href="/wenku/jiaoyu/1229519.html" title="中国移动网上大学传输设备PTN烽火L2题库">中国移动网上大学传输设备PTN烽火L2题库</a></li> <li><a href="/wenku/jiaoyu/1287270.html" title="苏教版三年级数学下册口算练习题竖式精选（两">苏教版三年级数学下册口算练习题竖式精选（两</a></li> <li><a href="/wenku/jiaoyu/1230553.html" title="2021年高考全国乙卷文科数学试题答案">2021年高考全国乙卷文科数学试题答案</a></li> <li><a href="/wenku/jiaoyu/1150887.html" title="2019年江苏五年制专转本英语统考真题">2019年江苏五年制专转本英语统考真题</a></li> <li><a href="/wenku/jiaoyu/938557.html" title="《统计学》复习题(3)">《统计学》复习题(3)</a></li> <li><a href="/wenku/jiaoyu/1131506.html" title="大型集团党建制度（包括三会一课、党员学习、">大型集团党建制度（包括三会一课、党员学习、</a></li> <li><a href="/wenku/jiaoyu/1053491.html" title="干燥机，润磨机设备操作维护规程">干燥机，润磨机设备操作维护规程</a></li> <li><a href="/wenku/jiaoyu/1144707.html" title="2006年中国药科大学有机化学考研专业课真题及">2006年中国药科大学有机化学考研专业课真题及</a></li> <li><a href="/wenku/jiaoyu/688148.html" title="夏季减肥打造小蛮腰">夏季减肥打造小蛮腰</a></li> </ul> </div> <div class="main-tab"><a class="on" href="javascript:;">本类排行</a></div> <div class="tab-box"> <ul class="main-new on clearfix"> <li><a href="/wenku/jiaoyu/1287711.html" title="2022最新数学教师工作总结方案多篇">2022最新数学教师工作总结方案多篇</a></li> <li><a href="/wenku/jiaoyu/1230558.html" title=" 2021高考全国甲卷文科数学试题及答案"> 2021高考全国甲卷文科数学试题及答案</a></li> <li><a href="/wenku/jiaoyu/1151861.html" title="中国石油大学(北京)远程在线考试答案—《安全">中国石油大学(北京)远程在线考试答案—《安全</a></li> <li><a href="/wenku/jiaoyu/1151866.html" title="石油大学《化工过程设备设计》主观题（单数）">石油大学《化工过程设备设计》主观题（单数）</a></li> <li><a href="/wenku/jiaoyu/1151863.html" title="中国石油大学(北京)远程在线考试答案—《催化">中国石油大学(北京)远程在线考试答案—《催化</a></li> <li><a href="/wenku/jiaoyu/1092360.html" title="石油大学远程在线考试《机械制造基础》试题答">石油大学远程在线考试《机械制造基础》试题答</a></li> <li><a href="/wenku/jiaoyu/666323.html" title="广西路网项目公路工程文件材料收集立卷归档实">广西路网项目公路工程文件材料收集立卷归档实</a></li> <li><a href="/wenku/jiaoyu/718492.html" title="六年级汉语拼音总复习题（新星小学）">六年级汉语拼音总复习题（新星小学）</a></li> <li><a href="/wenku/jiaoyu/1278950.html" title="最新苏教版三年级数学上册《间隔排列》易错题">最新苏教版三年级数学上册《间隔排列》易错题</a></li> <li><a href="/wenku/jiaoyu/1271665.html" title="部编版三年级语文上册基础知识练习（2021期末">部编版三年级语文上册基础知识练习（2021期末</a></li> </ul> </div> </div> <footer class="footer"> <p class="bt-links"><a href="https://m.77cn.com.cn">手机版</a><span class="v-line">|</span><a href="https://www.77cn.com.cn">PC版</a><span class="v-line">|</span><a href="https://m.77cn.com.cn/fww">范文大全</a></p> <p>Copyright © 2019-2022 免费范文网版权所有<br/> 声明 :本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。<br/>客服QQ：邮箱：tiandhx2@hotmail.com<br/> <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">苏ICP备16052595号-18</a> </p> <div style="display:none;"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e245478384fea490ec3a2317ee103ab"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> <div class="theme-popover"> <div class="theme-poptit"> <a href="javascript:;" title="关闭" class="close">×</a> <b>注册会员免费下载</b>（下载后可以自由复制和排版） </div> <div class="theme-popbod dform">        <p class='wxpay'><a href='https://www.77cn.com.cn/user/index.php'>马上注册会员</a></p> <p class="downtxt">注：下载文档有可能“只有目录或者内容不全”等情况，请下载之前注意辨别，如果您已付费且无法下载或内容有问题，请联系我们协助你处理。<br>微信： QQ：</p> </div> </div> <div class="theme-popover-mask"></div> <script> //menu $(".header .menu").on("click", function(){ $("body").append("<div class=\"mask-bg menu-mask-bg\"></div>"); $(".menu-slide").show(); $("html,body").css({height:$(window).innerHeight(), overflow:"hidden"}); setTimeout(function(){ $(".menu-slide").css({transform:"translateX(-50px)"}); },50) }); $("body").on("click", ".menu-mask-bg", function(){ $(".menu-slide").css({transform:"translateX(-100%)"}); $(".menu-mask-bg").remove(); $("html,body").removeAttr("style"); setTimeout(function(){ $(".menu-slide").hide(); },300) }); //search $(".header .search").click(function(){ if($(".search-box").is(":hidden")){ $(this).children("i").removeClass("search-icon").addClass("close-icon"); $(".search-box").fadeIn("fast"); }else{ $(this).children("i").removeClass("close-icon").addClass("search-icon"); $(".search-box").fadeOut("fast"); } }); //nav if($(".nav").length > 0) { var nav = new Swiper(".nav",{ slidesPerView: "auto" }); } </script> <script> $(".pay1 img").click(function () { $(".wxpay").css("display", "block"); $(".alipay").css("display", "none"); $(".pay1 img").addClass("over"); $(".pay2 img").removeClass("over"); }); $(".pay2 img").click(function () { $(".wxpay").css("display", "none"); $(".alipay").css("display", "block"); $(".pay1 img").removeClass("over"); $(".pay2 img").addClass("over"); }); </script> <script type="text/javascript"> jQuery(document).ready(function($) { $('.word-pic a').click(function(){ $('.theme-popover-mask').fadeIn(100); $('.theme-popover').slideDown(200); $(".vip-up").hide(); $(".vip-pay").hide(); var downid = '1029112' $('.wxpay a').click(function(){ var payurl = 'https://www.77cn.com.cn/hupipay/payment_pay_tz.php?payway=wx&aid='; payurl = payurl.replace('payment', 'youke'); var gotourl = payurl + downid location.href = gotourl; }); $('.alipay a').click(function(){ var payurl = 'https://www.77cn.com.cn/hupipay/payment_pay_tz.php?payway=ali&aid='; payurl = payurl.replace('payment', 'youke'); var gotourl = payurl + downid location.href = gotourl; }); }) $('.theme-poptit .close').click(function(){ $('.theme-popover-mask').fadeOut(100); $('.theme-popover').slideUp(200); }) }) </script> <script src="/js/gobacktop.js" type="text/javascript"></script> </body> </html>