CSS页面留白缩小，其他内容区域不变的效果怎样做

lewis 1年前 (2024-03-20) 阅读数 4 #技术

这篇文章主要介绍了“CSS页面留白缩小，其他内容区域不变的效果怎样做”相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS页面留白缩小，其他内容区域不变的效果怎样做文章都会有所收获，下面我们一起来看看吧。

做一个淘宝的留白：

当你在缩小浏览器页面的时候他的内容区并没有缩小，是留白的变小。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.wrapper{
				height: 30px;
				background-color: gray;
			}
			.content{
				width: 1200px;
				height: 30px;
				background-color: #0f0;
				margin: 0 auto;/* 上下0,左右自适应 */
			}
		</style>
	</head>
	<body>
		<div class="wrapper"><!-- 背景区 -->
			<div class="content"></div><!-- 内容区 -->
		</div>
	</body>
</html>

这样当你在缩放的时候，缩放的是外面灰色的部分，绿色的部分始终居中。

里面的文字就是这样来写了

<div>
<ul style="float: left;"></ul>
<ul style="float: right;"></ul>
</div>

感谢各位的阅读，以上就是“CSS页面留白缩小，其他内容区域不变的效果怎样做”的内容了，经过本文的学习后，相信大家对CSS页面留白缩小，其他内容区域不变的效果怎样做都有更深刻的体会了吧。这里是博信，小编将为大家推送更多相关知识点的文章，欢迎关注！

版权声明

本文仅代表作者观点，不代表博信信息网立场。

上一篇：PHP实现单例模式的要点是什么，单例模式有什么优势下一篇：在C#中使用Invoke方法可以在不同线程之间进行通信，通常用于在UI线程中更新UI控件

CSS页面留白缩小，其他内容区域不变的效果怎样做

版权声明

作者文章