使用HTML+CSS实现如图布局，border-width:5px，格子大小是50px*50px，hover时边框变成红色，需要考虑语义化。

liuliuliu_666

于 2017-08-06 16:53:55 发布

阅读量1.5k

点赞数

分类专栏：前端，css 笔试题文章标签： html css 笔试题布局

本文链接：https://blog.csdn.net/liuliuliu_666/article/details/76780285

版权

前端，css 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

笔试题

1 篇文章 0 订阅

订阅专栏

题目描述：

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

边框变成红色，需要考虑语义化。
要实现的布局图片

方法一：利用box-shadow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;padding: 0;
        }
        .container {
            list-style: none;
            width: 170px;height: 170px;
            padding-top: 5px;padding-right: 5px;
            background: blue;
            /*
                把padding-top和padding-right也计算在width和height中
            */
            box-sizing: border-box;
        }
        .box {
            float: left;
            width: 50px;height: 50px;/* border: 5px solid blue; */text-align: center;line-height: 50px;cursor: pointer;
            background-color: white;
            margin-left: 5px;margin-bottom: 5px;

        }
        li.box:hover {
            box-shadow: 0 0 0 5px red;
        }
    </style>
</head>
<body>
    <ul class="container">
        <li class="box">1</li>
        <li class="box">2</li>
        <li class="box">3</li>
        <li class="box">4</li>
        <li class="box">5</li>
        <li class="box">6</li>
        <li class="box">7</li>
        <li class="box">8</li>
        <li class="box">9</li>
    </ul>
</body>
</html>

方法二：利用outline

    /*把方法一中的hover改成下面这个就可以了*/
    li.box:hover {
        outline: 5px solid red;
    }

liuliuliu_666

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用HTML+CSS实现如图布局，border-width:5px，格子大小是50px*50px，hover时边框变成红色，需要考虑语义化。

题目描述：使用HTML+CSS实现如图布局，border-width:5px，格子大小是50px*50px，hover时边框变成红色，需要考虑语义化。方法一：利用box-shadow<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style
复制链接

扫一扫