源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

布局遇到的问题 非常不错的见解

  • 时间:2022-02-19 09:53 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:布局遇到的问题 非常不错的见解
前言     还未等到下一代WEB开发技术RIA技术成熟之前,当然还得与HTML作斗争。前段时间《网站重构》炒得挺热, 这些都是进步,的确给我们新的思想。在这里总结一些开发中的点滴经验。 布局 1、上下左右布局     刚开始学制作页面,用的是MM的DW软件,可视化,让更多人学会网页制作。     还记得当初做页面用的还是DW,一个朋友问过我这一样一句话:"做网页表格多还是用层多,有什么区别?"。     我告诉他其实DW中用布局-布局表格,很快画出整个页面的框架, 然后一步步细化。做页面是挺快的事情,建议用表格,用层不好控制位置。     现在想起来真是有点误导的成份。哈,不过也许,进步需要一个过程。     《网站重构》春风吹来,用层进行页面布局的确给予我们开发带来了新的思想。     优点:         页面更清晰,代码量减少;         CSS的应用更广泛。    上下排,分层清晰,代码demo:    <div id="head">    </div>    <div id="body">    </div>    <div id="bottom">    </div>        左右排,可以用绝对定位    #head{     position:absolute     top;10px;     left:200px;     }    <div id="head">    </div>          2、DIV中的尽量少嵌套DIV,可用<p><span> 3、用padding控制层之间的分隔    <div>    </div>    <div style="padding-top:10px">    </div> 4、用border制作结构之间的分隔线     <div style="border-bottom:1px #000 solid">     </div> 5、可以用CSS的少用图片 页面布局demo(可查看源码,比以往TABLE布局的清晰多了): http://davidblog.blogdriver.com/davidblog/inc/demo_div.jpg form 1、form的margin以及padding    以往在页面中插入一个表单时,总是觉得margin,padding默认不为0,有时会影响页面的布局.    可以用CSS将其设加0    form{     margin:0 0 0 0px;     padding:0 0 0 0px;    }    同样p标记或其它标记你也可以定义. 2、select     optgroup的应用 3、为checkbox或radio加上label <input id=today type=radio  value="" checked><label for=today >今日</label> 4、button     前一个项目用的是图片的button。逐渐发觉应用中的缺陷。     建议还是用CSS美化。     其实CSS可以实现更美观的button table 该用table还是得用table的。table  始终有他优胜的一面。 例如一些数据显示的GRID或结构比较统一的,分行分列的布局. table 相关技巧 CSS Expressions的应用 用CSS应用可减少代码的编写 1、table 鼠标事件 <style> tr{    background-color:expression((this.rowIndex%2==0)?"#e5e5e5":"#e5e5e5");    ryo:expression( onmouseover=function()  {this.style.backgroundColor='#ffffff'}, onmouseout=function() {this.style.backgroundColor='#e5e5e5'} ) } </style> 2、 width:expression{document.body.clientWidth<800 ? "760" : "1003"} 值得留意的标记 <menu> <li>菜单1</li> <li>菜单2</li> </menu> <ul> <li> <dd> <tt> <u> <fieldset> <legend>Health information:</legend> Height <input type="text" size="3" /> Weight <input type="text" size="3" /> </fieldset> <sup>superscript</sup>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部