会员登陆
登录加载中...
超级搜索
栏  目  
类  别  
关键词  
 站内搜索   网络搜索
  
 当前位置:文章首页>>本站原创>>网页设计>>新手学习DIV+CSS难点之经验总结
推荐给你的朋友阅读:

新手学习DIV+CSS难点之经验总结

来源:飞腾设计网 发表日期: 2011-05-04 11:15:41

    雨城自从本月初学习DIV+CSS网站布局以来,深深喜欢上了这种布局方式,感觉确实比用TABLE方便和条理清晰。在学习的过程中,也遇到了一些难题,记录于此,与爱好者共同讨论学习。

    注:以下内容为本站原创,版权属飞腾设计网及本人所有,转载请注明出处,谢谢合作。请大家多多支持、鼓励本站,让我们有更强的信心,写出适用的教程,奉献给大家。[本篇文章持续更新中,建议网友加入收藏,以备参考……]

    此文获得水夜云轻老师的大力支持,在此表示感谢。

    1、网页居中显示:

    需要设置两个地方,一个是body,一个是外边框div。

    CSS:

body{
 margin:0;
 padding:0;
 text-align:center;
}
#main{ /*最外层DIV*/
 width:760px;
 margin:0 auto;
 padding:0
}

    2、文字垂直居中显示:

    在DIV中定义一个行高与其高度相同即可。

    CSS:

.title{
 height:25px;
 line-height:25px;
 vertical-align:middle;

 }

    3、图片垂直居中显示:

    在<img>标签中加入align="absmiddle" 即可。

    4、清除浮动:

    如果在同一行上有几个DIV并列显示,那么必须在其中加入清除浮动代码,如果在一行上只是一个DIV,好象不必清除浮动。

    CSS:

.clear{clear: both;}

    HTML示例:

<div id="main">
     <div class="left"></div>
     <div class="center"></div>
     <div class="right"></div>
     <div class="clear"></div>
</div>
<!--清除浮动后,后面的代码排列就不会有任何变形了,不管是在IE还是FF中,都很正确-->
<div ……

    5、三列结构中的的DIV写法:

    适用于左右栏是窄幅,中栏为主要内容显示,让其宽度自适应。
    
    CSS:

#main{
     width:760px;
     margin:0 auto;
     }
.left{
     width:100px;
     float:left;
    }
.right{
     width:120px;
     float:right;
    }
.center{
     margin:0 120px 0 100px;/*页面中栏内容,未设置浮动,通过设置左右边界达到此DIV放于中栏的效果*/
     width:auto;
    }
.clear{clear: both;}

    HTML:

<!--注意:center这个DIV的位置-->
<div id="main">
     <div class="left"></div>
     <div class="right"></div>
     <div class="center"></div>
     <div class="clear"></div>
</div>

    6、textarea在FireFox中不能自动换行的处理:

    有时我们可能会遇到这种现象,在IE中可以自动换行,但在FF中就是不行,即使加了word-break:break-all;word-warp:warp;也没有效果,怎么回事呢?

    主要原因是因为我们加入到textarea中的英文字符或代码过长,造成它误识别为一个单词所致。

    解决方法也很简单,就是在内容中,人为加一些空格,让FF自动识别为多个单词,从而就能正确换行了。

1 2 3 4 下一页

10
0
[作者:雨城 关键词:div,css,页面布局 录入:raincity 责编:raincity 阅读次数:29723]

相关文章 相关新闻 相关软件 相关教程 公共评论 发表评论

  • ·暂无相关内容
  • ·暂无相关内容
    评论载入中...
    您的称呼  验 证 码   
    您的评论 [ 最多字数:  已用字数:剩余字数:]

     
COPYRIGHT 2003-2010 创意飞腾科技有限公司(The Feitec LTD.) ALL RIGHTS RESERVED .
官方咨询官方咨询4376161 官方咨询526743959 技术支持:FeitecCMS5366464
页面加载时间:125.00ms Powered By:FeitecCMS V4.0(Build1101)
[蜀ICP备05000881]