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 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
你应该知道的30个css选择器
Mar 19 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 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
一个目录遍历函数
2006/10/09 PHP
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
Views rows style模板重写代码
2011/05/16 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
php车辆违章查询数据示例
2016/10/14 PHP
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
Pyramid添加Middleware的方法实例
2013/11/27 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
logging level级别介绍
2020/02/21 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
文职个人求职信范文
2013/09/23 职场文书
旅游项目开发策划书
2014/01/18 职场文书
机关出纳岗位职责
2014/04/03 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书