第二次作业

最新推荐文章于 2024-10-17 20:27:26 发布

ocean'

最新推荐文章于 2024-10-17 20:27:26 发布

阅读量547

点赞数 11

CC 4.0 BY-SA版权

文章标签： css css3 javascript

本文链接：https://blog.csdn.net/2302_81663869/article/details/140628379

导航栏

<!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;
        }
        .big{
            width: 1000px;
            height: 38px;
            background-color: rgb(31, 41, 58);
            text-align: center;
            border-radius: 10px;
            box-shadow: 2px 5px 1px grey;
            margin:auto;
            
        }
 
        .box{
            display: inline-block;
            width: 60px;
            height: 30px;
            color: rgb(253, 253, 253);
            font-family: "黑体";
            font-weight: 600;
            margin: px;
            padding: 4px;
            text-shadow: 10px 10px 10px gray;
            line-height:30px;
        }
        .box:hover{
            background-color: rgb(125, 6, 6);
        }
    </style>
</head>
<body>
    <div class="big">
    <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>

结果

盒子模型

盒子模型是一个用于描述HTML和CSS中元素布局的概念。在Web开发中，每个HTML元素都可以看作是一个矩形的盒子，这个盒子由内容区域、内边距、边框和外边距组成。

基本模型

1.宽高
每个盒子都需要一个宽高数值，如果不给的话你会发现这个盒子并不会显示出来。添加宽高的属性名称是width height。宽高值的单位的话这里只介绍几种初学者常用的。

像素（px）：像素是最常用的单位，表示屏幕上的一个像素点。它是固定的，具有确定的大小。例如，width: 200px;将元素的宽度设置为200个像素。

百分比（%）：百分比单位相对于父元素的尺寸进行计算。例如，width: 50%;将元素的宽度设置为父元素宽度的50%。

视窗宽度单位（vw）：视窗宽度单位表示相对于视口（浏览器窗口）宽度的比例。例如，width: 50vw;将元素的宽度设置为视口宽度的50%。

视窗高度单位（vh）：视窗高度单位表示相对于视口高度的比例。例如，height: 75vh;将元素的高度设置为视口高度的75%。

2.背景颜色

颜色名称：可以使用预定义的颜色名称来表示颜色

RGB表示法：RGB表示红、绿、蓝三种颜色的组合值。可以使用十进制或十六进制表示。
RGBA表示法：RGBA在RGB的基础上增加了第四个参数，即alpha通道，用于控制颜色的透明度。取值范围是0到1，其中0表示完全透明，1表示完全不透明。

background-size是CSS背景属性中的一项，用于设置背景图像的大小。它可以接受多个不同的值，来决定如何调整背景图像的尺寸，以适应元素的大小和形状。

常见的background-size取值包括：

auto：保持背景图像的原始尺寸。
cover：缩放背景图像以完全覆盖容器，可能会被裁剪。
contain：缩放背景图像以适应容器，完整显示图像，可能会有空白部分。
length：指定背景图像的尺寸为一个固定的长度值，可以使用像素、英寸或厘米等单位。
percentage：指定背景图像的尺寸为一个百分比值，相对于背景容器的大小。
background-repeat是CSS背景属性中的一项，用于定义背景图像被如何重复或平铺。

repeat：默认属性值，背景图像会在水平和垂直方向上重复平铺，直到填满整个背景区域。
repeat-x：只在水平方向上重复平铺背景图像。
repeat-y：只在垂直方向上重复平铺背景图像。
no-repeat：只在水平和垂直方向上显示一次背景图像。
space：在水平和垂直方向上重复平铺背景图像，但是最后一行和列不进行重复，在最边缘留出空白。
背景图片一般搭配我标记的两种颜色的属性使用。覆盖和取消平铺。

3.边框

none: 无边框样式，不显示边框。

solid: 实线边框样式，使用实线绘制边框。

dashed: 虚线边框样式，使用间隔的短横线绘制边框。

dotted: 点线边框样式，使用小圆点绘制边框。

double: 双线边框样式，使用两条实线绘制边框。

4.盒子模型布局应用

盒子模型在网页布局中具有广泛的应用。通过灵活运用盒子模型的属性，我们可以实现各种复杂的布局效果。

1. 常见的布局方式有：浮动布局、定位布局、Flex布局等。

2. 在响应式设计中，盒子模型的应用尤为重要。通过调整盒子模型的属性，我们可以使页面在不同设备上具有良好的兼容性和展示效果。

3. CSS预处理器（如Sass、Less等）可以帮助我们更高效地编写CSS代码，尤其是在处理复杂盒子模型布局时。

总之，CSS盒子模型是网页设计中不可或缺的一部分。掌握盒子模型的原理和应用，将有助于我们更好地理解和运用CSS，从而实现各种精美的网页效果。