CSS3实现淘宝留白的方法
程序员文章站
2022-04-25 18:17:11
这篇文章主要介绍了CSS3实现淘宝留白的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 20-06-05...
做一个淘宝的留白:
当你在缩小浏览器页面的时候他的内容区并没有缩小,是留白的变小。
<!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>
这样当你在缩放的时候,缩放的是外面灰色的部分,绿色的部分始终居中。
里面的文字就是这样来写了
<div> <ul style="float: left;"></ul> <ul style="float: right;"></ul> </div>
到此这篇关于css3实现淘宝留白的方法的文章就介绍到这了,更多相关css3淘宝留白内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
下一篇: 详解CSS3实现响应式手风琴效果