^{<noscript id="f04r4"></noscript>}

純css實(shí)現(xiàn)鼠標(biāo)滑過彈出層效果

2024-07-11 08:37:10

字體：大中小

供稿：網(wǎng)友

<!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>無標(biāo)題文檔</title>
<style type=”text/css” >
*{margin:0; padding:0;} /* 所有元素外邊距為0 內(nèi)邊距為0 */
/* body中元素字體大小為12px,字體樣式為:”Times New Roman”, Times, serif,背景色:#333 */
body{font-size:12px; font-family:”Times New Roman”, Times, serif; background-color:#333;}
/* id為main的元素上下外邊距為100px,左右外邊距為自動(dòng);寬度為300px */
#main{margin:100px auto; width:300px;}
/* id為main的元素中無序列表列表樣式為隱藏 */
#main ul{list-style:none;}
/* id為main的元素中的無序列表下的li塊行高為20px, 下邊框的樣式為1px dashed #FC0 */
#main ul li{line-height:20px; border-bottom:1px dashed #FC0;}
/* id為main的元素中的無序列表下的li塊中的a標(biāo)簽顏色為#E7E7E7;關(guān)閉文本修飾;相對(duì)定位;元素當(dāng)做塊元素顯示,前后會(huì)有換行符*/
#main ul li a{color:#E7E7E7; text-decoration:none; position:relative; display:block;}
/* id為main的元素中的無序列表下的li塊中的a標(biāo)簽下的div元素隱藏 */
<span style=”color:#FF0000″> #main ul li a div{display:none;}
#main ul li a:hover{color:#FFF;}
#main ul li a:hover div{position:absolute; left:280px; top:-40px; background-color:#FFF; display:block; width:300px; height:100px; color:#000; overflow:hidden;}
#main ul li a:hover div dt{float:left; width:8px; background:url(234.gif) center no-repeat;height:100px; display:block; background-color:#333;}
#main ul li a:hover div dd{float:right ; width:270px; height:auto; line-height:18px; padding:6px 10px;}</span>
</style>
</head>
<body>
<p>
</p>
<p>
</p>
<div id=”main”>
<ul>
<li><a href=”javascript:void(0);”>Customizing Form Objects and Validating Forms
<div><dt></dt>
<dd>Rollovers are very easy using Dreamweaver. All you need to do is export two images from Fireworks (the image itself and the rollover image). Next, in Dreamweaver, click on Insert>Rollover Image. Give a name to the image, choose the images from the folder icon and finally give the link to the image. That’s it! You’ve now got a great looking effect for your site.
</dd>
</div>
</a>
</li>
<li>
<a href=”javascript:void(0);”>Best Time Saving Tips in Dreamweaver
<div><dt></dt>
<dd>Before uploading your site you need to make sure that there are no dead links in the site. You can do this by going to your site map, right clicking on any of the files and then clicking on ‘check links’. Now you can choose to either check links in the entire site or within the selected file or folder. If there are any dead links you can fix them by using the folder icon to select the right files.