html 9宮格
阿新 • • 發佈:2018-10-31
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML九宮格佈局</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> </head> <body> <html> <head> <style type="text/css"> /** 重置瀏覽器預設標籤樣式 */ body, ul, li { margin: 0; padding: 0; } .xttblog { width: 930px; height: 120px; margin-top: 50px; margin-left: auto; margin-right: auto; } .box { margin-left: 5px; margin-top: 5px; list-style-type: none; } .box li { float: left; line-height: 230px; } .box li{ display: block; border: 5px solid #ccc; width: 300px; height: 250px; text-align: center; margin-left: -5px; margin-top: -5px; position: relative; z-index: 1; } .box li:hover { border-color: #f00; z-index: 2; } </style> </head> <body> <div class="xttblog"> <ul class="box"> <li> <img src="tb.jpg" /> </li> <li> <img src="tb.jpg" /> </li> <li> <img src="tb.jpg" /> </li> <li> <img src="tb.jpg" /> </li> <li> <img src="tb.jpg" /> </li> <li> <img src="tb.jpg" /> </li> <li> <img src="tb.jpg" /> </li> <li> <img src="tb.jpg" /> </li> <li> <img src="tb.jpg" /> </li> </ul> </div> </body> </html>