当前位置： 首页 > news >正文

做书的网站有哪些内容吗/日本关键词热搜榜

news 2025/6/30 13:56:54
做书的网站有哪些内容吗,日本关键词热搜榜,php可以做网站布局吗,网站营销学多久一. 利用背景图，做出左右等高的模拟效果 这种方法不是真正的左右等高，而是在外框元素中添加一张背景图片，当内容增多时，背景会纵向重复，就会形成左右等高的效果。 这种方法不是真正的div自动等高，而是在…

一. 利用背景图，做出左右等高的模拟效果  

这种方法不是真正的左右等高，而是在外框元素中添加一张背景图片，当内容增多时，背景会纵向重复，就会形成左右等高的效果。 

这种方法不是真正的div自动等高，而是在左右两个div的外面添加一个外框元素，给这个外框元素添加一个背景，当内容增多时，背景就会向下纵向重复，看起来就向左右两个div都自动向下延伸了一样。下面写一下详细代码。

Html代码： 

[html] view plaincopy
  1. <div id="wrap">   
  2.   
  3.        <div id="left_a">   
  4.   
  5.               <br/><br/><br/><br/>  
  6.        </div>   
  7.   
  8.        <div id="right_a">   
  9.   
  10.               <br /> <br />  
  11.   
  12.               <br /> <br />   
  13.   
  14.               <br /> <br />   
  15.   
  16.        </div>   
  17.   
  18.        <div class="clear"></div>   
  19.   
  20. </div>  

CSS代码： 

[css] view plaincopy
  1. *{margin:0;     padding:0;}   
  2.   
  3. #wrap{  
  4.   
  5.        width:950px;   
  6.   
  7.        height:100%;   
  8.   
  9.        clear:both;       
  10.   
  11.        margin:0 auto;   
  12.   
  13.        background:#FFF url(background.gif) repeat;   
  14.   
  15. }   
  16.   
  17. #left_a { float:left; width:190px; }   
  18.   
  19. #right_a { float:right;    width:750px; }   
  20.   
  21. .clear { clear:both; }  

 

对以上代码的解释： 

1、在Html代码中，<div id="wrap">这行是外面容器的开始，在CSS中用background给它定义一个背景；

2、给wrap定义背景的时候要注意，这里定义的总宽度是950像素，左侧边栏是190像素，右侧是750像素，两者中间有10像素的空白，制作背景图时应按照此尺寸制作，左侧190像素是一个颜色，右侧750像素是一个颜色，中间10像素白色。 

3、由于这个布局采用的是float浮动布局的方式，两个div分别向左向右分布，很容易让浏览器解析时出现问题而检测不到高度，所以在CSS代码中，wrap的高度应定义为100%，并且使用clear方法清除浮动，让其在Firefox中也正常显示。 

 

二. 利用表格嵌套 

这种方法就是在div中嵌套一个表格，因为表格是可以左右自动等高的，所以当一侧的内容增多时，两侧都会自动等高。 

其实只要用表格布局做过页面，这个方法基本上大家都会，就是在div中嵌套表格。 

原则上，使用div布局应尽量减少表格出现，但为了达到某些效果，稍稍的使用一些也是可以的，况且国外有些较有名的网站也使用了这种方法。下面讲解具体方法。 

Html代码： 

[html] view plaincopy
  1. <div id="wrap">   
  2.   
  3. <table border="0" cellpadding="0" cellspacing="0" id="table_layout">   
  4.   
  5. <tr>   
  6.   
  7.        <td id="left_b">   
  8.   
  9.        <div class="box">   
  10.   
  11.               <p></p><p> </p>   
  12.   
  13.               <p></p><p> </p>   
  14.   
  15.        </div>   
  16.   
  17.               <div class="box">   
  18.   
  19.                      <p></p><p> </p>   
  20.   
  21.                      <p><br/><br/><br/><br/></p>   
  22.   
  23.               </div>   
  24.   
  25.        </td>   
  26.   
  27.        <td id="mid_b"> </td>   
  28.   
  29.        <td id="right_b">   
  30.   
  31.               <div class="box"><br/><br/><br/></div>   
  32.   
  33.        </td>   
  34.   
  35. </tr>   
  36.   
  37. </table>   
  38.   
  39. </div>  

 

CSS代码： 

[html] view plaincopy
  1. * { margin:0; padding:0; }   
  2.   
  3. #wrap { width:950px; height:100%; clear:both; margin:0 auto; background:#FFF; color:#FFF; }  
  4.   
  5. #table_layout { width:950px; }   
  6.   
  7. #left_b { width:190px; background:#09C; }   
  8.   
  9. #right_b { width:750px; background:#09C; }   
  10.   
  11. #mid_b { width:10px; }   
  12.   
  13. .box { clear:both; height:100%; }  

 

 上面的代码是将表格嵌套在wrap这个div中，在这个table中又插入其它div，这样就可以让左右两列达到自动等高的效果。上面的代码大家应该都能看懂，如果有问题可以向我提问。

 

三. 利用内、外补丁padding和margin自动等高 

       这种方法是利用正内补丁和负外补丁相结合，再隐藏掉溢出的内容，最终达到左右等高的效果。 

       具体理论不再多说了，只要把代码给大家列出来就能一目了然了。 

Html代码： 

[html] view plaincopy
  1. <div id="wrap">   
  2.   
  3.        <div id="left">  
  4.   
  5.               <br /><br />   
  6.   
  7.        </div>   
  8.   
  9.        <div id="right">   
  10.   
  11.               <br/><br />   
  12.   
  13.               <br /> <br /> <br />   
  14.   
  15.               <br /> <br />   
  16.   
  17.        </div>   
  18.   
  19. </div>  

 

CSS代码：

[css] view plaincopy
  1. * { margin:0; padding:0; }   
  2.   
  3. #wrap{ overflow:hidden; padding:0; padding-left:180px; }   
  4.   
  5. #left,#right{ height:auto; margin-bottom:-10000px; padding-bottom:10000px; }   
  6.   
  7. #left{ display:inline; float:left; width:180px; margin-left:-180px; background: #0CF; }   
  8.   
  9. #right{ float:right; width:100%; background: #FC6; }  

 

对以上代码的部分解释： 

1、最外面的wrap必须使用overflow:hidden来隐藏溢出的内容。 

2、wrap的左内补丁设置为180像素是为了让left这个div有空间显示。 

3、left和right两个div底部外补丁为-10000px，底部内补丁为10000px，这是必须设置的，如果内容可能会较多，可以将数值再增大。 

4、left这个div居左，right居右，display:inline属性是为了修正left在IE6中会跑出外框的bug。

 

四. 利用Javascript脚本 

Javascript是最好的Html辅助程序，尤其是前端界面的开发，在自动等高方面，也有专业的脚本。

网上使div等高的Javascript脚本很多，但有些仅仅针对IE浏览器可用，对Firefox、Opera等浏览器无效，所以在选择脚本的时候应该特别注意脚本的跨浏览器兼容性。 

下面给大家介绍一个从网上找来的Javascript脚本，并列出使用方法。 

Html代码：

[html] view plaincopy
  1. <div class="div_top">  
  2.   
  3.        这是顶部的div  
  4.   
  5. </div>   
  6.   
  7. <div id="Div1" class="div_left">   
  8.   
  9.        左部div <br />   
  10.   
  11.        <br/><br /><br />  
  12.   
  13.        <br /><br />  
  14.   
  15.        <br /><br />   
  16.   
  17. </div>   
  18.   
  19. <div id="Div2" class="div_right">   
  20.   
  21.        右部div <br/> <br/> <br/>   
  22.   
  23. </div>   
  24.   
  25. <div class="div_bottom">  
  26.   
  27.        这是底部的<br/>  
  28. </div>  

 

CSS代码：

[css] view plaincopy
  1. * { margin:0px; padding:0px; }   
  2.   
  3. .div_top{ width:100%; background:#FCC; }   
  4.   
  5. .div_bottom{ width:100%; background:#FFC; }   
  6.   
  7. .div_left{ position:absolute; width:200px; background:#FE2; }   
  8.   
  9. .div_right{ margin-left:200px; background:#0CF; }  

 

Javascript代码：

[javascript] view plaincopy
  1. <script>   
  2.   
  3. function P7_colH(){  
  4.   
  5.        var i,oh,hh,h=0,dA=document.p7eqc,an=document.p7eqa;  
  6.   
  7.        if(dA&&dA.length){  
  8.   
  9.               for(i=0;i<dA.length;i++){  
  10.   
  11.                      dA[i].style.height='auto';  
  12.   
  13.               }  
  14.   
  15.               for(i=0;i<dA.length;i++){  
  16.   
  17.                      oh=dA[i].offsetHeight;h=(oh>h)?oh:h;  
  18.   
  19.               }  
  20.   
  21.               for(i=0;i<dA.length;i++){  
  22.   
  23.                      if(an){  
  24.   
  25.                             dA[i].style.height=h+'px';  
  26.   
  27.                      }  
  28.   
  29.                      else{  
  30.   
  31.                             P7_eqA(dA[i].id,dA[i].offsetHeight,h);  
  32.   
  33.                      }  
  34.   
  35.               }  
  36.   
  37.    
  38.   
  39.        if(an){  
  40.   
  41.               for(i=0;i<dA.length;i++){  
  42.   
  43.                      hh=dA[i].offsetHeight;  
  44.   
  45.                      if(hh>h){  
  46.   
  47.                             dA[i].style.height=(h-(hh-h))+'px';  
  48.   
  49.                      }  
  50.   
  51.               }  
  52.   
  53.        }else{  
  54.   
  55.               document.p7eqa=1;  
  56.   
  57.        }  
  58.   
  59.               document.p7eqth=document.body.offsetHeight;   
  60.   
  61.               document.p7eqtw=document.body.offsetWidth;  
  62.   
  63.        }  
  64.   
  65. }  
  66.   
  67.    
  68.   
  69. function P7_eqT(){  
  70.   
  71.        if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw!=document.body.offsetWidth){  
  72.   
  73.               P7_colH();  
  74.   
  75.        }  
  76.   
  77. }  
  78.   
  79.    
  80.   
  81. function P7_equalCols(){  
  82.   
  83.        if(document.getElementById){  
  84.   
  85.               document.p7eqc=new Array;  
  86.   
  87.               for(i=0;i<arguments.length;i++){  
  88.   
  89.                      document.p7eqc[i]=document.getElementById(arguments[i]);  
  90.   
  91.               }  
  92.   
  93.               setInterval("P7_eqT()",10);  
  94.   
  95.        }  
  96.   
  97. }   
  98.   
  99.    
  100.   
  101. function P7_eqA(el,h,ht){  
  102.   
  103.        var sp=10,inc=10,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height);  
  104.   
  105.        ch=(ch)?ch:h;  
  106.   
  107.        var ad=oh-ch,adT=ht-ad;  
  108.   
  109.        nh+=inc;  
  110.   
  111.        nh=(nh>adT)?adT:nh;  
  112.   
  113.        g.style.height=nh+'px';   
  114.   
  115.        oh=g.offsetHeight;  
  116.   
  117.        if(oh>ht){  
  118.   
  119.               nh=(ht-(oh-ht));g.style.height=nh+'px';  
  120.   
  121.        }  
  122.   
  123.        if(nh<adT){  
  124.   
  125.               setTimeout("P7_eqA('"+el+"',"+nh+","+ht+")",sp);  
  126.   
  127.        }   
  128.   
  129. }  
  130.   
  131. </script>  


 

以上Html、CSS、Javascript三部分代码齐备后，还需要在网页的body标签处加入一行代码οnlοad="P7_equalCols('Div1','Div2')"，

变成<body οnlοad="P7_equalCols('Div1','Div2')">, 其中Div1对应的是左侧div的id，Div2对应的是右侧的id

如果是三列布局，可以再自己增加内容，变成 <body οnlοad="P7_equalCols('Div1','Div2','Div3')">

将以上代码复制到网页文件中，即可实现div自动等高的效果了。

http://www.jmfq.cn/news/4838383.html

相关文章：

  • dw内部网站链接怎么做/设计网站用什么软件
  • 天网网站建设/百姓网
  • 邯郸哪里做网站好/站内推广方案
  • 网站建设费计入那个科目/百度竞价排名商业模式
  • 网站怎么查哪家公司做的/南京市网站
  • 个人做电影网站服务器放国外安全吗/怎么在百度免费推广
  • 南充网站建设公司/网站推广关键词工具
  • wordpress改logo/整站seo服务
  • 开通建立企业网站/优化师是一份怎样的工作
  • wordpress用户前端创建相册/seo是指搜索引擎营销
  • 企业网站用户群/网络口碑营销的成功案例
  • 兰州论坛网站建设/黄石seo
  • 坪山公司网站建设/站长统计是什么意思
  • 金融网站建设/公司营销策划方案案例
  • 自己做的网站怎么链接火车头采集/搜索热词排行榜
  • 免费的网站认证/软文范例大全500字
  • 平台网站建设ppt/百度快照关键词推广
  • 石家庄网站设计/排名优化
  • 做网站时如何确定网站主题/西安网是科技发展有限公司
  • 做我姓什么的网站/建站网站
  • 软件或者网站的搜索怎么做/怎样注册个人网站
  • 网站建设业务怎么做/免费b站动漫推广网站2023
  • 旅游网站怎么做的/网络营销运营策划
  • 0基础做网站多久/市场监督管理局
  • 长沙内容营销公司/重庆百度seo代理
  • 网站建设发展指引/百度网盘搜索引擎官方入口
  • 天河手机网站建设/百度信息流推广平台
  • 可以用AI做网站上的图吗/西安优化seo托管
  • 企业网站优化定制/网络seo营销推广
  • 大连鑫农建设集团网站/百度网站入口