Web第二次作业

最新推荐文章于 2024-09-16 23:33:40 发布

限量版的猪

最新推荐文章于 2024-09-16 23:33:40 发布

阅读量118

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/2301_81783215/article/details/140313623

版权

作业1：

css盒子模型

作用：它描述了如何将HTML元素呈现为矩形盒子，以及如何定位和布局这些盒子。

在一个盒模型中，包含以下几个部分：

1.内容（content）：内容是指盒子中显示的文本或者其他元素。

2.内边距（padding）：内边距位于内容周围，是指在内容区域和边框之间的一些空白区域。

3.边框（border）：边框是围绕盒子的线，可以设置颜色、宽度和样式（如实线、虚线等）。

4.外边距（margin）：外边距位于边框的外部，是指盒子边缘到其他元素边缘之间的空白区域。

以及两个重要属性：

1.宽度（width）：指的是盒子内容的宽度加上左右内边距和边框的总和。

2.高度（height）：指的是盒子内容的高度加上上下内边距和边框的总和。

例子：

<!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>
        .box {
  margin: 10px; /* 外边距 */
  padding: 20px; /* 内边距 */
  border: 1px solid red; /* 边框，1px宽的实线，颜色为黑色 */
  width: 300px; /* 宽度 */
  height: 200px; /* 高度 */
  background-color: aqua; /* 内容区域的背景颜色 */
}

    </style>
</head>
<body>
    <div class="box"></div>
    
    
</body>
</html>

运行结果：

作业2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二次作业</title>
    <style>

        li{
            display: inline-block;
            margin-top: 10px;
            list-style: none;
            margin-left: 20px;
            
        }
        [class=game2]{
            background-color: rgb(113, 30, 30);
            height: 40px;
             
            
            
            

        }

        body>*{
            color: aliceblue;
            font-size: 15px;
            font-family: 行楷;
            font-weight: bolder;
            text-align: center;
            text-shadow: 10px 10px 10px gray;
            
           
            
        }

        .box{
            width: 800px;
            height: 40px;
            background-color: rgb(36, 36, 62);
            border-radius: 15%;
            box-shadow:10px 10px 10px gray;
            margin: auto;
            
        }

        div{
            display: inline-block;
        }
    </style>
</head>
<body>
    <form class="box">
 
    <li>游戏1</li>
    <div class="game2">
        <li>游戏2</li>
    </div>
    <li>游戏3</li>
    <li>游戏4</li>
    <li>游戏5</li>
    <li>游戏6</li>
    <li>游戏7</li>
    <li>游戏8</li>
    <li>游戏9</li>

    </form>
    
</body>
</html>

运行结果：