<!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=UTF-8" />

<title>web浮动练习</title>

<!-- 先写结构然后结构优化 然后写css样式 -->

<style type="text/css">

    body,div,#header,#content,#footer,ul,li,#box,#contentright,#contentleft{margin:0px; padding:0px;}  /* 重置css标签*/

    #header,#content,#footer,ul{width:800px; margin:0 auto; font-weight:bold; font-style:normal;}/* 集体声明  水平居中 字体加粗 字体样式 标准*/

    #header{height: 80px;background:#85C8FA;}

    #content{ background:#0F0; overflow:hidden;} /*解决溢出问题 */    /*去掉高度 内容在文本流之中缩小为0 overflow: hidden;解决问题 父级盒子高度自适应不要用清除浮动*/

    #box{background:#ffc; width:100%; height:500px; float:left;}

        #contentright{ margin-left:600px;background:#CCF; height:500px; width:200px; float:left; display:inline;}    /*留出600px的边距*/

    #contentleft{ background:#999; height:500px; width:600px; float:left;margin-left:-800px; display:inline;} /*去掉霸权主义 左边距负100 正好跨越一个页面 到最左边右边的留出一块相对距离正好组成一个页面*/

    #footer{height:100px; background:#85C8FA;}

    ul{background: #60F; height:40px; margin-bottom:1px #333; }

    ul li { height:40px; line-height:40px; float:left; list-style:none;} /*设置高度 行高  使其垂直居中*/

    ul li a{ color:#fff; padding:0 20px;text-decoration:none; float:left; display:block;} /*设置a的内边距撑大 a盒子让连接范围扩大到边距  去掉下划线  设置ie6  不识别块状元素bug*/

    ul li a:hover{ background: #FE9827;}     /*设置鼠标移动效果 背景颜色*/

</style>

</head>

<body>

        <div id="header">web布局练习</div>

        <div  id="nav">

                <ul>

                <li><a href="#">首页</a></li>

                <li><a href="#">jquery</a></li>

                <li><a href="#">Javascript</a></li>

                <li><a href="#">xhtml</a></li>

                <li><a href="#">css3</a></li>

                <li><a href="#">html5</a></li>

                <li><a href="#">关于作者</a></li>

        </div>

<div id="content">

        <div id="box">

         <div id="contentright"></div>

         </div>

                <div id="contentleft"></div>  

</div>

        <div id="footer">footer</div>

</body>

</html>

不能用100%ie6不兼容的更多相关文章

  1. IE6部分兼容问题

    border-style:dotted 点线 IE6不兼容 (除了solid以外,其它都有兼容问题,不完全一样) a IE6 不支持a以外的所有标签伪类,IE6以上版本支持所有标签的hover伪类. ...

  2. ie6的兼容总结

    ie6的兼容处理总结 1.透明背景图: .timer { _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='my.png ...

  3. IE6浏览器兼容问题及部分解决方案（网上整理）

    作为一个初涉前端技术的IT菜鸟,IE浏览器的兼容问题是一个不得不跨越的坎.为了能够在不同浏览器达到同样的显示效果,就不得不花心思想出办法实现兼容.由于各大主流浏览器内核不同,各自的实现标准有所差异,因 ...

  4. IE6不兼容问题

    IE6不兼容问题 一.选择器兼容问题          1.交集选择器从IE7以上兼容(div.special): 2.儿子选择器(>):IE7开始兼容,IE6不兼容. 3.序选择器(first ...

  5. IE6支持兼容min-width、max-width CSS样式属性

    IE6支持兼容min-width.max-width CSS样式属性 让IE6支持max-width.IE6支持min-width样式 我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定 ...

  6. IE6 的兼容相关问题

    因为在实习公司要求兼容IE6+,所以将IE6相关的样式兼容问题列出,及解决方案. 1.让页面变丑的透明背景图片问题: HTML都为以下代码: <div class="img-png&q ...

  7. min-height最小高度的实现（兼容IE6、IE7、FF）（解决IE6不兼容min-height）

    <!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...

  8. ie6下兼容问题

    最小高度问题:overflow:hidden 在ie6.7下 li本身不浮动 内容浮动 li产生3像素间隙 解决:vertical-align:top; 二.当ie6下最小高度问题和li间隙问题共存时 ...

  9. ie6的兼容问题及解决方案

    1.png24位的图片在ie6浏览器上会出现背景,解决方案是做成png8位: 2.浏览器默认的margin和padding不同,解决方法是用全局重置来统一,即是*{margin:0;padding:0 ...

随机推荐

  1. windows下，python+scrapy环境搭建

    •安装lxml(官网给出的地址http://www.lfd.uci.edu/~gohlke/pythonlibs/#lxml,下载whl文件安装) •安装zope.interface https:// ...

  2. 关于Windows® API Code Pack for Microsoft® .NET Framework

    相比之前的操作系统,Window 7(or Vista)提供了很多新特性,我们在应用实现中可以利用这些特性来提升用户体验. 这些特性主要包括以下几个方面: Shell Enhancements Dir ...

  3. Quartz 第六课 CronTrigger（官方文档翻译）

    CronTriggers使用的频率比SimpleTrigger跟高.如果需要schedule 中触发Job的方式类似于日历的形式而不是一个确定的是时间间隔,那就需要使用CronTrigger. 对于C ...

  4. 原生js实现addClass,removeClass,hasClass方法

    function hasClass(elem, cls) { cls = cls || ''; if (cls.replace(/\s/g, '').length == 0) return false ...

  5. ThinkPHP控制器

    ThinkPHP控制器Controller 1.什么是控制器 在MVC框架中,其核心就是C(Controller)控制器.主要用于接收用户请求,处理业务逻辑. 2.控制器的定义 在一个ThinkPHP ...

  6. mysql：The total number of locks exceeds the lock table size

    使用mysql InnoDB存储引擎进行大量数据的更新,删除的时候容易引发”The total number of locks exceeds the lock table size”问题,解决方法之 ...

  7. spring4.0源码导入

    一个面试,让我知道了自己的不足,一天不进步就是倒退. spring源码导入eclipse 本人的环境 (我导入的是最新的spring 4.0 所以要用jdk1.8) 1 安装git (mac上自带了g ...

  8. 【风马一族_git_github】使用Github搭建个人网站

    个人网站 访问 https://用户名.github.io  ( 风马一族的Github网站 ) 搭建步骤 1)创建个人站点-->新建仓库(注:仓库名必须是[用户名.github.io]) 2) ...

  9. 【风马一族_Android】Android 前端内容

    Android 前端内容 4.1 View 类概述 4.1.1 关于 View //类型说明 view(视图)指的是用户界面组件的基本构建基块.一个视图占据屏幕上的矩形区域,负责绘图和事件处理.视图是 ...

  10. 用CSS实现Firefox 和IE 都支持的Alpha透明效果

    有的时候,为了实现一些特殊效果,需要将页面元素变透明,本文介绍的就是用 CSS 实现 Firefox 和 IE 都支持的 Alpha 透明效果.CSS: filter:alpha(opacity=50 ...