文档章节

CSS3与页面布局学习总结

 当当当当蛋糕
发布于 2016/12/07 13:48
字数 1537
阅读 15
收藏 0
点赞 0
评论 0

一、负边距与浮动布局
1.1、负边距
所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%。当一个元素与另一个元素margin取负值时将拉近距离。常见的功能如下:

1.1.1、向上移动
当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移。当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下:

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>负边距</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            #div1 {
                height: 100px;
                background: lightblue;
                width: 100%;
                float: left;
            }
            
            #div2 {
                height: 100px;
                background: lightgreen;
                width: 30%;
                float: left;
                margin-left: -100%;
            }
        </style>
    </head>

    <body>
        <div id="div1">div1
        </div>
        <div id="div2">div2
        </div>
    </body>

</html>
复制代码
margin-left:-29%时运行效果:

margin-left:-30%时运行效果:

margin-left:-100%时运行效果:

1.1.2、去除列表右边框
开发中常需要在页面中展示一些列表,如商品展示列表等,如果我们要实现如下布局:

 

示例代码:

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>负边距</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            #div1 {
                width: 800px;
                margin: 0 auto;
                border: 3px solid lightblue;
                overflow: hidden;
                margin-top: 10px;
            }
            
            .box {
                width: 180px;
                height: 180px;
                margin: 0 20px 20px 0;
                background: lightgreen;
                float: left;
            }
        </style>
    </head>

    <body>
        <div id="div1">
            <div class="box">
            </div>
            <div class="box">
            </div>
            <div class="box">
            </div>
            <div class="box">
            </div>
            <div class="box">
            </div>
            <div class="box">
            </div>
            <div class="box">
            </div>
            <div class="box">
            </div>
        </div>
    </body>

</html>
复制代码
运行后的结果:

但是上面的效果中右边多出了20px的距离,底下多出20px空白,解决方法如下:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>负边距</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #div1 {
                width: 780px;
                height: 380px;
                margin: 0 auto;
                border: 3px solid lightblue;
                overflow: hidden;
                margin-top: 10px;
            }
            .box {
                width: 180px;
                height: 180px;
                margin: 0 20px 20px 0;
                background: lightgreen;
                float: left;
            }
            #div2{
                margin-right: -20px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                <div class="box">
                </div>
                <div class="box">
                </div>
                <div class="box">
                </div>
                <div class="box">
                </div>
                <div class="box">
                </div>
                <div class="box">
                </div>
                <div class="box">
                </div>
                <div class="box">
                </div>
            </div>
        </div>
    </body>
</html>
复制代码
方法是使用了边距折叠,可以在前面的文章中查看到细节,基本原理如下图所示:

1.1.3、负边距+定位,实现水平垂直居中
具体请参考《CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法》

1.1.4、去除列表最后一个li元素的border-bottom


方法一:

 View Code


方法二:

使用CSS3中的新增加选择器,选择最后一个li,不使用类样式,好处是当li的个数不确定时更加方便。

如果li的border-bottom颜色与ul的border颜色是一样的时候,在视觉上是被隐藏了。如果其颜色不一致的时候还是有问题,给ul写个overflow:hidden;就可以解决这个问题。

练习:

1.2、双飞翼布局
经典三列布局,也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念,在国内最早是由淘宝UED的工程师传播开来,在中国也有叫法是双飞翼布局,它的布局要求有几点:

1、三列布局,中间宽度自适应,两边定宽; 
2、中间栏要在浏览器中优先展示渲染; 
3、允许任意列的高度最高;
4、要求只用一个额外的DIV标签; 
5、要求用最简单的CSS、最少的HACK语句;

在不增加额外标签的情况下,圣杯布局已经非常完美,圣杯布局使用了相对定位,以后布局是有局限性的,而且宽度控制要改的地方也多。在淘宝UED(User Experience Design)探讨下,增加多一个div就可以不用相对布局了,只用到了浮动和负边距,这就是我们所说的双飞翼布局,实现的代码如下:

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>双飞翼</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            body,
            html {
                height: 100%;
                font: 20px/40px "microsoft yahei";
                color: white;
            }
            
            #container {
                width: 90%;
                margin: 0 auto;
                height: 100%;
            }
            
            #header,
            #footer {
                height: 12.5%;
                background: deepskyblue;
            }
            
            #main {
                height: 75%;
            }
            
            #center,
            #left,
            #right {
                height: 100%;
                float: left;
            }
            
            #center {
                width: 100%;
                background: lightgreen;
            }
            
            #right {
                background: lightblue;
                width: 20%;
                margin-left: -20%;
            }
            
            #left {
                background: lightcoral;
                width: 20%;
                margin-left: -100%;
            }
            
            #main-inner {
                padding-left: 20%;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
                header
            </div>
            <div id="main">
                <div id="center">
                    <div id="main-inner">
                        center
                    </div>
                </div>
                <div id="left">
                    left
                </div>
                <div id="right">
                    right
                </div>
            </div>
            <div id="footer">
                footer
            </div>
        </div>
    </body>
</html>

例如:

<div id="cui_nav">
  <div class="base_nav">
    <ul id="cui_nav_ul" class="cui_nav cui_content">
      <li id="cui_c_ph_hp">首页</li>
      <li class="divider "></li>
      <li id="cui_nav_hotel">酒店<div class="cui_subnav_wrap">
          <ul id="ul_nav_hotel" class="cui_sub_nav">
            <li id="ul_c_ph_hotel_h">国内酒店</li>
            <li class="divider "></li>
            <li id="ul_c_ph_hoteli_h">海外酒店</li>
            <li class="divider "></li>
            <li id="ul_c_ph_apartment_h">海外民宿+短租</li>
            <li class="divider "></li>
            <li id="ul_c_ph_tuan_h">团购</li>
            <li class="divider "></li>
            <li id="ul_c_ph_hotsale_h">特价酒店</li>
            <li class="divider "></li>
            <li id="ul_c_ph_tujia_h">途家公寓</li>
            <li class="divider "></li>
            <li id="ul_c_ph_taocanj_h">酒店+景点</li>
            <li class="divider "></li>
            <li id="ul_c_ph_inn_h">客栈民宿</li>
            <li class="divider "></li>
            <li id="ul_c_ph_meeting_h">会场+团队房</li>
          </ul>酒店订单 &gt;</div>
      </li>
      <li class="divider "></li>
      <li id="cui_nav_vac">旅游<span class="label-en" id="ACT_Label_31" style="display:none"><em>12-12</em><i class="triangle"></i></span><i class="cui_ico_triangle"></i><span class="point"></span><div class="cui_subnav_wrap">
          <ul id="ul_nav_vac" class="cui_sub_nav">
            <li id="ul_c_ph_vacations_v">旅游首页<span class="label-cn" id="ACT_Label_30" style="display:none"><em>5折起</em><i class="triangle"></i></span></li>
            <li class="divider "></li>
            <li id="ul_c_ph_around_v">周末游</li>
            <li class="divider "></li>
            <li id="ul_c_ph_vacationsd_v">跟团游</li>
            <li class="divider "></li>
            <li id="ul_c_ph_taocan_v">自由行</li>
            <li class="divider "></li>
            <li id="ul_c_ph_cruise_v">邮轮</li>
            <li class="divider "></li>
            <li id="ul_c_ph_taocanj_v">酒店+景点</li>
            <li class="divider "></li>
            <li id="ul_c_ph_huodong_v">当地玩乐</li>
            <li class="divider "></li>
            <li id="ul_c_ph_zhutiyou_v">主题游<span class="label-en" id="ACT_Label_21" style="display:none"><em>HOT</em><i class="triangle"></i></span></li>
            <li class="divider "></li>
            <li id="ul_c_ph_baotuan_v">定制旅行</li>
            <li class="divider "></li>
            <li id="ul_c_ph_youxue_v">游学</li>
            <li class="divider "></li>
            <li id="ul_c_ph_visa_v">签证</li>
            <li class="divider "></li>
            <li id="ul_c_ph_mice_v">企业会奖</li>
            <li class="divider "></li>
            <li id="ul_c_ph_hh_v">顶级游</li>
            <li class="divider "></li>
            <li id="ul_c_ph_golf_v">爱玩户外</li>
            <li class="divider "></li>
            <li id="ul_c_ph_insurance_v">保险</li>
            <li class="divider "></li>
            <li id="ul_c_ph_deals_v">特卖汇</li>
          </ul></i><a href="http://jiaxing.changtu.com/">嘉兴客运中心官网</a></div>
      </li>
           </li>

© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 38
码字总数 13194
作品 0
南京
HTML-CSS

一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺...

掘金官方 ⋅ 01/04 ⋅ 0

关于position和float的初级理解和对未来的一些想法

在现在传统的网页布局里一般都离不开float和position,因为这段时间用纯html和css编写代码,对一些页面布局也有了自己的一些理解,并且也看了一些大神对于float和position的一些观点,所以写...

德拉费尔 ⋅ 2013/06/13 ⋅ 4

CSS3 Media Queries 实现响应式设计

在 CSS2 中,你可以为不同的媒介设备(如屏幕、打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能。你可以为媒介类型添加某些条件,检测设备并...

BearCatYN ⋅ 2014/06/10 ⋅ 0

15 个 jQuery 和 CSS3 实现的页面切换效果

带页面切换效果的全屏布局 Tutorial || Demo 页面切换效果集合 Tutorial || Demo Pesudo-Elements 动画和转换 Tutorial || Demo CSS夹叠加效应效应转换 Tutorial || Demo 全屏 PageFlip 布局...

oschina ⋅ 2013/06/03 ⋅ 18

【CSS3初探之Media Queries】终于完成了的CSS3,我们来个终章总结!

前言 无论如何,学到这里,我可以自豪的告诉自己,我HTML5与CSS3学完了,不管我现在还记得住多少,我确确实实将他们学完了,还做了不少demo。 回想几个月前,我一直在纠结自己应该学习HTML5...

范大脚脚 ⋅ 2017/12/14 ⋅ 0

移动端布局与适配

grid实战之微信钱包 腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格,实际上是你将一个元素声明为一个网格容器,并把元素内容置于网...

掘金官方 ⋅ 2017/12/26 ⋅ 0

10 个轻松学会 CSS3 的优秀在线资源

本文包揽 CSS 的所有关键点,并且引入了最新的 CSS3 版本。这个先进的技术提供超级多的新标签和属性,使得 Web 设计构建创新更简单,帮助开发者创建具有新趋势,带有漂亮布局的 Web 页面。随...

oschina ⋅ 2015/03/29 ⋅ 7

Ionic 的 ng-class 在聊天功能上面的巧妙运用

很多人在问我是 ionic好呢?还是react好呢? 其实我只想告诉你去看文档啊,不用用怎么知道哪个合适呢? 嘿嘿但是真的这么问的时候我也不会这么回答的,那岂不是太张狂了哈哈哈 react我确实没...

VIP_web ⋅ 2016/09/27 ⋅ 0

通过CSS3 Media Query实现响应式Web设计

OK开始说正经的了。在之前一篇译文中,我们了解了响应式Web设计的概念、组成要素以及基本的实现思路。今天继续相关话题,我们将从前文介绍过的"弹性布局结构"这方面出发,通过一个具体的实例...

山哥 ⋅ 2012/02/28 ⋅ 0

个人总结(css3新特性)

1.前言 css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!我之前也写过关于css3的文章,也封装过css3的一些小动画。个人觉得css3不难,但是很难用得好,用...

守候i ⋅ 2017/12/04 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Bean基础

1、Bean之间引用 <!--如果Bean配置在同一个XML文件中,使用local引用--><ref bean="someBean"/><!--如果Bean配置在不同的XML文件中,使用ref引用--><ref local="someBean"/> 其实两种......

霍淇滨 ⋅ 8分钟前 ⋅ 0

05、基于Consul+Upsync+Nginx实现动态负载均衡

1、Consul环境搭建 下载consul_0.7.5_linux_amd64.zip到/usr/local/src目录 cd /usr/local/srcwget https://releases.hashicorp.com/consul/0.7.5/consul_0.7.5_linux_amd64.zip 解压consu......

北岩 ⋅ 10分钟前 ⋅ 0

Webpack 4 api 了解与使用

webpack 最近升级到了 v4.5+版 01 官方不再支持 node4 以下版本 官方不再支持 node4 以下版本官方不再支持 node4 以下的版本,所以如果你的node版本太低,先开始升级node吧!话说node10 ...

NDweb ⋅ 20分钟前 ⋅ 0

使用nodeJs安装Vue-cli

Vue脚手架就是一个Vue框架开发环境 脚手架的意思是帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装,让我们不需要为了编辑或者一些其...

木筏笔歆 ⋅ 53分钟前 ⋅ 0

【微信小程序开发实战】0x00.开发前准备工作

写在开始 本人资深后端码农一枚,近期项目需求,接触到了微信小程序,将学习过程整理成文分享给小伙伴们,由于是边学边整理难免有表述不对的地方,望大家及时指正,感谢。 本人微信号: dream...

dreamans ⋅ 今天 ⋅ 0

linux redis的安装和php7下安装redis扩展

安装redis服务器 (1)下载安装包: $ wget http://download.redis.io/releases/redis-2.8.17.tar.gz (2)编译程序: $ tar xzf redis-2.8.17.tar.gz $ cd redis-2.8.17 $ make $ cd src &&......

concat ⋅ 今天 ⋅ 0

Guava EventBus源码解析

一、EventBus使用场景示例 Guava EventBus是事件发布/订阅框架,采用观察者模式,通过解耦发布者和订阅者简化事件(消息)的传递。这有点像简化版的MQ,除去了Broker,由EventBus托管了订阅&...

SaintTinyBoy ⋅ 今天 ⋅ 0

http怎么做自动跳转https

Apache 版本 如果需要整站跳转,则在网站的配置文件的<Directory>标签内,键入以下内容: RewriteEngine on RewriteCond %{SERVER_PORT} !^443$ RewriteRule ^(.*)?$ https://%{SERVER_NAME......

Helios51 ⋅ 今天 ⋅ 0

Python爬虫,抓取淘宝商品评论内容

作为一个资深吃货,网购各种零食是很频繁的,但是能否在浩瀚的商品库中找到合适的东西,就只能参考评论了!今天给大家分享用python做个抓取淘宝商品评论的小爬虫! 思路 我们就拿“德州扒鸡”...

python玩家 ⋅ 今天 ⋅ 0

MySQL 内核深度优化

MYSQL数据库适用场景广泛,相较于Oracle、DB2性价比更高,Web网站、日志系统、数据仓库等场景都有MYSQL用武之地,但是也存在对于事务性支持不太好(MySQL 5.5版本开始默认引擎才是InnoDB事务...

java高级架构牛人 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部