CSS3实现淘宝留白的方法


Posted in HTML / CSS onJune 05, 2020

做一个淘宝的留白:

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>

CSS3实现淘宝留白的方法

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

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

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

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

HTML / CSS 相关文章推荐
简单掌握CSS3将文字描边及填充文字颜色的方法
Mar 07 HTML / CSS
基于css3仿造window7的开始菜单
Jun 17 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 #HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 #HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 #HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 #HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 #HTML / CSS
css3的focus-within选择器的使用
May 11 #HTML / CSS
CSS3实现渐变背景兼容问题
May 06 #HTML / CSS
You might like
php 团购折扣计算公式
2011/11/24 PHP
php使用google地图应用实例
2014/12/31 PHP
PHP基本语法实例总结
2016/09/09 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
Python Deque 模块使用详解
2014/07/04 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
python如何生成各种随机分布图
2018/08/27 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
python属于跨平台语言码
2020/06/09 Python
事业单位分类改革实施方案
2014/03/21 职场文书
家庭教育的心得体会
2014/09/01 职场文书
小学新教师个人总结
2015/02/05 职场文书
小班教师个人总结
2015/02/05 职场文书
大学军训心得体会800字
2016/01/11 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js