There are many examples of html+css, the following list of commonly used columns, for beginners to learn the reference.
Html+css instance effect (1): Mouse over change text
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> mouse over transformed text </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>
<body>
<ul id= "Menu" >
<li><a href= "#" ><span>HOME</span> home </a></li>
<li><a href= "#" ><span>NEWS</span> News </a></li>
<li><a href= "#" ><span>ABOUT</span> about </a></li>
<li><a href= "#" ><span>CONTACT</span> Contact </a></li>
<li><a href= "#" ><span> photos </span>PHOTO</a></li>
</ul>
</body>
The above is the HTML and CSS to do the page instance tutorial: Mouse over the text changes the content, more related articles please pay attention to topic.alibabacloud.com (www.php.cn)!
