Tip: you can modify some code before running
<!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>Css + div paging code</title></head><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"><head><title>CSS webpage layout example: hover to enlarge the page flip effect-www.52CSS.com</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css">* {Margin: 0px; padding: 0px;} body, td, th {font-size: 12px; font-family: ""}. c {height: 1% ;}. c: after {content :". "; display: block; visibility: hidden; clear: both; height: 0;} ul, li {margin: 0px; padding: 0px; list-style: none ;} # nav {list-style: none; display: inline;/* shows inline elements .. don't let it fill the whole page */} # nav li {float: left; margin: 0 5px; width: 20px; height: 20px; display: inline ;} /* here, the li width is the same as that of a display .. write here, mainly to prevent the original container space from being removed from the document after a absolute, so define * // * li as a block-level element and display: inline; ie6 bug fixed */# nav li a {display: block; border: #999 1px solid; text-align: center; text-decoration: none; line-height: 20px; width: 20px; height: 20px;}/* a is block after display .. write width and height. fixed an abnormal bug in ie6 */# nav li a: hover {position: relative; width: 30px; height: 30px; position: absolute; margin: -5px 0 0-5px; line-height: 30px; font-weight: bold; border: 1px dotted #666666; background-color: # eee; color: # c00; z-index: 10; cursor: hand; font-size: 24px;}/* use the negative number of margin here. do not use top:-5px; left:-5px; or relative; because the occupied space does not disappear. You can test that * // * margin is a negative number. relative to your original location .. instead of the parent container .. left, bottom locates relative to the parent container */</style></head><body><div ><ul id="nav" class="c"> <li><</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>></li></ul></div></body></html><body></body></html>
Tip: you can modify some code before running
