标签搜索

目 录CONTENT

文章目录

CSS3实现淘宝留白的方法

沙漠渔溏 / 2024-02-22 23:57:57 / 共计1,468 字
温馨提示:
本文最后更新于 2024-02-22,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

做一个淘宝的留白:

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

<!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>

到此这篇关于CSS3实现淘宝留白的方法的文章就介绍到这了,更多相关CSS3淘宝留白内容请搜索 『沙漠渔溏』 以前的文章或继续浏览下面的相关文章,希望大家以后多多支持 『沙漠渔溏』 !