当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-09-06

    本文导语:  前言     还未等到下一代WEB开发技术RIA技术成熟之前,当然还得与HTML作斗争。前段时间《网站重构》炒得挺热, 这些都是进步,的确给我们新的思想。在这里总结一些开发中的点滴经验。 布局 1、上下左右布局     刚开始...

前言
    还未等到下一代WEB开发技术RIA技术成熟之前,当然还得与HTML作斗争。前段时间《网站重构》炒得挺热,
这些都是进步,的确给我们新的思想。在这里总结一些开发中的点滴经验。

布局
1、上下左右布局
    刚开始学制作页面,用的是MM的DW软件,可视化,让更多人学会网页制作。
    还记得当初做页面用的还是DW,一个朋友问过我这一样一句话:"做网页表格多还是用层多,有什么区别?"。
    我告诉他其实DW中用布局-布局表格,很快画出整个页面的框架, 然后一步步细化。做页面是挺快的事情,建议用表格,用层不好控制位置。
    现在想起来真是有点误导的成份。哈,不过也许,进步需要一个过程。

    《网站重构》春风吹来,用层进行页面布局的确给予我们开发带来了新的思想。
    优点:
        页面更清晰,代码量减少;
        CSS的应用更广泛。

   上下排,分层清晰,代码demo:
   
   


   
   


   
   


   
   左右排,可以用绝对定位
   #head{
    position:absolute
    top;10px;
    left:200px;
    }
   
   


        
2、DIV中的尽量少嵌套DIV,可用



3、用padding控制层之间的分隔
   


   

   
   


4、用border制作结构之间的分隔线
    
    


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
今日

4、button
    前一个项目用的是图片的button。逐渐发觉应用中的缺陷。
    建议还是用CSS美化。
    其实CSS可以实现更美观的button


table
该用table还是得用table的。table  始终有他优胜的一面。
例如一些数据显示的GRID或结构比较统一的,分行分列的布局.
table 相关技巧




CSS Expressions的应用
用CSS应用可减少代码的编写
1、table 鼠标事件

tr{
   background-color:expression((this.rowIndex%2==0)?"#e5e5e5":"#e5e5e5");
   ryo:expression(
onmouseover=function() 
{this.style.backgroundColor='#ffffff'},
onmouseout=function()
{this.style.backgroundColor='#e5e5e5'}
)
}


2、
width:expression{document.body.clientWidth

    
 
 

您可能感兴趣的文章:

 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • andriod中ListView, listItem布局和convertView的缓存与重用详解
  • JSP页面布局框架 Apache Tiles
  • C++程序的内存不同的数据段及堆栈布局
  • 初探application的布局
  • HTML 框架布局详细介绍
  • 现在用JBuilder8,请问用那个布局管理器比较好。
  • javascript开源软件 iis7站长之家
  • 网页设计布局基础第1/4页
  • 可拖放的布局插件 gridster.js
  • 布局管理器有什么用?
  • swing窗口布局的问题
  • CSS网页布局框架 Elastic
  • JSP布局框架 SiteMesh
  • 图形布局引擎 GLE
  • 网页的网格布局效果 Profound Grid
  • 流动布局插件 jFL
  • jb里面不用布局管理器可以吗?
  • 关于布局管理器
  • 铁路布局模拟软件 JMRI Model Railroad Interface
  • Web系统布局框架 cDesk
  • 新手问题之一:是不是所有的SWING容器都要使用布局管理器啊?


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3