网站导航网学 原创论文 原创专题 网站设计 最新系统 原创论文 论文降重 发表论文 论文发表 UI设计定制 论文答辩PPT格式排版 期刊发表 论文专题
返回网学首页
网学原创论文
最新论文 推荐专题 热门论文 论文专题
当前位置: 网学 > 设计资源 > DIVCSS技术 > 正文

DIV自适应页面宽度的实现

论文降重修改服务、格式排版等 获取论文 论文降重及排版 论文发表 相关服务

  在firefox1.5,IE5.5,IE6.0,Oprea8.5下测试通过。

  <!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">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <title>无标题文档</title>

  <style type="text/css">

  <!--

  div {

  height: 5em;

  line-height: 5em;

  text-align: center;

  margin: 0;

  padding: 0;

  }

  #d1, #d3, #d4, #d6 {

  float: left;

  background: #CCC;

  }

  #d1 {

  width: 20%;

  }

  #d2 {

  float: left;

  width: 30%;

  background: red;

  }

  #d3 {

  width: 50%;

  }

  #d4 {

  width: 200px;

  margin-right: -3px;

  }

  #d5 {

  background: red;

  line-height: 1.4em;

  text-align: left;

  }

  #d6 {

  width: 300px;

  float: right;

  margin-left: -3px;

  }

  div[id="d4"] {

  margin-right: 0 !important;

  }

  div[id="d6"] {

  margin-left: 0 !important;

  }

  -->

  </style>

  </head>

  <body>

  <h2>百分比宽度</h2>

  <div id="d1">20%</div>

  <div id="d2">30%</div>

  <div id="d3">50%</div>

  <h2>自适应</h2>

  <div id="d4">left:200px</div>

  <div id="d6">right:300px</div>

  <div id="d5">自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应</div>

  </body>

  </html>

  • 下一篇资讯: CSS滤镜详解
  • 设为首页 | 加入收藏 | 网学首页 | 原创论文 | 计算机原创
    版权所有 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
    Copyright 2008-2020 myeducs.Cn www.myeducs.Cn All Rights Reserved 湘ICP备09003080号 常年法律顾问:王律师