WEB标准布局的Div + CSS 高度自适应解决方法

WEB标准布局的Div + CSS 高度自适应解决方法的相关文章

• 
  Div + CSS 高度自适应解决方案

  标签：Html CSS布局 Div+CSS XHTML

  自适应高度的问题，采用 Div + CSS 进行三列或二列布局时，事先不知道具体高度，只能根据内容的增减自适应高度，要使两列（或三列）的高度相同，用 Table 很容易实现，但采用 Div + CSS 就显得比较麻烦了。按照一般的做法，大都采用背景图填充或 JS 脚本的方法使高度相同，但这些都不是最好的办法，我认为… 下面介绍采用“隐藏容器溢出”和“正内补丁”和“负外补丁”结合的方法 主要代码： 以下是引用片...[ 查看全文 ]

  丢了梦123

  61
• 
  使用Web标准建站第10天：自适应高度

  标签：Html CSS布局 Div+CSS XHTML

    如果我们想在3列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用div布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套div，把三列放进一个DIV中，就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面)： 这个例子的页面主要代码如下：<div id="header"</div <di...[ 查看全文 ]

  home梦想的味道

  11
• 
  Xhtml第10天:div自适应高度

  标签：Html CSS布局 Div+CSS XHTML

  如果我们想在3列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用div布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套div，把三列放进一个div中，就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面)： #pagebox {padding-right: 20px; padding-left: 20px; background: #fff; pa...[ 查看全文 ]

  腾宝Yes

  11
• 
  解决列高度自适应(列高度相同)的五种方法

  标签：Web开发

  1.背景图填充 这是使用最广泛的一种做法，无hacks，推荐使用： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /titleEqual height(列高度相同的方法)/titlestyle ...[ 查看全文 ]

  jakcerw

  01
• 
  对话闲聊DIV CSS与WEB标准

  标签：Web开发

  Web标准这个词听说好久了，但是到底什么是Web标准呢？我们该如何实现Web标准呢？DIV CSS布局是Web标准吗？实现Web标准到底有什么好处呢？ 不知上面这些问题大家以前是怎么认为的，至少我以前很傻乎乎的认为Div CSS布局就是符合Web标准。下面是布鲁斯狼和其老友的一段聊天对话，看完后希望大家在对Web标准的理解上有进一步的提高和认识！ 对话一 横导航链接为什么要用UL LI 为什么不直接在一行写上文本链接呢...[ 查看全文 ]

  萨瓦尼卡哦

  31
• 
  关于IFRAME 自适应高度的研究

  标签：Web开发

  htmlhead meta http-equiv="Content-Type" content="text/html; charset=gb2312" meta name="GENERATOR" content="Microsoft FrontPage 4.0" meta name="ProgId" content="FrontPage.Editor.Document" titleNew Page 1/title /head body IFRAME id="test" name="test" frameBorder=0 scrolling=no src="http://10.10...[ 查看全文 ]

  炽天使之风

  01
• 
  自适应高度框架 ----属个人收藏内容

  标签：Web开发

  main.htm: html       head          meta  http-equiv='Content-Type'  content='text/html;  charset=gb2312' /          meta  name='author'  content='F.R.Huang(meizz梅花雪)//www.meizz.com' / &...[ 查看全文 ]

  微15250773072

  21
• 
  让iframe自适应高度（支持XHTML支持FF）

  标签：Web开发

  先说明，这个办法只限于iframe中的子页面也是本地页面（不能引用外网页面） ======方法===== 第一步 js部分 function getSize() {        var xScroll, yScroll;               if (window.innerHeight && window.scrollMaxY) {  ...[ 查看全文 ]

  bahganbi83166

  01
• 
  使用Web标准建站第9天：CSS布局入门

  标签：Html CSS布局 Div+CSS XHTML

    接下来开始要真正设计布局了。和传统的方法一样，你首先要在脑海里有大致的轮廓构想，然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素，因为web标准更关注结构和内容，实际上它与网页的美观没有根本冲突，你想怎么设计就怎么设计，用传统表格方法实现的布局，用DIV也可以实现。技术有一个成熟的过程，把DIV看成和TABLE一样的工具，如何运用就看你的想象力了。 注：在实际应用过...[ 查看全文 ]

  轮转殿

  251
• 
  javascript应用：Iframe自适应其加载的内容高度

  标签：Web开发

  main.htm:  代码如下： html        head           meta  http-equiv='Content-Type'  content='text/html;  charset=gb2312'           meta  name='author'  content='F.R.Huang(meizz梅花雪)//w...[ 查看全文 ]

  hxjsj1234

  91
• 
  使用Web标准建站第8天：CSS布局入门

  标签：Html CSS布局 Div+CSS XHTML

    CSS布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距；而现在则采用层(div)来定位，通过层的margin,padding,border等属性来控制版块的间距。 1.定义DIV 分析一个典型的定义div例子： #sample{ MARGIN: 10px 10px 10px 10px; PADDING:20px 10px 10px 20px; BORDER-RIGHT: #CCC 2px solid; BORDER-BOTTOM: #CCC 2p...[ 查看全文 ]

  黑蛋儿射手

  151
• 
  用CSS控制图片自适应大小

  标签：Web开发

  图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制。 代码：   .img { max-width:600px; width:600px; width:e­xpression(document.body.clientWidth600？"600px":"auto"); overflow:hidden; } ◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。 ◎ width:600px; 在所有浏览器中图片的大小为600px; ◎...[ 查看全文 ]

  恺撒ct10

  51
• 
  CSS设计圆角自适应按钮教程

  标签：Web开发

  !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" head title/title meta http-equiv="Content-Type" content="text/html; charset=gb2312" / style type="text/css" !-- *{padding:0px;margin:0px;} body{font-size:12px;} h2{margin:50px;} a{text-decoratio...[ 查看全文 ]

  Oh小菲机

  221
• 
  DIV CSS常用的网页布局代码

  标签：Web开发

  单行一列 以下是引用片段： body{margin:0px;padding:0px;text-align:center;} #content{margin-left:auto;margin-right:auto;width:400px;width:370px;} 两行一列 以下是引用片段： body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;} #content-end{margin-left:auto;margin-right:auto;width:400px;width:370px;} 三...[ 查看全文 ]

  勤奋的苦寒

  31
• 
  如何实现iframe(嵌入式帧)的自适应高度

        好几次看到有人提问问到如何实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象，刚好我在工作中也碰到了类似问题，于是上网翻查，东抄抄西看看，弄出来这么一个函数，贴到页面里面就能用了。不敢独享，大家要是觉得有用，欢迎使用 源代码如下 <script type="text/javascript"  //** iframe自动适应页面 **//  //...[ 查看全文 ]

  模范好脑公

  51
• 
  CSS教程：图片的自适应居中和兼容处理

  标签：平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计

  前几天在做腾讯微博的微卖场的时候，遇到需要做图片居中的需求。也就是说，商品列表中的图片需要居中显示。因为图片是卖家自己把商品图片链接过来，商品图片的大小没有做限制和过滤。所以我们需要做的是，让图片在容器当中水平居中、垂直居中、图片自适应容器大小。图片原图大小和在容器中显示的大小有这样的关系： 假设容器大小为200像素*200像素，图片的宽为x 像素，高为y 像素，则： 当x=200,y=200时，图...[ 查看全文 ]

  tianzhaobin111

  51
• 
  Div+CSS布局入门教程

  标签：Html CSS布局 Div+CSS XHTML

  在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是...[ 查看全文 ]

  扯疼的笑

  141
• 
  使两个iframe的高度与内容自适应,且相等

  标签：Web开发

  div class="TxtBox" iframe frameborder="0" scrolling="no" name="news1"  id="news1" onload="if(document.frames['news1'].document.body.scrollHeightdocument.frames['news2'].document.body.scrollHeight) document.all.news1.height=document.frames['news1'].document.bo...[ 查看全文 ]

  我有个愿望Y

  01
• 
  掌握盒模型轻松DIV CSS网页布局

  标签：Web开发

  如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin），如图1所示。 图1 盒模型图解 填充、边框和边界都分为上右下左四个方向，既可以分别定义，也可以统一定义。 CSS内定义的宽（width）和高（height），指...[ 查看全文 ]

  蓝蓝蓝阿鲁纳

  21
• 
  实践DIV＋CSS网页布局入门指南

  标签：Html CSS布局 Div+CSS XHTML

  你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对 应的...[ 查看全文 ]

  将星風雲

  181