你的位置:首页 > 软件开发 > 网页设计 > css实现九宫格

css实现九宫格

发布时间:2017-12-04 00:00:03
原理:浮动+margin负边距示例代码:<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title& ...

原理:浮动+margin负边距

示例代码:

<!DOCTYPE html><html lang="zh"> <head>  <meta charset="UTF-8" />  <title>css实现九宫格</title>  <style type="text/css">   * {    margin: 0;    padding: 0;   }      ul.box {    list-style: none;    width: 165px;    height: 165px;    padding: 30px;   }      .box li {    /*关键--浮动*/    float: left;   }      .box a {    display: block;    width: 50px;    height: 50px;    border: 5px solid blue;    /*关键--margin负值*/    margin-left: -5px;    /*关键--margin负值*/    margin-top: -5px;   }      .box a:hover {    /*关键--相对定位*/    position: relative;    border-color: red;    /*关键-- z-index*/    z-index: 100;   }      .box:after {    content: "";    height: 0;    visibility: hidden;    clear: both;    display: block;   }  </style> </head> <body>  <div id="wrap">   <ul class="box">    <li>     <a href=""></a>    </li>    <li>     <a href=""></a>    </li>    <li>     <a href=""></a>    </li>    <li>     <a href=""></a>    </li>    <li>     <a href=""></a>    </li>    <li>     <a href=""></a>    </li>    <li>     <a href=""></a>    </li>    <li>     <a href=""></a>    </li>    <li>     <a href=""></a>    </li>   </ul>  </div> </body></html>

效果:

css实现九宫格

鼠标悬浮效果:

css实现九宫格

 

原标题:css实现九宫格

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。