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轻松实现圆角效果
Nov 09 HTML / CSS
时尚的CSS3进度条效果
Feb 22 HTML / CSS
使用CSS3制作响应式导航菜单的方法
Jul 12 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
Jan 30 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
CSS filter 有什么神奇用途
May 25 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开启gzip页面压缩实例代码
2010/03/11 PHP
php 获取本机外网/公网IP的代码
2010/05/09 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
Javascript 中介者模式实例
2009/12/16 Javascript
js常用代码段整理
2011/11/30 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
文员自我评价怎么写
2013/09/19 职场文书
园林毕业生自我鉴定范文
2013/12/29 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
说明书范文
2014/05/07 职场文书
关于保护环境的标语
2014/06/09 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书