Day02 尝试写出如下页面(移动变红色)

最新推荐文章于 2024-10-09 20:10:15 发布

李柯柯柯南

最新推荐文章于 2024-10-09 20:10:15 发布

阅读量158

点赞数

分类专栏： web作业题文章标签： css html

本文链接：https://blog.csdn.net/m0_48277818/article/details/107363787

版权

web作业题专栏收录该内容

6 篇文章 0 订阅

订阅专栏

实现页面如图所示

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hover</title>
    <style>
        .xxx{
            width: 700px;
            margin:0 auto;
        }
        .aaa{
            width: 100px;
            float: left;
            background: black;
            text-align: center;
            color: white;
            border-bottom:2px solid yellow;
            border-top: 2px solid white;
        }
        .bbb{
            width: 700px;
            background: yellow;
            height: 50px;
            margin:0 auto;
        }
        .aaa:hover{
            background-color: red;
            /*transform: scale(1.2);*/
            border-bottom: 2px solid red;
            border-top: 2px solid red;
        }
    </style>
</head>
<body>
<div class="xxx">
    <div class="aaa">国内新闻</div>
    <div class="aaa">国内新闻</div>
    <div class="aaa">国内新闻</div>
    <div class="aaa">国内新闻</div>
    <div class="aaa">国内新闻</div>
    <div class="aaa">国内新闻</div>
    <div class="aaa">国内新闻</div>
</div>

<div class="bbb"></div>

</body>
</html>

思路:
观察图片可知:可以利用float实现图片的对齐由于float没有center属性,因此可以将各个div小块嵌入到一个大的div中,由外部的div实现居中对齐即(margin:0 auto)
利用hover可以实现鼠标移动上去变红色,其中周边区域变大了故
a.利用padding等属性拓宽小块的div,这样操作后页面会产生抖动,因此不能实现
b.可以利用一个特殊属性transform:scale()进行放大(不推荐)
c.将边框变厚且与周围颜色相同,然后利用hover实现该功能.