CSS3实现淘宝留白的方法

  发布时间:2020-06-05 16:14:07   作者:H_Cisco   我要评论
这篇文章主要介绍了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实现响应式手风琴效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学
    2020-06-10
  • CSS3实现淘宝留白的方法

    这篇文章主要介绍了CSS3实现淘宝留白的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-05
  • CSS3实现歌词进度文字颜色填充变化动态效果的思路详解

    这篇文章主要介绍了CSS3实现歌词进度文字颜色填充变化动态效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-02
  • CSS 3.0 结合video视频实现的创意开幕效果

    这篇文章主要介绍了CSS 3.0 结合video视频实现的创意开幕效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-01
  • CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解

    这篇文章主要介绍了CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可
    2020-06-01
  • css3实现背景模糊的三种方式(小结)

    这篇文章主要介绍了css3实现背景模糊的三种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习
    2020-05-15
  • css3遮罩层镂空效果的多种实现方法

    这篇文章主要介绍了css3遮罩层镂空效果的多种实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学
    2020-05-11
  • css3的focus-within选择器的使用

    这篇文章主要介绍了css3的focus-within选择器的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习
    2020-05-11
  • CSS3实现渐变背景兼容问题

    本文通过实例代码给大家介绍了CSS3实现渐变背景兼容问题,代码简单易懂,非常不错,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-05-06
  • 通过css3的filter滤镜改变png图片的颜色的示例代码

    本方法是通过CSS3滤镜 filter 中的 drop-shadow 将png图片的非透明部分生成任意颜色的投影,然后将原始图片隐藏起来,从而达到改变图片颜色的目的,代码简单易懂,对CSS改
    2020-05-06

最新评论