|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
网页制造poluoluo文章简介:在利用css创立相似title属性提醒框,罕见的办法是利用相对定位,用负值使其偏移于屏幕以外,在鼠标经由时界说一个符合的正值使其显现到我们所必要的地位。可是,有一个我们不经常使用的属性我们经常将其弃捐一旁而未加使用--auto.
在利用css创立相似title属性提醒框,罕见的办法是利用相对定位,用负值使其偏移于屏幕以外,在鼠标经由时界说一个符合的正值使其显现到我们所必要的地位。可是,有一个我们不经常使用的属性我们经常将其弃捐一旁而未加使用--”auto”。《AutoPositioningforAbsoluteElements》这篇文章具体先容了该属性的利用办法,自己曾翻译了此文--《相对定位元素的主动定位》,但文章太长,不甚直不雅,本文经由过程对照两种创立提醒框的办法来先容该属性的利用办法。
1、惯例办法
看上面的html了局,我们让.test绝对定位,断定其外部span标签的定为基点,在鼠标经由时,界说span标签的left为0。
1.<divclass="box">罕见的完成动静提醒框的办法,是让父元素绝对定位,动静内容相对定位。默许形态让其埋没于屏幕以外,鼠标经由时界说一个正值使其显现在我们必要的地位。看看这个<aclass="test"href="#">动静提醒框<span>鼠标经由时我会呈现</span></a>。你能够看到,鼠标经由时,动静框会呈现在鼠标的地位。</div>01..test{02. position:relative;03. display:inline-block;//使其在IE8中一般显现;color:#fff;04.}05..testspan{06. position:absolute;07. top:15px;08. left:-999em;09. border:1pxsoid#6c3;10. background-color:#F60;11.}12..test:hover{13. background:#fff;/修复IE中的bug,这里是为了测试,假如不必要色彩,可使用一张1 |
|