CSS3完成淘宝留白的方式

日期:2021-02-27 类型:科技新闻 

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5

做1个淘宝的留白:

当你在变小访问器网页页面的情况下他的內容区并沒有变小,是留白的缩小。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf⑻" />
		<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淘宝留白內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!

上一篇:详解HTML5表单新增特性 返回下一篇:没有了