不能用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 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 为DeepSeek添加本地知识库
· .NET程序员AI开发基座:Microsoft.Extensions.AI
· 精选4款基于.NET开源、功能强大的通讯调试工具
· 数据不出内网:基于Ollama+OneAPI构建企业专属DeepSeek智能中台
· 大模型工具KTransformer的安装