不能用100%ie6不兼容

复制代码
<!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>
复制代码

 

本文作者:Crack's_Blog

本文链接:https://www.cnblogs.com/aix1314/p/3778961.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   Crack's_Blog  阅读(256)  评论(0编辑  收藏  举报
编辑推荐:
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
阅读排行:
· 为DeepSeek添加本地知识库
· .NET程序员AI开发基座:Microsoft.Extensions.AI
· 精选4款基于.NET开源、功能强大的通讯调试工具
· 数据不出内网:基于Ollama+OneAPI构建企业专属DeepSeek智能中台
· 大模型工具KTransformer的安装
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起