CSS3实现淘宝留白的方法_CSS

上一篇: 详解CSS3实现响应式手风琴效果下一篇:CSS 实现各种 Loading 效果附带解...

CSS3实现淘宝留白的方法

发布时间：2022-04-13 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了CSS3实现淘宝留白的方法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

做一个淘宝的留白：

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

<!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淘宝留白内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本宝典！

脚本宝典总结

以上是脚本宝典为你收集整理的CSS3实现淘宝留白的方法全部内容，希望文章能够帮你解决CSS3实现淘宝留白的方法所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：CSS3

上一篇: 详解CSS3实现响应式手风琴效果下一篇:CSS 实现各种 Loading 效果附带解...

猜你在找的CSS相关文章