今天就跟大家聊聊有关DIV CSS网页布局开发参考规范的示例分析，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于网站设计、成都网站设计、华州网络推广、微信小程序、华州网络营销、华州企业策划、华州品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联公司为所有大学生创业者提供华州建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com
你对DIVCSS网页布局开发参考规范是否了解，这里和大家分享一下，DIVCSS网站的开发可能有多人协作，由一个团队来完成，这就涉及到很多规范性操作的问题，本DIV CSS网页布局规范既是一个开发规范，也是一个脚本语言参考，但是，请大家千万不要随意更改规范。
DIVCSS网页布局开发参考规范
DIVCSS网页布局也可以算是一个系统的工作，DIVCSS网站的开发可能有多人协作，由一个团队来完成，这就涉及到很多规范性操作的问题，即使是一个人进行开发，也需要有一定的条理和规范，这是一篇转载自蓝色的文章，非常有效，作者总结了很多实用的经验，大家可以参考学习。
总论
本DIV CSS网页布局规范既是一个开发规范，也是一个脚本语言参考，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。但是，请大家千万不要随意更改规范。如果有任何问题，请及时与我联系，我会及时更改本规范的相关代码样例和文档。
基本要求
1.在网站根目录中开设imagescommontemp三个子目录，根据需要再开设media子目录，images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner条、菜单、按钮等等；common子目录中放css、js,、php、include等公共文件；temp子目录放客户提供的各种文字图片等等原始资料；media子目录中放flash,avi,quicktime等多媒体文件。
2.在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images和media的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。
3.temp目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。
4.除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称，经验证明，用拼音命名的目录往往连一个月后的自己都看不懂。
DIV CSS网页布局中脚本编写
我们应该有一个脚本整体风格一致的概念，意思是一个月后和一个月前的你写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致，因为我们不可能永远孤立的开发，你随时都有可能和三个月前的自己合作（你的客户要求改版），也经常要和工作室中不同的同事共同开发一个项目，还有可能被要求修改已经离职人员开发的脚本，当然你自己也有可能会扔下一个项目给后来的同事。
1.Html文件的通用模板：
ExampleSourceCode
文档标题title> <metahttp-equivmetahttp-equiv="content-type"content="text/html;charset=gb2312"> <metanamemetaname="author"content="eastline"></pre><p>◆DIV CSS中其他meta标记</p><p>ExampleSourceCode</p><pre><linkrellinkrel="stylesheet"type="text/css"href="style/style.css"></pre><p>◆样式表定义</p><p>客户端Javascript函数定义及初始化操作</p><p>ExampleSourceCode</p><pre>head> <bodybgcolorbodybgcolor="#ffffff"> …… body></pre><p>补充：<br/>为了保证网站能够与下一代的web语言xml标准兼容，所有的HTML标签的属性都要用单引号或者双引号括起，即我们应该写而不是.</p><p>2.允许全文检索的页面，为了使Internet上的搜索引擎能够有效检索，在频道的首页的html的之间应该加入Keywords和Description元标记，例如：</p><p>ExampleSourceCode</p><pre><metanamemetaname=”keywords”content=”东方新干线，汽车，买车"/> <metanamemetaname=”description”content=”东方新干劲线，全球中文汽车信息第一站"/></pre><p>3.DIV CSS文件的格式样例代码：</p><p>ExampleSourceCode</p><pre><styletypestyletype="text/css"> <!— p{text-indent:2em;} body{font-family:"宋体";font-size:9pt;color:#000000;margin-top:0px; margin-right:0px;margin-bottom:0px;margin-left:0px} table{font-family:"宋体";font-size:9pt; line-height:20px;color:#000000} a:link{font-size:9pt;color:#FFFFFF;text-decoration:none} a:visited{font-size:9pt;color:#99FFFF; text-decoration:none} a:hover{font-size:9pt;color:#FF9900;text-decoration:none} a:active{font-size:9pt;color:#FF9900;text-decoration:none} a.1:link{font-size:9pt;color:#3366cc;text-decoration:none} a.1:visited{font-size:9pt;color:#3366cc;text-decoration:none} a.1:hover{font-size:9pt;color:#FF9900;text-decoration:none} a.1:active{font-size:9pt;color:#FF9922;text-decoration:none} .blue{font-family:"宋体";font-size:10.5pt; line-height:20px;color:#0099FF;letter-spacing:5em} --> style></pre><p>这里尤其要注意的是a:linka:visiteda:hovera:actived的排列顺序一定要严格照上面的样例代码，否则或多或少会出问题。另外我们规定重定义的最先，伪类其次，自定义最后，便于自己和他人阅读！</p><p>4.为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px和14.7px这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px的字号比较合适。</p><p>在写</p><p>互相嵌套时，严格按照的规范，对于单独的一个</p><table><tbody><trl></tr></tbody></table><p>来说，</p><table><tbody><trl></tr></tbody></table><p>对齐，结束标记应该与</p><table><tbody><trl><td>缩进两个半角空格，</td><td>中如果还有嵌套的表格，也缩进两个半角空格，如果</td><td>中没有任何嵌套的表格，</td><td>处于同一行，不要换行，</td></tr></tbody></table><p>如我们注意在DIV CSS源代码中不应有这样的代码：</p><p>ExampleSourceCode</p><pre><td><imgsrcimgsrc=”../images/sample.gif”> td></pre><p>而应该是这样的：</p><p>ExampleSourceCode</p><pre><td><imgsrcimgsrc=”../images/sample.gif”>td></pre><p>这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写：</p><p>ExampleSourceCode</p><pre><td><imgsrcimgsrc=”../images/sample.gif”>td></pre><p>属于同一个级别的</p><p>一定是左首对齐的，另外不允许没有任何内容的空的单元格存在，高度大于等于12px的单元格应该在之间写一个，如果高度小于12px,则应该在之间插入一个1*1大小的透明的gif图片，这是因为某些浏览器认为空单元格非法而不会予以解释。如果代码顺序较乱，在DW3中可以通过command->applysouceformatting进行重新整理！</p><table><tbody><trl><td>和</td><td>和</td></tr></tbody></table><p>5.Width和height的写法也有统一的规范，一般情况下只有一列的表格，width写在</p><p>的标签内，只有一行的表格，height写在</p><table><tbody><trl></tr></tbody></table><p>的标签内，多行多列的表格，width和height写在第一行或者第一列的</p><table><tbody><trl><td>标签内。总之遵循一条原则：不出现多于一个的控制同一个单元格大小的height和width,保证任何一个width和height都是有效的，也就是你改动代码中任何一个width和height的数值，都应该在浏览器中看到变化。做到这一条不容易，需要较长时间的练习和思考。</td></tr></tbody></table><p><strong>DIV CSS网页布局一般原则</strong></p><p>1.在排布表格之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免<colspan><rowspan>两个标记，经验表明，这两个标记会带来许多麻烦。</rowspan></colspan></p><p>2.一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用</p><p>标记，以便能够使这个大表格分块显示。</p><table><tbody><trl></tr></tbody></table><p>3.排版中我们经常会遇到需要进行首行缩进的处理，不要使用或者全角空格来达到效果，规范的做法是在样式表中定义p{text-indent:2em;}然后给每一段加上</p><p>标记，注意，一般情况下，请不要省略</p><p>结束标记。</p><p>4.原则上，我们禁止用<imgwidth=?height=?>来人为干预图片显示的尺寸，而且建议<img/>标签中不要带上width和height两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，请大家务必在最后给<img/>附上width和height属性。</imgwidth=?height=?></p><p>5.为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用<br/>来人工干预分段。</p><p>6.不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。</p><p>7.所有的字号都应该用样式表来实现，禁止在页面中出现<fontsize=?>标记。</fontsize=?></p><p>8.请不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用text-indent,padding,margin,hspace,vspace以及透明的gif图片来实现。</p><p>9.中英文混排时，我们尽可能的将英文和数字定义为verdana和arial两种字体。</p><p>10.行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%.</p><p>11.网站中的路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样：而应该这样：</p><p>12.嵌入图形文本的使用较大的字体，建议不要在图形中包括文本。</p><p>13.“网页大小”定义为网页的所有文件大小的总和，包括HTML文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户，网页大小保持在34K以下为合适。</p><p><strong>DIV CSS网页布局文件命名原则</strong></p><p>1.每一个目录中应该包含一个缺省的html文件，文件名统一用index.htm</p><p>2.件名称统一用小写的英文字母、数字和下划线的组合。</p><p>3.命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。</p><p>4.下面以“新闻”（包含“国内新闻”和“国际新闻”）这个栏目来说明html文件的命名原则：</p><p>◆在根目录下开设news目录</p><p>◆第一条缺省新闻取名index.htm</p><p>◆所有属于“国内新闻”的新闻依次取名为：china_1.htm,china_2.htm,…</p><p>◆所有属于“国际新闻”的新闻依次取名为：internation_1.htm,internation_2.htm,…</p><p>◆如果文件的数量是两位数，请将前九个文件命名为：china_01.htm,china_02.htm以保证所有的文件能够在文件夹中正确排序。</p><p>5.图片的命名原则遵循以下几条规范：</p><p>◆名称分为头尾两两部分，用下划线隔开。</p><p>◆头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等。</p><p>◆一般来说:</p><p>放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner</p><p>标志性的图片我们取名为：logo</p><p>在页面上位置不固定并且带有链接的小图片我们取名为button</p><p>在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu</p><p>装饰用的照片我们取名：pic</p><p>不带链接表示标题的图片我们取名：title</p><p>依照此原则类推。</p><p>尾部分用来表示图片的具体含义。</p><p>看完上述内容，你们对DIV CSS网页布局开发参考规范的示例分析有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。</p> <br> 文章标题：DIVCSS网页布局开发参考规范的示例分析 <br> 文章网址：<a href="http://csdahua.cn/article/peddcp.html">http://csdahua.cn/article/peddcp.html</a> </div> <div class="view-qrocde cl"> <div class="m z"><img src="/Public/Home/images/ew.jpg"/></div> <div class="text"> <h6>扫二维码与项目经理沟通</h6> <p>我们在微信上24小时期待你的声音</p> <p>解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流</p> </div> </div> <div class="othernews cl"> <h3>其他资讯</h3> <ul> <li><a href="/article/doespic.html">zblog登录注册插件 zblog下载插件</a></li><li><a href="/article/doespsc.html">11vb.net的简单介绍</a></li><li><a href="/article/doespei.html">易优cms网站搬家 易优cms插件合集</a></li><li><a href="/article/doespsh.html">dynamics使用教程 dynamics nav 教程</a></li><li><a href="/article/doesphe.html">信息安全整机及解决方案 信息安全实施方案</a></li> </ul> </div> </div> </div> <div class="sidebar"> <div class="tuijian"> <a href="#"> <h2 class="cl"><span>行业动态</span></h2> <h3>企业网站建设的重要性！</h3> <p>现在虽然是移动互联网时代，但企业网站依然重要，包含PC站点，移动站。可以说企业网站关系企业的未来发展和前途，尤其对中小企业更是如此，一些中小企业老板，对自己的名片很在乎，因为这是个门面。...</p> </a> </div> <div class="ser sidesub"> <h2>服务项目</h2> <ul class="ebox"> <li class="sub sub-1"> <div> <h3>网站建设</h3> <p></p> <a class="btn" href="/serve/website/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>移动端/APP</h3> <p></p> <a class="btn" href="/serve/moblie/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>微信/小程序</h3> <p></p> <a class="btn" href="/serve/small/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>技术支持</h3> <p></p> <a class="btn" href="/serve/tech/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>其它服务</h3> <p></p> <a class="btn" href="/serve/othe/">查看详情</a> </div> </li> <li class="sub sub-5"> <div> <h3>更多服务项目</h3> <p> <a>用我们的专业和诚信赢得您的信赖，从PC到移动互联网均有您想要的服务！</a></p> <a class="btn" href="/serve/">获取更多</a> </div> </li> </ul> </div> <div class="contact" id="fix"> <h2 class="cl"> <span>联系吧</span> <a href="https://map.baidu.com/" class="ditu" rel="nofollow" target="_blank">在百度地图上找到我们</a> </h2> <h3>电话：13518219792</h3> <p>如遇占线或暂未接听请拨：136xxx98888</p> <div class="qq"> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">业务咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">技术咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">售后服务</a> </div> </div> </div> <script> //固定滚动 (function () { var oDiv = document.getElementById("fix"); var H = 120, iE6; var Y = oDiv; while (Y) { H += Y.offsetTop; Y = Y.offsetParent }; iE6 = window.ActiveXObject && !window.XMLHttpRequest; if (!iE6) { window.onscroll = function () { var s = document.body.scrollTop || document.documentElement.scrollTop; if (s > H) { oDiv.className = "contact fixed"; if (iE6) { oDiv.style.top = (s - H) + "px"; } } else { oDiv.className = "contact "; } }; } })(); </script> </div> <div class="footer"> <div class="wp"> <div class="wpss cl"> <dl class="about"> <dt>网站制作</dt> <dd><a href="http://www.kswcd.com/mobile/" target="_blank" title="手机网站制作">手机网站制作</a></dd><dd><a href="https://www.cdcxhl.com/" target="_blank" title="成都网站制作">成都网站制作</a></dd><dd><a href="https://www.cdcxhl.com/mobile.html" target="_blank" title="手机网站制作设计">手机网站制作设计</a></dd><dd><a href="http://www.cxhlcq.com/zhizuo/" target="_blank" title="重庆网站制作">重庆网站制作</a></dd> </dl> <dl class="about"> <dt>网站建设</dt> <dd><a href="http://chengdu.cdcxhl.cn/jianshe/" target="_blank" title="网站建设公司">网站建设公司</a></dd><dd><a href="https://www.cdcxhl.com/xiangyingshi.html" target="_blank" title="成都响应式网站建设">成都响应式网站建设</a></dd><dd><a href="http://www.cxhlcq.com/qiye/" target="_blank" title="重庆企业网站建设">重庆企业网站建设</a></dd><dd><a href="https://www.cdxwcx.com/city/pengzhou/" target="_blank" title="彭州网站建设">彭州网站建设</a></dd> </dl> <dl class="about"> <dt>网站设计</dt> <dd><a href="http://www.cdkjz.cn/fangan/waimao/" target="_blank" title="外贸网站设计方案">外贸网站设计方案</a></dd><dd><a href="http://www.pzhzwz.com/" target="_blank" title="攀枝花网站设计">攀枝花网站设计</a></dd><dd><a href="http://m.cdcxhl.cn/mobile/" target="_blank" title="手机网站设计">手机网站设计</a></dd><dd><a href="http://chengdu.cdcxhl.com/" target="_blank" title="成都网站设计">成都网站设计</a></dd> </dl> <dl class="contact"> <dt>联系我们</dt> <dd>电话：13518219792</dd> <dd>邮箱：631063699@qq.com</dd> <dd>地址：成都青羊区锦天国际1002号</dd> <dd>网址：www.csdahua.cn</dd> </dl> <dl class="flow"> <dt></dt> <div class="ma cl"> <div class="m"> <img src="/Public/Home/images/ew.jpg" /> <p>微信二维码</p> </div> </div> </dl> </div> </div> <div class="footer-link wp"> <ul class="wpss cl"> <li class="fisrt">友情链接</li> <li><a href="http://www.dgyishan.com/" title="酒柜书柜鞋柜定制" target="_blank">酒柜书柜鞋柜定制</a></li><li><a href="http://chengdu.cdcxhl.cn/dingzhi/ " title="成都定制网站" target="_blank">成都定制网站</a></li><li><a href="http://m.cdxwcx.com/seo.html" title="网站推广优化" target="_blank">网站推广优化</a></li><li><a href="https://www.scvps.cn/" title="网站空间" target="_blank">网站空间</a></li><li><a href="https://www.cdxwcx.com/wangzhan/mbyidong.html" title="做移动网站" target="_blank">做移动网站</a></li><li><a href="https://www.cdcxhl.com/ssl/chengdu.html" title="SSL证书" target="_blank">SSL证书</a></li><li><a href="http://chengdu.cdcxhl.cn/jianshe/ " title="成都网站建设公司" target="_blank">成都网站建设公司</a></li><li><a href="http://www.scdaying.com/" title="大英网站建设" target="_blank">大英网站建设</a></li><li><a href="http://chengdu.cdcxhl.cn/qiye/" title="企业网站制作" target="_blank">企业网站制作</a></li><li><a href="http://www.schdas.cn/" title="四川鸿达" target="_blank">四川鸿达</a></li> </ul> </div> </div> <div class="bot-footer"> <div class="wp"> <p class="wpss"> <em>Copyright © 2002-2023 www.csdahua.cn 快上网建站品牌 QQ：244261566 版权所有</em> <em>备案号：<a href="http://beian.miit.gov.cn/" rel="external nofollow">蜀ICP备19037934号</a></em> </p> <p class="wpss" style="line-height:30px !important;"> </p> </div> </div> <div class="footer-kefu"> <ul> <li class="qq"><a href="https://wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes"><em></em>在线咨询</a> </li> <li class="tel"><a href="tel:13518219792" target="_blank"><em></em>13518219792</a></li> <li class="wx"> <em></em> <div class="code"> <img src="/Public/Home/images/ew.jpg" /> <p>微信二维码</p> </div> </li> <li class="m"> <em></em> <div class="code"> <img src="/Public/Home/images/ew.jpg" /> <p>移动版官网</p> </div> </li> <li class="top"><em></em></li> </ul> </div> <script src="/Public/Home/js/all.js"></script> </body> </html> <script> $(".cont img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>