• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    布局遇到的问题 非常不错的见解
    前言
        还未等到下一代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.clientWidth800 ? "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>

    上一篇:display&position
    下一篇:表格斜线
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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