|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
任何语言都有它的优越性,Div作为网页布局的标签,它可以很轻快的达到想要的效果,并且可以节约代码,我希望以后学这个标签的同学,要掌握它的每一个知识点,充分利用这个标签。只管有CSS的vertical-align特征,可是其实不能无效办理未知高度的垂直居中成绩(在一个DIV标签里有未知高度的文本或图片的情形下)。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><styletype="text/css"><!--*{margin:0;padding:0}div{width:500px;height:500px;border:1pxsolid#ccc;overflow:hidden;position:relative;display:table-cell;text-align:center;vertical-align:middle}divp{position:static;+position:absolute;top:50%}img{position:static;+position:relative;top:-50%;left:-50%;width:276px;height:110px}--></style><div><p><styletype="text/css"><!--*{margin:0;padding:0}div{width:500px;height:500px;line-height:500px;border:1pxsolid#ccc;overflow:hidden;position:relative;text-align:center;}divp{position:static;+position:absolute;top:50%;vertical-align:middle}img{position:static;+position:relative;top:-50%;left:-50%;width:276px;height:110px;vertical-align:middle}--></style><div><p><styletype="text/css">div{display:table-cell;height:300px;width:500px;text-align:center;border:1pxsolid#000;vertical-align:middle}</style><!--[ifIE]><styletype="text/css">i{display:inline-block;height:100%;vertical-align:middle}img{vertical-align:middle}</style><![endif]--><div><i></i><imgsrc="/uploadfile/200806/17/46192446231.gif"alt=""/></div>
尺度之路www.ckuyun.com提醒:能够先修正部分代码后再运转
最复杂固然是背景图片的办法拉。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><styletype="text/css">*{margin:0;padding:0;}div{width:500px;border:1pxsolid#f00;height:500px;background:url("/uploadfile/200806/17/8C192442407.gif")centerno-repeat}</style><div></div>
尺度之路www.ckuyun.com提醒:能够先修正部分代码后再运转
快捷性:Div+css构架的页面,虽然在客户端看来下载一个复杂的css也要占用差不多的带宽,然而搜索引擎可以很方便的绕过这个css,而直接抓去Div中的内容。 |
|