第二次作业

2301_81582167

于 2024-07-10 22:05:03 发布

阅读量459

点赞数 9

文章标签： css html

本文链接：https://blog.csdn.net/2301_81582167/article/details/140334278

版权

作业1

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <style>
        body{
            background-color: rgb(224, 225, 237);
        }
        .box{
            width: 1000px;
            height: 50px;
            border: 1px solid rgb(73, 172, 205);
            background-color: rgb(73, 172, 205);
            margin: auto;
            margin-right: 190px;
            text-align: center;
            line-height: 2;
            border-radius: 10%;
            box-shadow: 10px 10px 10px grey;
            
        }
        li{
        list-style:none;
        display: inline-block;
        border: 1px solid black;
        background-color: rgb(73, 172, 205);
        text-align: center;
        text-shadow: 10px 10px 10px rgb(17, 6, 6);
        color: aliceblue;
        font-weight: 500px;
    }
    </style>
    
</head>
<body>
    <div class="box">
        <li>游戏1</li>
        <li>游戏2</li>
        <li>游戏3</li>
        <li>游戏4</li>
        <li>游戏5</li>
        <li>游戏6</li>
        <li>游戏7</li>
        <li>游戏8</li>
        <li>游戏9</li>
    </div>
</body>
</html>

运行结果

作业2

css盒子模型介绍，使用方式，1图

盒子模型是css技术所使用的一种思维模型。盒子模型是指将网页设计页面中的内容元素看作一个个装了东西的矩形盒子。每个矩形盒子都由内容、内边距、边框和外边距4个部分组成。除去内容部分，其余每个部分又分别包含上、下、左和右4个方向，方向既可以分别定义也可以统一定义。

如果把手机想象成HTML标记，那么手机盒子就是一个CSS盒子模型。内容就是盒子里装的手机；内边距就是怕手机损坏得填充物：边框就是盒子本身外部的壳；外边距就是多个手机盒子排放时空的缝隙。

div英文全称为division，译为中文是“分割、区域”。标记简单而言就是一个块标记，可以实现网页的规划和布局。在HTML文档中，页面会被划分为很多区域，不同区域显示不同的内容，一般都通过标记可以在div标记中设置外边距、内边距、宽和高，同时内部可以容纳段落、标题、表图像等各种网页元素，也就是说大多数HTML标记都可以嵌套在标记中，中还可以嵌套多层。标记非常强大，通过与id、class等属性结合设置CSS样式，可以替代大多数的块级文本标记。

主要由内容、内边距、边框、外边距四个部分组成。

1、内容（content）：内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。可以通过width和height属性进行设置。

 div{
            width: 300px;
            height: 300px;
            background-color: hsl(26, 50%, 75%);
        }

2、内边距（padding）:内容区域与边框之间的空间是内边距。它的大小可以通过padding属性进行设置。

.inner{
            width: 600px;
            height: 600px; 
            background-color: rgb(233, 80, 20);
            margin-right: 100px;
            margin-bottom: 100px;
        }

3、边框（border）:边框的样式、宽度和颜色可以通过border-style、border-width和border-color属性进行设置。

            border-width: 10px;
            border-color: red;
            border-style: double;
            border-radius: 20%;

5、外边距(margin):边框外部的空间是外边距。它用于分隔相邻的元素，大小可以通过margin属性进行设置。

.inner{
            width: 600px;
            height: 600px; 
            background-color: rgb(233, 80, 20);
            margin-right: 100px;
            margin-bottom: 100px;
        }

这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。