HTML和CSS做網頁實例教程:鼠標滑過文字改變
來源:懂視網
責編:小采
時間:2020-11-27 18:53:42
HTML和CSS做網頁實例教程:鼠標滑過文字改變
HTML和CSS做網頁實例教程:鼠標滑過文字改變:關于HTML+CSS的實例效果很多,下面舉出常用的幾列,供新手們學習參考。html+CSS實例效果(1):鼠標滑過改變文字<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or
導讀HTML和CSS做網頁實例教程:鼠標滑過文字改變:關于HTML+CSS的實例效果很多,下面舉出常用的幾列,供新手們學習參考。html+CSS實例效果(1):鼠標滑過改變文字<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

關于HTML+CSS的實例效果很多,下面舉出常用的幾列,供新手們學習參考。
html+CSS實例效果(1):鼠標滑過改變文字
<!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=gb2312" />
<title>鼠標經過變換文字</title>
<style>
#Menu{ width:500px; margin:50px auto; border:1px solid #CCC; overflow:hidden; }
#Menu ul{ margin:0;padding:0;list-style:none;}
#Menu li{ width:100px; height:22px; line-height:22px; float:left; overflow:hidden; text-align:center; }
#Menu a{ width:100px;float:left;overflow:hidden;} #Menu span{display:block;margin-top:-22px;}
#Menu a:hover{padding-top:22px;}
</style>
</head>
<body>
<ul id="Menu">
<li><a href="#"><span>HOME</span>首頁</a></li>
<li><a href="#"><span>NEWS</span>新聞</a></li>
<li><a href="#"><span>ABOUT</span>關于</a></li>
<li><a href="#"><span>CONTACT</span>聯系</a></li>
<li><a href="#"><span>照片</span>PHOTO</a></li>
</ul>
</body>
</html>
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
HTML和CSS做網頁實例教程:鼠標滑過文字改變
HTML和CSS做網頁實例教程:鼠標滑過文字改變:關于HTML+CSS的實例效果很多,下面舉出常用的幾列,供新手們學習參考。html+CSS實例效果(1):鼠標滑過改變文字<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or