大佬教程收集整理的这篇文章主要介绍了我患有“divitis”吗? (需要CSS专家),大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
HTML:
<div id="header"> <div class="container"> <div id="bAnner"> <h1><a href="http://widerdesign.co.nr/">wider design</a></h1> <ul id="lang"> <li><a href="index.php">English</a></li> <li><a href="es/index.php">Español</a></li> <li><a href="tw/index.php">中文(繁體)</a></li> <li><a href="cn/index.php">中文(简体)</a></li> </ul> </div> <div id="intro"> <div id="tagline"> <h2>Nulla vitae tortor mauris</h2> <p>Pellentesque faucibus est eu tellus varius in susc...</p> </div> <div id="about"> <h2>right</h2> <p>Pellentesque faucibus est eu tellus varius in susc...</p> </div> </div><!-- #intro --> </div><!-- .container --> </div><!-- #header -->
CSS:
.container { margin: 0 auto; overflow: hidden; width: 960px; } /* header */ #header { BACkground: #EEE; } #header h1 { float: left; } #header h2,#header a,#header p { color: #999; } #header h1 a { BACkground: url(../images/logo.png) no-repeat scroll 0 0; float: left; height: 30px; text-indent: -9999px; width: 500px; } #bAnner { border-bottom: 1px solid #DDD; padding: 0 0 15px 0; margin: 30px 0 30px 0; overflow: hidden; width: 960px; } #lang { float: right; padding: 9px 0 0 0; } #lang li { float: left; margin: 0 0 0 20px; } #lang li a { font-size: 10px; } /* intro */ #intro { overflow: hidden; padding: 0 0 30px 0; } #tagline { float: left; margin: 0 40px 0 0; width: 540px; /* 560 */ } #tagline h2 { font-size: 24px; } #about { float: right; width: 380px; }
使用这些div的说明:
header:定义扩展的背景颜色,直到窗口结束(位于div .container之外)。
container:居中内容(而不是背景)。
bAnner:定义ul#lang和h1周围的背景或边框颜色。
intro:同上,但#tagline和#about(否则我必须定义说padding或边界为tagline和单独)。
我过度使用div?
这可以简化吗?
“divitis”的一个症状是当您看到< div>的列表而不是使用< ul> ;.
以上是大佬教程为你收集整理的我患有“divitis”吗? (需要CSS专家)全部内容,希望文章能够帮你解决我患有“divitis”吗? (需要CSS专家)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。