css格式问题_html/css_WEB-ITnose

php中文网

发布时间：2016-06-21 09:20:22

1033人浏览过

来源于php中文网

原创

<!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>无标题文档</title><style type="text/css">#class3{	width:900px;	margin-left:auto;	margin-right:auto;	position:relative;	background-color:#099;	margin-top:150px;	}#class3 ul{	width:800px;	height:30px;	background-color:#936;	margin-left:auto;	margin-right:auto;	position:relative;	}	#class3 li{	list-style-type: none;	width: 100px;	position:relative;	margin-top:10px;	float:left;	background-color:#3F0;	margin-right:10px;	text-align:center;	}	#class2{	width:900px;	margin-left:auto;	margin-right:auto;	position:relative;	background-color:#099;	height:50px;	}			#class2 li .01{	list-style-type: none;	position: absolute;	left: 670px;	top: 23px;}	.02{	list-style-type: none;	position: absolute;	left: 365px;	top: 30px;}.03{	list-style-type: none;	position: absolute;	left: 308px;	top: 30px;}.04{	list-style-type: none;	position: absolute;	left: -232px;	top: 30px;	}	.05{	list-style-type: none;	position: absolute;	left: 201px;	top: 30px;}.06{	list-style-type: none;	position: absolute;	left: 252px;	top: 30px;}.07{	list-style-type: none;	position: absolute;	left: -97px;	top: 28px;}</style></head><body><div id="class2"><ul><li class="01">横排</li><li class="02">横排</li><li class="03">横排</li><li class="04">横排</li><li class="05">横排</li><li class="06">横排</li><li class="07">横排</li></ul></div><div id="class3"><ul><li>横排</li><li>横排</li><li>横排</li><li>横排</li><li>横排</li><li>横排</li><li>横排</li></ul></div></body></html>

.07{	list-style-type: none;	position: absolute;	left: -97px;	top: 28px;}

ie8浏览器为什么设置了类中的位置会无效，还是原来那样

<!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>无标题文档</title><style type="text/css">#box06 {    position:relative;    width: 500px;    height: 100px;  top:50%;  left:50%;  margin-left:-250px;  margin-top:-50px;    background-color:#F39;}  #box07 {    position:absolute;    width: 300px;    height: 30px;    background-color:#0F0;    left:50%;  top:50%;  margin-left:-150px;  margin-top:-15px;}  #box08 {    position:absolute;    width: 300px;    height: 30px;    background-color:#0Ff;    left:30px;  top:50%;}.nav{	width:500px;	background-color:#000;}.nav li{width:80px;float:left;list-style:none;display:inline;background:#0F0;text-align:center;margin-right:10px;}</style></head><body><div class="nav"><ul><li>横排</li><li>横排</li><li>横排</li></ul></div><div> DIV1 </div><div> DIV2 </div><div style= "display:inline "> DIV1 </div><div style= "display:inline "> DIV2 </div><span>DIVCSS!</span> <span>DIVCSS5 </span> <span style= "display:block "> SPAN1 </span><span style= "display:block "> SPAN2 </span><div id="box06">  <div id="box07">box07</div>  <div id="box08">box08</div></div></body></html>

.nav{	width:500px;	background-color:#000;}

2、为什么类nav的这个黑色背景色出不来？

ZYCH自由策划企业网站管理系统06 Build210109

ZYCH自由策划企业网站管理系统是一个智能ASP网站管理程序，是基于自由策划企业网站系列的升级版，结合以往版本的功能优势，解决了频道模板不能自由添加删减的问题，系统开发代码编写工整，方便读懂，系统采用程序模板分离式开发。方便制作模板后台模板切换，模板采用动态编写，此模板方式写入快，代码编写自由，即能满足直接使用也能满足二次开发。全新的后台界面，不管是在程序的内部结构还是界面风格及CSS上都做了大量

下载

回复讨论(解决方案)

1class不要数字开头
2清除float

<div class="nav"><ul><li>横排</li><li>横排</li><li>横排</li> </ul>  <div style="clear:both;"></div></div>

<!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>无标题文档</title><style type="text/css">#class3{	width:900px;	margin-left:auto;	margin-right:auto;	position:relative;	background-color:#099;	margin-top:150px;	}#class3 ul{	width:800px;	height:30px;	background-color:#936;	margin-left:auto;	margin-right:auto;	position:relative;	}	#class3 li{	list-style-type: none;	width: 100px;	position:relative;	margin-top:10px;	float:left;	background-color:#3F0;	margin-right:10px;	text-align:center;	}	#class2{	width:100px;	margin-left:auto;	margin-right:auto;	position:relative;	background-color:#099;	height:50px;	}			#class2 .c01{	list-style-type: none;	position: absolute;	left: 422px;	top: 15px;	width: 60px;}	.c02{	list-style-type: none;	position: absolute;	left: 365px;	top: 15px;	width: 60px;}.c03{	list-style-type: none;	position: absolute;	left: 82px;	bottom: 0px;	right: 99px;	top: 15px;	height: 31px;	width: 58px;	top: 15px;}.c04{	list-style-type: none;	position: absolute;	left: -232px;	top: 30px;	top: 15px;	}	.c05{	list-style-type: none;	position: absolute;	left: 162px;	top: 15px;	width: 60px;	height: 32px;}.c06{	list-style-type: none;	position: absolute;	left: 252px;	top: 15px;	width: 60px;}.c07{	list-style-type: none;	position: absolute;	left: -97px;	top: 15px;	width: 60px;}</style></head><body><div id="class2"><ul><li class="c01">横1排</li><li class="c02">横2排</li><li class="c03">横3排</li><li class="c04">横4排</li><li class="c05">横5排</li><li class="c06">横6排</li><li class="c07">横7排</li></ul></div><div id="class3"><ul><li>横排</li><li>横排</li><li>横排</li><li>横排</li><li>横排</li><li>横排</li><li>横排</li></ul></div></body></html>

<!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>无标题文档</title><style type="text/css">#box06 {    position:relative;    width: 500px;    height: 100px;  top:50%;  left:50%;  margin-left:-250px;  margin-top:-50px;    background-color:#F39;}  #box07 {    position:absolute;    width: 300px;    height: 30px;    background-color:#0F0;    left:50%;  top:50%;  margin-left:-150px;  margin-top:-15px;}  #box08 {    position:absolute;    width: 300px;    height: 30px;    background-color:#0Ff;    left:30px;  top:50%;}.nav{	width:500px;	background-color:#000;}.nav li{width:80px;float:left;list-style:none;display:inline;background:#0F0;text-align:center;margin-right:10px;}</style></head><body><div class="nav"><ul><li>横排</li><li>横排</li><li>横排</li></ul> <div style="clear:both;"></div></div><div> DIV1 </div><div> DIV2 </div><div style= "display:inline "> DIV1 </div><div style= "display:inline "> DIV2 </div><span>DIVCSS!</span> <span>DIVCSS5 </span> <span style= "display:block "> SPAN1 </span><span style= "display:block "> SPAN2 </span><div id="box06">  <div id="box07">box07</div>  <div id="box08">box08</div></div></body></html>

修复导航下拉菜单在响应式场景下的对齐错位问题

如何在打印输出中精确控制元素尺寸（毫米级精度）

如何实现 SVG 元素的原生缩放与滚动（无第三方库）

HTML5Video标签支持哪些格式_HTML5视频编码兼容性问题解答【汇总】

CSS 中百分比高度失效的原因与解决方案

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：css ul li 中的控件垂直居中_html/css_WEB-ITnose 下一篇：为什么在火狐浏览器中，这些文字是图片格式呢？百度为什么这么做？_html/css_WEB-ITnose

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI编程开发 AI聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI编程开发 AI文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI编程开发 AI文本写作

智谱清言 - 免费全能的AI助手

AI编程开发 Agent智能体

相关专题

Golang 测试体系与代码质量保障：工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链（如go test）、单元测试、集成测试及端到端测试实践，结合代码覆盖率分析、静态代码扫描（如go vet）和动态分析工具，建立全链路质量监控机制。通过自动化测试框架、持续集成（CI）流水线配置及代码审查规范，实现测试用例管理、缺陷追踪与质量门禁控制，确保代码健壮性与可维护性，为高可靠性工程系统提供质量保障。

2026.02.28

Golang 工程化架构设计：可维护与可演进系统构建

Go语言工程化架构设计专注于构建高可维护性、可演进的企业级系统。本专题深入探讨Go项目的目录结构设计、模块划分、依赖管理等核心架构原则，涵盖微服务架构、领域驱动设计(DDD)在Go中的实践应用。通过实战案例解析接口抽象、错误处理、配置管理、日志监控等关键工程化技术，帮助开发者掌握构建稳定、可扩展Go应用的最佳实践方法。

2026.02.28

Golang 性能分析与运行时机制：构建高性能程序

Go语言以其高效的并发模型和优异的性能表现广泛应用于高并发、高性能场景。其运行时机制包括 Goroutine 调度、内存管理、垃圾回收等方面，深入理解这些机制有助于编写更高效稳定的程序。本专题将系统讲解 Golang 的性能分析工具使用、常见性能瓶颈定位及优化策略，并结合实际案例剖析 Go 程序的运行时行为，帮助开发者掌握构建高性能应用的关键技能。

2026.02.28