当前位置:学会吧培训频道电脑知识学习网页制作HTML与CSS教程CSS三行三列DIV高度自适应的设置» 正文

CSS三行三列DIV高度自适应的设置

[09-24 14:31:53]   来源:http://www.xuehuiba.com  HTML与CSS教程   阅读:8630
概要:IT产品库 http://www.xuehuiba.com用脚本控制三行三列div高度自适应的设置方法,其实不必如此麻烦,只要给父div设置一个固定高度,比如10px,其子div的height:100%就可实现高度自适应,不信,看代码: <head><style>body { font-family: arial, helvetica, sans-serif; color: black; margin: 5px; background:#ffc url(d:/8767a.gif) repeat-y; padding: 0; font:12px; letter-spacing:1px; text-align:center; font:120%;}ul{ list-style-type:square; list-style-image:url(d:/8767a.gif); list-style-position:inside;}li{ border:1
CSS三行三列DIV高度自适应的设置,标签:html与css教程,css教程,html网页设计教程,http://www.xuehuiba.com
IT产品库 http://www.xuehuiba.com

用脚本控制三行三列div高度自适应的设置方法,其实不必如此麻烦,只要给父div设置一个固定高度,比如10px,其子div的height:100%就可实现高度自适应,不信,看代码:

 <head>

<style>


body {
    font-family: arial, helvetica, sans-serif;
 
    color: black;
    margin: 5px;
 background:#ffc url(d:/8767a.gif) repeat-y;
  
    padding: 0;
 font:12px;
 letter-spacing:1px;
  text-align:center;
 font:120%;
}
ul
{
 list-style-type:square;
 list-style-image:url(d:/8767a.gif);
 list-style-position:inside;
}
li
{
 border:1px green solid;
 border-width:0px 0px 1px 0px;
 cursor:wait;
}
.inline
{
 display:block;
}
.div
{
   paddin-top:-40px;
}
.maxfont
{
 font-size:180%;
}


#header
{
 background:gray;
 margin:2px 0px;
 width:790px;
}


#left
{
     background:#ffeef0;
 float:left;
 width:195px;
 height:100%;
}

#middle
{
  background:#ffaae0;
 float:left;
   width:390px;
   margin:0px 5px;
 height:100%;
}

#right
{
   background:#ffaaaa;
  float:left;
  width:195px;
  width:-10px;
 height:100%;
}


#footer
{
  background:#ffaa11;
  clear:both;
  width:790px;
  margin:1px 0px;
}

#left,#middle,#right
{
   text-align:left;
   text-indent:24px;
}

#content
{
 margin:0px auto;
  width:790px;
 height:400px;
}

</style>

</head>

<body>
 <div style="display:none">
  今天下午
  <ul class="inline">
   <li >
    <p  class="div">正常模式</p>

    <p class="maxfont">ssss</p>
    <p>aaa</p>
   <bfff>
</li>
   <li>梦之都 XHTML 教程.</li>
   <li>梦之都 CSS 教程.</li>
   <li>梦之都 JAVASCRIPT 教程.</li>
  </ul>
</div>

<div style="display:none">
 伤亡事故

 <ul>
   <li>v gma a a</li>
   <li>ddd dkdkdkd</li>
 </ul>
</div>

<div id="header">
 <h1>脚本控制三行三列自适应高度DIV布局</h1>
</div>
<div id="content">

   <div id="left">亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,但是有视力

障碍 - 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变

文字大小;拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。

亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,但是有视力障碍 - 你我变老时

就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小;拒绝提供

这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。
</div>
   <div id="middle">亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,但是有视

力障碍 - 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改

变文字大小;拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。

如果设计者使用像素为单位指定文字大小,大多数的用户将无法缩放文字,因为 Internet Explorer 改

变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字,而Windows

下的IE却不能。

亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,但是有视力障碍 - 你我变老时

就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小;拒绝提供

这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。

如果设计者使用像素为单位指定文字大小,大多数的用户将无法缩放文字,因为 Internet Explorer 改

变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字,而Windows

下的IE却不能
如果设计者使用像素为单位指定文字大小,大多数的用户将无法缩放文字,因为 Internet Explorer 改

变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字,而Windows

[1] [2]  下一页


Tag:HTML与CSS教程html与css教程,css教程,html网页设计教程电脑知识学习 - 网页制作 - HTML与CSS教程
《CSS三行三列DIV高度自适应的设置》相关文章
Copyright 学会吧 All Right Reserved.
在线学习社区!--学会吧
1 2 3 4 5 6 7 7 8 9 10 11 12 13