首页 > 试题广场 >

使用HTML+CSS实现如图布局，border-width:

[问答题]

使用HTML+CSS实现如图布局，border-width:5px，格子大小是50px*50px，hover时

边框变成红色，需要考虑语义化。

添加回答
for前端头像 for前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table{
/* border-collapse:separate;*/
border: none;
border-spacing: 0;
}
td{
position: relative;
width: 50px;
height: 50px;
border: 5px solid blue;
background: #fff;
color: green;
text-align: center;
line-height: 50px;
display: inline-block;
}
tr:not(:first-child) td{
margin-top: -5px;
}
tr td:not(:last-child){
margin-right: -5px;
}
td:hover{
border-color: red;
cursor: pointer;
z-index: 2;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>

z-index 仅能在定位元素上奏效（position属性值设置除默认值static以外的元素，包括relative，absolute，fixed样式）
编辑于 2017-08-01 14:23:25 回复(3)
好运快来头像 好运快来
flex布局。为了中间间距是5px，采用负边距。 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .container {
      display: flex;
      width: 180px;
      height: 180px;
      flex-wrap: wrap;
    }
    .box {
      width: 50px;
      height: 50px;
      border: 5px solid blue;
      background-color:aqua;
      text-align: center;
      line-height: 50px;
      margin-right: -5px;
    }
    .box:hover {
      border: 5px solid red;
      z-index:9999;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
  </div>
</body>
</html>
发表于 2017-08-22 17:58:50 回复(1)
Catherine001_头像 Catherine001_ 
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>nine box</title> <style type="text/css"> table{border-collapse:collapse; margin:50px;text-align:center; }  table tr {border:none;} table.tb2 td{width:50px;height:50px;border:5px  inset blue;} table.tb2 td:hover{border:5px solid red;cursor: pointer;} </style> </head> <body> <table class="tb2"> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td></tr> </table> </body> </html>
编辑于 2017-07-30 10:32:29 回复(1)
不愿停头像 不愿停
使用relative方法覆盖表格的边框，同时必须要设置td的display属性为inline-block，原display为table-item，会影响到relation属性。
发表于 2018-08-24 21:01:05 回复(0)
要小心Nijat哦头像 要小心Nijat哦
恕我直言，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 40px;
padding: 0px;
}
#container{
width:170px;

}
.btn{
position: relative;
width: 50px;
height: 50px;
border:5px solid blue;
transition: all 0.7s;
margin:-2.5px -5px;
}

.btn:hover{
border-color:chocolate;
z-index:10;
}




</style>
</head>
<body>
<div id='container'>
<button class='btn'>1</button>
<button class='btn'>2</button>
<button class='btn'>3</button>
<button class='btn'>4</button>
<button class='btn'>5</button>
<button class='btn'>6</button>
<button class='btn'>7</button>
<button class='btn'>8</button>
<button class='btn'>9</button>
</div>
</script>
</body>
</html>
发表于 2017-07-31 12:42:08 回复(5)
zm0422头像 zm0422
<style>
    .hang{
      display:flex;
    }
    .hang button{
      display: inline-block;
      width:50px;
      height:50px;
      border-width:5px;
      margin:-5px 0 0 -5px;
      border-color: blue;
      vertical-align: center;
      align-items: center;
    }
    .hang button:hover{
      border-color:red;
      position: relative;
    }
  </style>
</head>
<body>
<div class="hang">
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>
<div class="hang">
<button>4</button>
<button>5</button>
<button>6</button>
</div>
<div class="hang">
  <button>7</button>
  <button>8</button>
  <button>9</button>
</div>
</body>
发表于 2019-04-12 09:26:02 回复(0)
别人家的孩子的隔壁小孩头像 别人家的孩子的隔壁小孩
#box1{width:180px;height:180px;overflow: hidden;} #box1 a{display: block;float:left;z-index:1;border: 5px solid blue;margin-right: -5px; margin-bottom:-5px;width: 50px;height: 50px;line-height: 50px;text-align: center;} #box1 a:hover{border-color: red;position: relative;z-index: 2;}
发表于 2017-07-28 19:19:54 回复(0)
Orange。头像 Orange。 

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
*{
   margin: 0;
   padding: 0; 
}
.container{
    width: 180px;
    height: 180px;
    background-color: blue;
}
.box{
    width: 50px;
    height: 50px;
    background-color: white;
    opacity: 0.5;
    float: left;
    border: 5px solid blue;
    text-align: center;
    line-height: 50px;
}
.box:hover{
    border-color: red;
    cursor: pointer;
}  
</style>
</head>
<body>
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">9</div>   
    </div>
</body>
</html>

编辑于 2017-07-29 12:25:05 回复(1)
牛客415572346号头像 牛客415572346号 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <style type ="text/css">
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        #cale{
            /*position:relative;*/
            width:170px;
            height:170px;
            background:pink;
        }
        ul{
            /*position:absolute;
            margin-left:0px;*/
        }
        ul li{
            float:left;
            width:50px;
            height:50px;
            border:5px solid blue;
            margin-left:-5px;
            margin-bottom:-5px;
            text-align:center;
            line-height:50px;
            background-color:lawngreen;
        }
        .fir{
            margin-left:0px;
        }
        ul li:hover{
            position:relative;
            border-color:red;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div id="cale">
        <ul>
            <li class="fir">1</li>
            <li>2</li>
            <li>3</li>
            <li class="fir">4</li>
            <li>5</li>
            <li>6</li>
            <li class="fir">7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
   
</body>
</html>

发表于 2022-08-16 18:41:27 回复(0)
吃🍊吗头像 吃🍊吗
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #box{
                display: flex;
                flex-wrap: wrap;
                width: 180px;
                height: 180px;
            }
            #box div{
                width: 50px;
                height: 50px;
                border: 5px solid #0055ff;
                text-align: center;
                line-height: 50px;
                cursor: pointer;
            }
            #box div:hover{
                border: 5px solid #ff0000;
            }
        </style>
    </head>
    
    <body>
        <div id="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </body>

</html>
发表于 2022-07-25 18:44:52 回复(0)
jason201806132156382头像 jason201806132156382 
    <style type="text/css">
        ul, li {
            padding: 0;
            margin: 0;
        }
        .warper {
            width: 170px;
            height: 170px;
            overflow: hidden;
            background-color: blue;
        }

        .item {
            box-sizing: boder-box;
            width: 50px;
            height: 50px;
            background-color: gray;
            float: left;
            list-style: none;
            line-height: 50px;
            text-align: center;
            border: 5px solid blue;
            margin: 0 -5px -5px 0;
            cursor: pointer;
            position: relative;
        }

        li:hover {
            border-color: yellow;
            z-index: 1;
        }
    </style>
</head>
<body>
    <ul class="warper">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <Li class="item">9</li>
    </ul>
</body>

发表于 2022-05-30 11:07:40 回复(0)
考拉812头像 考拉812
<html>
 <head>
  <style>
 body {
     padding: 10px;
 }
 .board {
     background: blue;
     width: 190px;
     font-size: 0;
 }
 .g {
    width: 50px;
    height: 50px;
    display: inline-block;
    background: white;
    border: 10px solid blue;
    margin-left: -10px;
    margin-top: -10px;
 }
  .g:first-child {
      margin-left: 0px;
  }
  .g:hover {
      position: relative;
      border: 10px solid red;
      z-index: 1;
  }
</style> 
 </head>
 <body>
  <div class="board"> 
   <div class="row"> 
    <div class="g"></div> 
    <div class="g"></div> 
    <div class="g"></div> 
   </div> 
   <div class="row"> 
    <div class="g"></div> 
    <div class="g"></div> 
    <div class="g"></div> 
   </div> 
   <div class="row"> 
    <div class="g"></div> 
    <div class="g"></div> 
    <div class="g"></div> 
   </div> 
  </div>
 </body>
</html>
发表于 2021-08-17 20:39:19 回复(0)
牛客259170512号头像 牛客259170512号 
<div class="number-wrap">
    <div class="number-item">1</div>
    ...
    <div class="number-item">9</div>
</div>
.number-wrap {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 470px;
}
.number-item {
    margin-top: 5px;
    width: 150px;
    height: 150px;
}
.number-item:hover {
    border: 5px solid red;
}


发表于 2021-08-02 20:15:45 回复(0)
qipao8头像 qipao8
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>grid九宫格布局</title>
    <style>
        .container {
            display: grid;
            grid-template-rows: repeat(3, 50px);
            grid-template-columns: repeat(3, 50px);
            grid-gap: 5px;
        }
        .container div {
            text-align: center;
            width: 50px;
            height: 50px;
            line-height: 50px;
            border: 5px solid blue;
            color: green;
            background-color: #fff;
        }
        .container div:hover {
            border-color: red;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>
发表于 2021-07-19 18:24:46 回复(0)
傻子吧你头像 傻子吧你
大div contain 为底色 宽度高度都为170px的正方形
九个小div 高度宽度为50px的小正方形 每个小正方形 margin-left 5px margin-top 5px 并且设置浮动 自动形成九宫格及边框
鼠标移动到上边的时候 设置boxshadow 5px 形成边框 而且没用border
这个东西 属于小小巧思 仅供参考 主要应用的是z优先级 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九宫格</title>
    <style>
        .contain{
            width: 170px;
            height: 170px;
            background-color: blue;
        }
        .contain > div {
            width: 50px;
            height: 50px;
            background-color: white;
            float: left;
            margin-left: 5px;
            margin-top: 5px;

            /*  */
            text-align: center;
            line-height: 50px;
        }
        .contain > div:hover {
            box-shadow:0 0 0 5px yellow;
        }
    </style>
</head>
<body>
    <div class="contain">
        <div>
            1
        </div>
        <div>
            2
        </div>
        <div>
            3
        </div>
        <div>
            4
        </div>
        <div>
            5
        </div>
        <div>
            6
        </div>
        <div>
            7
        </div>
        <div>
            8
        </div>
        <div>
            9
        </div>
    </div>
</body>
</html>


发表于 2021-07-04 19:32:16 回复(1)
梦想中的程序猿头像 梦想中的程序猿 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body{
    background-color: antiquewhite;
  }
  table{
    border-color: blue;
    border-width: 5px;

      }
 table td{
   width: 50px;
   height: 50px;
   color:green;
   border-width: 5px;
   text-align: center;
 }
 table td:hover{
   border-color: red;
  cursor: pointer;
 }
</style>
<body>
  <div>
    <table border="1" cellpadding='0' cellspacing="0">
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>8</td>
          <td>9</td>
        </tr>
    </table>
  </div>
</body>
</script>
</html>


发表于 2021-06-01 10:26:27 回复(0)
行智玮头像 行智玮 
    .wrapper {
        width: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }
    .wrapper li {
        list-style: none;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border: 5px solid blue;
        margin-left: -5px;
        margin-top: -5px;
    }
    .wrapper li:hover {
        border: 5px solid red;
        z-index: 1;
    }

发表于 2021-03-26 23:53:03 回复(0)
SAP内推小助手头像 SAP内推小助手
https://codepen.io/qiweiii/pen/RwooXEO
发表于 2021-02-12 23:42:24 回复(0)
多喝开开头像 多喝开开 
使用flex布局和左margin和上margin为 -5px；并给外面的大盒子一个上padding

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            display: flex;
            padding-top: 5px;
            flex-wrap: wrap;
            width: 170px;
            height: 170px;
        }

        .box {
            width: 60px;
            height: 60px;
            border: 5px solid blue;
            background-color: aqua;
            text-align: center;
            line-height: 50px;
            margin-right: -5px;
            margin-top: -5px;
        }

        .box:hover {
            border: 5px solid red;
            z-index: 9999;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">9</div>
    </div>
</body>

</html>

发表于 2020-10-16 17:58:21 回复(0)
nothing520头像 nothing520
虽然有点麻烦但是是真的能实现

css：
html,body,div{
    margin: 0;
    padding: 0;
}

.box{
    width: 170px;
    height: 170px;
    background-color: #4af;
    position: relative;
    top: 20px;
    left: 20px;
}

.cell{
    width: 50px;
    height: 50px;
    background-color: #ccc;
    position: absolute;
}

.cell:hover{
    border: 5px solid #f44;
    margin-left: -5px;
    margin-top: -5px;
}

.cell:nth-child(1),
.cell:nth-child(4),
.cell:nth-child(7){
    left: 5px;
}

.cell:nth-child(1),
.cell:nth-child(2),
.cell:nth-child(3){
    top: 5px;
}

.cell:nth-child(2),
.cell:nth-child(5),
.cell:nth-child(8){
    left: 60px;
}

.cell:nth-child(3),
.cell:nth-child(6),
.cell:nth-child(9){
    left: 115px;
}

.cell:nth-child(4),
.cell:nth-child(5),
.cell:nth-child(6){
    top: 60px;
}

.cell:nth-child(7),
.cell:nth-child(8),
.cell:nth-child(9){
    top: 115px;
}

html：

<!-- 150+4x5 = 170 -->
<div class="box">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
</div>



发表于 2020-10-02 02:01:12 回复(0)
提交观点

问题信息

2017 前端工程师 字节跳动 HTML
来自：字节跳动2017秋招前...
上传者：牛妹
难度：
43条回答 6692浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号