Web前端7.23作业-导航栏+CSS盒子

最新推荐文章于 2024-09-14 22:18:26 发布

Deng_jinyu

最新推荐文章于 2024-09-14 22:18:26 发布

阅读量362

点赞数 5

文章标签：前端

本文链接：https://blog.csdn.net/Deng_jinyu/article/details/140607734

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
</head>
</head>
<body>
    <nav class="navbar">
        <div class="navbar-container">
            <a href="#" class="logo">Logo</a>
            <ul class="nav-links">
                <li><a href="#">首页</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系方式</a></li>
            </ul>
            <button class="hamburger" id="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </nav>
    <main>
        <h1>欢迎来到我们的网站</h1>
        <p>这里是一些介绍内容...</p>
    </main>

    <script src="script.js"></script>
    <style>
            * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body, html {
        font-family: Arial, sans-serif;
    }
    
    .navbar {
        background-color: #333;
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
    }
    
    .navbar-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .logo {
        color: #fff;
        text-decoration: none;
        font-size: 24px;
        font-weight: bold;
    }
    
    .nav-links {
        list-style: none;
    }
    
    .nav-links li {
        display: inline-block;
        margin-left: 20px;
    }
    
    .nav-links a {
        color: #fff;
        text-decoration: none;
        font-size: 18px;
    }
    
    .nav-links a:hover {
        color: #ddd;
    }
    
    .hamburger {
        display: none;
        flex-direction: column;
        cursor: pointer;
    }
    
    .hamburger span {
        background-color: #fff;
        height: 3px;
        margin: 3px 0;
        transition: all 0.3s ease;
    }
    
    @media (max-width: 768px) {
        .nav-links {
            display: none;
            width: 100%;
            flex-direction: column;
            align-items: center;
        }
    
        .nav-links li {
            margin: 10px 0;
        }
    
        .hamburger {
            display: flex;
        }
    
        .active .nav-links {
            display: flex;
        }
    }
    </style>
</body>
</html>

CSS盒子模型简介

CSS盒子模型是网页布局的基础，所有HTML元素都可以看作是一个矩形盒子。这个模型包括四部分：内容（Content）、内边距（Padding）、边框（Border）和外边距（Margin）。

内容（Content）：盒子的内容区域，包括文本、图片等。
内边距（Padding）：内容周围的空白区域，用padding属性设置。
边框（Border）：围绕内容和内边距的线条，用border属性设置。
外边距（Margin）：边框外的空白区域，用margin属性设置。

元素的宽度和高度

在CSS中，当你设置一个元素的宽度和高度时，实际上只是设置了内容区域的宽度和高度。整个元素的实际大小还需要加上内边距、边框和外边距。

例如，一个元素的总宽度计算公式为：

总宽度=width+左填充+右填充+左边框+右边框+左边距+右边距总宽度=width+左填充+右填充+左边框+右边框+左边距+右边距

浏览器的兼容性问题

不同浏览器对盒子模型的支持可能有所不同。例如，IE 5 和 6 在怪异模式中使用自己的非标准模型，其中元素的width属性包括了内容、内边距和边框的宽度总和，而不是仅仅是内容的宽度。为了解决这个问题，可以在HTML页面声明中使用<!DOCTYPE html>。

盒模型的类型

CSS中有两种主要的盒子类型：区块盒子（block boxes）和行内盒子（inline boxes）。

区块盒子：默认情况下，像<h1>、<p>这样的元素使用block作为外部显示类型。区块盒子会占据全部可用宽度，并且会产生换行。
行内盒子：像<a>、<span>这样的元素默认使用inline作为外部显示类型。行内盒子不会产生换行，且width和height属性通常不起作用。