<!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. Part 8 AngularJS filters

    Filters in angular can do 3 different things 1. Format data 2. Sort data 3. Filter data Filters can ...

  2. 杭电ACM2080--夹角有多大II

    http://acm.hdu.edu.cn/showproblem.php?pid=2080 /* //Author:nunu // #include <stdio.h> #include ...

  3. 模板template

    1.模板就是实现代码重用机制的一种工具,它可以实现类型参数化,即把类型定义为参数,从而实现了真正的代码可重用性.模板可以分为两类,一个是函数模板,另一个是类模板. 2.函数模板的定义一般形式如下: t ...

  4. Easyui datebox控件打开页面就验证解决方法

    问题描述: datebox时间控件有些场景下默认值需要为空,但是为空的情况下打开页面会自动验证,十分影响美观. 实现原理: <input class="easyui-databox&q ...

  5. HTML5-Geolocation&地图.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. Oracle11g数据库安装

    一.安装流程截图(没截图部分都默认) 服务器如果不是单独的数据库服务器,内存分配大概1/4即可. 二.安装后,表空间,以及创建账号脚本 sqlplus / as sysdba 登陆数据库,执行 /*第 ...

  7. visual studio中创建单元测试

    1 打开  工具--自定义 2 选择 上下文菜单--编辑器上下文菜单|代码窗口 3 在这里我们可以看到“创建单元测试”这个菜单了,将它移到运行测试菜单下面 4 关闭VS并重启 重启后再对着类名,点击右 ...

  8. [大牛翻译系列]Hadoop（16）MapReduce 性能调优：优化数据序列化

    6.4.6 优化数据序列化 如何存储和传输数据对性能有很大的影响.在这部分将介绍数据序列化的最佳实践,从Hadoop中榨出最大的性能. 压缩压缩是Hadoop优化的重要部分.通过压缩可以减少作业输出数 ...

  9. 学习php中常用语句与函数

    1.while循环多用于不清楚循环次数的情况下,如需要把从数据库中读取出的多条记录(不清楚到底有多少条)并且要根据某个字段的值进行分类,每类值的具体数目,如下图: 其中选项有三种值,对每个值的票数时行 ...

  10. Nginx启动、停止与平滑重启

    如何启动Nginx:/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf 停止Nginx:可以发送向通信号给Nginx主进程的 ...