第二次作业

最新推荐文章于 2024-10-16 17:24:41 发布

2301_81730176

最新推荐文章于 2024-10-16 17:24:41 发布

阅读量792

点赞数 21

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/2301_81730176/article/details/140328833

版权

导航栏

代码

<!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>
        .d1{
            width:800px;
            height: 40px;
            background-color: grey;
            border-radius: 8%;
            box-shadow: 10px 10px 10px gray;
        }
        div{
            display: inline-block;
            color: white;
            text-align: center;
            font-size: 25px;
        }
        .d2{
            background-color:brown;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div>电影1</div>
        <div class="d2">电影2</div>
        <div>电影3</div>
        <div>电影4</div>
        <div>电影5</div>
        <div>电影6</div>
        <div>电影7</div>
        <div>电影8</div>
        <div>电影9</div>
    </div>
</body>
</html>

运行截图

CSS盒子模型

一.概述：

CSS 盒子模型是网页设计中一个非常重要的概念，它描述了如何计算一个元素的总宽度和高度。在CSS中，每个元素都被看作是一个矩形盒子，这个盒子包括元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）。

以下是CSS盒子模型的组成部分：

内容（Content）：
- 内容区域是盒子模型中最内部的部分，它包含元素的实际内容，如文本、图片等。
- 内容的宽度和高度可以通过 width 和 height 属性来设置。
内边距（Padding）：
- 内边距位于内容区域和边框之间，它可以是透明的，也可以有背景颜色。
- 内边距的大小可以通过 padding 属性来设置，该属性可以接受1到4个值，分别代表上、右、下、左内边距。
边框（Border）：
- 边框位于内边距和外边距之间，它围绕在内容和内边距的外侧。
- 边框的样式、宽度和颜色可以通过 border 相关属性来设置，如 border-width、border-style 和 border-color。
外边距（Margin）：
- 外边距是盒子与其他元素之间的空白区域。
- 外边距的大小可以通过 margin 属性来设置，与 padding 类似，它也可以接受1到4个值