DotNetNuke(DNN)皮肤制作--如何居中内容

简介: 设计皮肤我们遇到的第一个问题就是如何居中内容,一般使用CSS+DIV布局有两种方法, 第一种方法是使用 auto margins,第二种方法是使用负margins 翻翻资料,使用auto margins的一般都是这么写的: 假设HTML部分如下: 现在使用auto margins居中id...
设计皮肤我们遇到的第一个问题就是如何居中内容,一般使用CSS+DIV布局有两种方法,
第一种方法是使用 auto margins,第二种方法是使用负margins
翻翻资料,使用auto margins的一般都是这么写的:
假设HTML部分如下:
< body >
< div  id ="wrapper" >
</ div >
</ body >
现在使用auto margins居中id为wrapper的DIV,
#wrapper
{} {
   width
: 720px; 
   margin
: 0 auto;
}
但你却发现,按照这种“标准”写法,皮肤安装到DotNetNuke中后,在IE 5.x/Win、IE 6/Win中里面却怎么也没法把内容居中,auto margins方法失效了,
这是为什么呢?原来,IE 5.x/Win是不支持auto margins的,而DNN默认的DOCTYPE会触发IE6进入quirks模式( 如何解决),这种模式下也是不支持auto margins的,看样子这个经典居中方法是没法用在DNN上了,幸运的是,IE错误的理解text-align:center这个定义,IE会把所有的东西都居中而不仅仅是text,我们可以利用这一点来解决问题。修改后的代码如下(只需要修改CSS部分):
body
{} {
   text-align
:center;
}


#wrappter
{} {
   width
:720px;
   margin
: 0 auto;
   text-align
: left;
}
修改完再试一试,在IE里面也表现完美!

第二种方法是使用负的margin,这种方法也会带来版式上的问题,且听下回分解!
目录
相关文章
|
机器学习/深度学习 人工智能 自然语言处理
当前AI大模型在软件开发中的创新应用与挑战
2024年,AI大模型在软件开发领域的应用正重塑传统流程,从自动化编码、智能协作到代码审查和测试,显著提升了开发效率和代码质量。然而,技术挑战、伦理安全及模型可解释性等问题仍需解决。未来,AI将继续推动软件开发向更高效、智能化方向发展。
|
11月前
|
Web App开发 搜索推荐 开发者
浏览器插件上架指南:如何把你的产品搬上浏览器插件市场
在实践了 Chrone、Firefox、Edge、Opera 等 几个主要的插件平台的上架发布工作后,我觉得很有必要把这个过程和思考记录下来,分享给大家,希望能提供一些参考和避坑的经验。我想通过这篇文章,和大家聊聊「为什么我要做这件事」,以及「这个系列文章会包含哪些内容」。我想用一个系列的文章,记录我是如何把 EmojiClick 搬到浏览器插件市场的,也给大家提供一些借鉴经验。
298 19
|
12月前
|
人工智能 并行计算 算法
谷歌量子计算机:开启计算新时代
谷歌量子计算机是现代信息技术的前沿成果,基于量子力学原理构建,具有超越经典计算机处理复杂问题的巨大潜力。谷歌通过研发“悬铃木”处理器等,实现了量子霸权,在量子化学模拟和优化问题求解等领域取得显著成就。尽管面临量子比特稳定性和纠错等挑战,谷歌持续创新,为新时代计算奠定基础。
334 16
|
机器学习/深度学习 移动开发 数据挖掘
Python是一种广泛使用的高级编程语言,具有许多优点和缺点
Python是一种广泛使用的高级编程语言,具有许多优点和缺点
615 1
|
Kubernetes 应用服务中间件 nginx
kubernetes快速入门
该博客文章提供了一个关于kubernetes快速入门的指南,涵盖了kubectl命令工具的使用、资源对象操作、以及如何通过kubectl与Kubernetes集群交互和管理资源。
409 1
kubernetes快速入门
|
Web App开发 缓存 JavaScript
构建高效后端服务:Node.js与Express框架的完美结合
【9月更文挑战第11天】本文将引导开发者探索如何利用Node.js和Express框架搭建一个高效的后端服务。文章不仅深入讲解了这两个工具的核心概念,还通过实际示例展示了它们的强大功能和易用性。读者将学会如何处理HTTP请求、设计RESTful API以及优化应用性能。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的知识,帮助你在后端开发领域更进一步。
|
机器学习/深度学习 网络协议 安全
5G 网络的防御利器:抵御分布式拒绝服务攻击
5G 网络的防御利器:抵御分布式拒绝服务攻击
320 0
|
分布式计算 大数据 物联网
从历年 Gartner hype cycle 看大数据行业的发展历史和趋势
从历年 Gartner hype cycle 看大数据行业的发展历史和趋势
|
弹性计算 数据安全/隐私保护
阿里云域名注册+服务器购买+备案教程
备案前准备: 注册账号——备案前您需要拥有一个阿里云账号(支付宝账户可直接登录) 域名准备——备案前需完成域名注册及实名认证 服务器准备——购买阿里云大陆境内服务器,或获取服务器的备案服务号 备案负责人手机下载“阿里云”APP
阿里云域名注册+服务器购买+备案教程
|
传感器 Ubuntu API
ESP32-C3入门教程 基础篇(五、RMT应用 — 控制SK6812全彩RGB 灯)
测试第五课,本来是准备测试一下PWM驱动 SK6812 RGB灯, 但是研究了一段时间,发现在ESP32-C3 有更好而且现成的方式 实现 SK6812 的控制, 使用PWM也不是不可以,只是对于初学者,需要多花好多时间, 所以本文还是先以ESP32-C3内置的 RMT 进行 SK6812 的控制,毕竟有现成的示例
2188 0
ESP32-C3入门教程 基础篇(五、RMT应用 — 控制SK6812全彩RGB 灯)