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的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
Nov 21 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 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
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
python实现读Excel写入.txt的方法
2018/04/29 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
最新自我评价范文
2013/11/16 职场文书
行政办公员自我评价分享
2013/12/14 职场文书
元旦联欢会感言
2014/03/04 职场文书
生物工程专业求职信
2014/09/03 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
pandas提升计算效率的一些方法汇总
2021/05/30 Python