web第二次作业

最新推荐文章于 2024-11-04 17:05:06 发布

吗喽154345188

最新推荐文章于 2024-11-04 17:05:06 发布

阅读量362

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/2301_81601351/article/details/140587762

版权

CSS盒子模型

CSS盒子模型由以下四个部分组成：

内容（Content）：这是盒子模型的主要信息区域，包括文本、图片、音频等多种内容。内容的大小可以通过width和height属性来设置。12
内边距（Padding）：内边距是内容区域与边框之间的空间。它用于控制内容与其边界之间的距离。内边距有五个属性（上、下、左、右和简写属性padding）可以分别设置。
边框（Border）：边框是内边距和外边距之间的区域，用于定义盒子的边界。边框的属性包括border-style（样式）、border-width（宽度）和border-color（颜色），以及一个简写属性border。
外边距（Margin）：外边距是盒子模型最外层的空间，用于控制盒子与其他盒子之间的距离。外边距也有五个属性（上、下、左、右和简写属性margin）可以分别设置。

CSS盒子模型属性

CSS为盒子模型的每个部分定义了一系列的相关属性，这些属性用于控制盒子的外观和布局。主要的属性包括：

内容（Content）：width、height、overflow等。2
内边距（Padding）：padding-top、padding-right、padding-bottom、padding-left和简写属性padding。
边框（Border）：border-style、border-width、border-color和简写属性border。
外边距（Margin）：margin-top、margin-right、margin-bottom、margin-left和简写属性margin。

此外，还有一个重要的属性box-sizing，它用于设置width和height属性所包括的范围，可以是content-box（默认值，只包括内容）或border-box（包括内容、内边距和边框）。34

通过合理地设置这些属性，可以精确地控制网页中元素的布局和外观。

导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
</head>
<style>
    *{
        margin: 0;
    }
    .box{
        height: 45px;
        width: 1300px;
        background-color: rgb(30, 2, 69);
       text-align: center;
       border-radius: 10px;
       box-shadow: 10px 10px 10px grey;
       margin: auto;
    }
    .game{
      display: inline-block;
      height:25px ;
      width: 60px;
      color: white;
        font-family: "黑体";
      font-weight: 700;
      padding: 10px;
      text-shadow: 10px 10px 10px grey;
    }

    .game:hover{
        background-color: brown;
    }
</style>
<body>
    <div class="box">
        
        <div class="game">游戏1</div>
        <div class="game">游戏2</div>
        <div class="game">游戏3</div>
        <div class="game">游戏4</div>
        <div class="game">游戏5</div>
        <div class="game">游戏6</div>
        <div class="game">游戏7</div>
        <div class="game">游戏8</div>
        <div class="game">游戏9</div>
       
    </div>
</body>
</html>

结果