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截取字符串实例代码【推荐】
Jun 07 HTML / CSS
CSS3 特效范例整理
Aug 22 HTML / CSS
纯css3无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 HTML / CSS
CSS使用伪类控制边框长度的方法
Jan 18 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的可变变量名需要的注意的问题
2013/06/20 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
Javascript 陷阱 window全局对象
2008/11/26 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
three.js实现3D视野缩放效果
2017/11/16 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
Python数据类型之List列表实例详解
2019/05/08 Python
Python微信操控itchat的方法
2019/05/31 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
幼儿园国庆节活动方案
2014/02/01 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
话题作文之诚信
2019/11/28 职场文书
Python的property属性详细讲解
2022/04/11 Python