html使用max-width

78次阅读
没有评论

在 HTML 中,可以使用 max-width 属性来设置元素的最大宽度,这样元素的宽度就不会超过该值。下面是一个简单的例子,展示如何使用 max-width 属性:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Max-Width Example</title>
    <style>
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: lightblue;
            padding: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>Max-Width Example</h1>
    <p>This is an example of using the max-width property in HTML.</p>
    <img src="https://picsum.photos/800" alt="Example Image">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget dui pretium, elementum enim eu, sodales nibh. In hac habitasse platea dictumst. Suspendisse vulputate, nisl a dignissim auctor, tortor mauris malesuada sapien, ac malesuada mi nisl non eros. Etiam lacinia lectus euismod semper scelerisque. Nunc bibendum orci id odio commodo, non tincidunt massa rutrum. Duis luctus mi nec tincidunt elementum. Praesent vestibulum suscipit est ac sagittis. Maecenas ullamcorper nisi vel aliquet pharetra.</p>
    <p>Nulla bibendum felis vel arcu volutpat commodo. Nulla facilisi. Vestibulum aliquam faucibus magna, vel commodo risus porttitor eu. Nulla facilisi. Aliquam quis urna ut lectus bibendum vestibulum. Donec molestie malesuada urna ac rhoncus. Sed nec sapien vel eros placerat consequat.</p>
</div>
</body>
</html>

在上面的例子中,我们创建了一个类名为 .container 的元素,并设置了 max-width: 800px; 来限制该元素的最大宽度为 800 像素。同时,我们还使用了 margin: 0 auto; 来让元素水平居中,background-color: lightblue; 和 padding: 20px; 来设置元素的背景颜色和内边距。

在 .container 元素中,我们还添加了一张图片和一些文本,以展示 max-width 属性的效果。当浏览器的窗口大小小于 800 像素时,.container 元素的宽度会根据浏览器窗口大小自适应,但不会超过 800 像素。

正文完
 
评论(没有评论)