何以将页脚固定在页面底部

2011/12/20 · CSS · 1
评论 · 来源:
w3cplus    
· CSS

来源:w3cplus

用作贰个Web的前端攻城师,在创造页面效果时必然有蒙受上面这种情况:当一个HTML页面中富含非常少的源委时,Web页面包车型客车“footer”部分随着飘上来,处在页面包车型地铁半腰中间,给视觉效果带来相当大的震慑,让您的页面看上去非常不佳看,特别是现行反革命宽屏越多,这种气象更是常见。那么怎么着将Web页面包车型地铁“footer”部分永久长久在页面包车型客车最底层呢?

在乎了那边所说的是页脚footer恒久永远在页面包车型地铁底层,并非世代恒久在显示屏显示器的最底层,换句话说,正是当内容唯有一丝丝时,Web页面呈现在浏览器尾部,当内容高度当先浏览器中度时,Web页面包车型地铁footer部分在页面包车型大巴尾巴部分,简单的讲Web页面包车型客车footer部分永久在页面包车型客车平底,换句说,Footer部分长久沉底。如下图所示:

图片 1

那么昨日首要和豪门一块儿学习怎么将页脚固定在页面包车型大巴最底层?

 

方法一:

首先大家来看率先种办法,这种方式是源于于Matthew James
Taylor的《How to keep footers at
the bottom of the
page》。下边大家就一起来拜谒Matthew
James Taylor介绍的法子。

HTML Markup

XHTML

<div id=”container”> <div id=”header”>Header
Section</div> <div id=”page” class=”clearfix”> 页面容容部分
</div> <div id=”footer”>Footer Section</div>
</div>

1
2
3
4
5
6
7
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
页面容容部分
</div>
<div id="footer">Footer Section</div>
</div>

其实我们能够在div#page扩张所需的剧情结构,如下所示:

JavaScript

<div id=”container”> <div id=”header”>Header
Section</div> <div id=”page” class=”clearfix”> <div
id=”left”>Left Sidebar</div> <div id=”content”>Main
content</div> <div id=”right”>Right sidebar</div>
</div> <div id=”footer”>Footer Section</div>
</div>

1
2
3
4
5
6
7
8
9
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left Sidebar</div>
<div id="content">Main content</div>
<div id="right">Right sidebar</div>
</div>
<div id="footer">Footer Section</div>
</div>

真正来讲,完成那页脚长久永远在页面包车型客车平底,大家只供给七个div,个中div#container是二个器皿,在这一个容器之中,大家包括了div#header(头部),div#page(页面主体部分,大家得以在这几个div中追加越来越多的div结构,如上面的代码所示),div#footer(页脚部分)

CSS Code

CSS

html,body { margin: 0; padding:0; height: 100%; } #container {
min-height:100%; height: auto !important; height: 100%;
/*IE6不识别min-height*/ position: relative; } #header { background:
#ff0; padding: 10px; } #page { width: 960px; margin: 0 auto;
padding-bottom: 60px;/*等于footer的高度*/ } #footer { position:
absolute; bottom: 0; width: 100%; height: 60px;/*脚部的莫大*/
background: #6cf; clear:both; } /*=======主体内容部分=======*/ #left
{ width: 220px; float: left; margin-right: 20px; background: lime; }
#content { background: orange; float: left; width: 480px; margin-right:
20px; } #right{ background: green; float: right; width: 220px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
html,body {
margin: 0;
padding:0; height: 100%;
}
#container {
min-height:100%;
height: auto !important;
height: 100%; /*IE6不识别min-height*/
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#page {
width: 960px;
margin: 0 auto;
padding-bottom: 60px;/*等于footer的高度*/
}
#footer {
position:
absolute;
bottom: 0;
width: 100%;
height: 60px;/*脚部的高度*/ background: #6cf;
clear:both;
}
/*=======主体内容部分=======*/
#left {
width: 220px;
float: left;
margin-right: 20px;
background: lime;
}
#content {
background: orange;
float: left;
width: 480px;
margin-right: 20px;
}
#right{
background: green;
float: right;
width: 220px;
}

下边我们一道来探视这种方法的落到实处原理:

1.
<html>和<body>标签:
html和body标签中必须将中度(height)设置为“百分百”,那样大家就能够在容器上设置比例惊人,同一时候必要将html,body的margin和padding都移除,也便是html,body的margin和padding都为0;

2.
div#container容器:
div#container容器必须安装三个十分小中度(min-height)为100%;那根本使他在内容非常少(或从不内容)情状下,能维系100%的万丈,可是在IE6是不支持min-height的,所认为了包容IE6,大家要求对min-height做一定的同盟管理,具体能够看前边的代码,可能阅读Min-Height
Fast
Hack询问怎样消除min-height在Ie6下的bug难题。别的大家还索要在div#container容器中装置三个”position:relative”以方便里面包车型地铁成分进行相对定位后不会跑了div#container容器;

3. div#page容器:div#page那几个容器有多个很关键的装置,要求在这些容器上设置贰个padding-bottom值,并且那个值要等于(或略大于)页脚div#footer的可观(height)值,当然你在div#page中能够运用border-bottom人水-width来替代padding-bottom,但有一点点索要在乎,此处你绝不可够使用margin-bottom来代表padding-bottom,不然会不能落到实处际效果果与利益

4.
div#footer容器:
div#footer容器必需安装一个原则性中度,单位能够是px(或em)。div#footer还要求举行相对定位,况兼安装bottom:0;让div#footer固定在容器div#container的底层,那样就足以完结我们后边所说的功效,当内容独有有个别时,div#footer固定在荧屏的平底(因为div#container设置了八个min-height:百分百),当内容惊人抢先荧屏的可观,div#footer也一贯在div#container尾部,也正是牢固在页面包车型大巴底部。你也得以给div#footer加设贰个”width:百分之百”,让他在全部页面上获得延伸;

5.
其他div:
有关别的容器能够依靠本身要求开展安装,比如说后面包车型大巴div#header,div#left,div#content,div#right等。

优点:

结构轻易清晰,无需js和别的hack能落实各浏览器下的协作,何况也适应iphone。

缺点:

不足之处便是索要给div#footer容器设置一个牢固中度,那些高度能够凭仗你的要求开展安装,其单位能够是px也得以是em,而且还索要将div#page容器的padding-bottom(或border-bottom-width)设置大小相当于(或略大于)div#footer的莫斯中国科学技术大学学,技巧不奇怪运作。

上边正是Matthew James
Taylor介绍的怎么落到实处页脚永恒恒久在页面包车型地铁尾部,假使大家感兴趣能够翻阅原文,也足以平素点击这里查看Demo。

 

研讨网页设计中的字体选用(1):Font Set

2015/03/30 · CSS,
HTML5 ·
字体

原稿出处:
棕熊的博客   

Hihi, 大家好~

这段时间有那壹个人都聊到了网页上该怎么接纳字体的标题。难题就算小,但是却是前端开垦中的基本,因为脚下的网页,依旧以文字信息为主,而字体,作为文字表现形式的最注重参数之一,自然有着一定关键的地方。缺憾字体的首要性在不短日子内并不曾到手足够的尊重。非常多个人对字体的定义如故停留在
font-family: “甲骨文”, Arial, Helvetica, serif
的等第,却不通晓为啥这么设置,这样设置是还是不是站得住等等。未来就让作者说说字体的源流吧。

风趣的CSS标题(13):美妙地创造背景象渐变动画!

2017/03/24 · CSS ·
CSS,
动画

正文小编: 伯乐在线 –
chokcoco
。未经小编许可,禁绝转发!
迎接参与伯乐在线 专辑撰稿人。

一些时候,嗯,应该说一些特定场所,大家大概需求下边那样的卡通效果,渐变 +
animation :

图片 2

假定我们渐变的写法如下:

div { background: linear-gradient(90deg, #ffc700 0%, #e91e1e 100%); }

1
2
3
div {
    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 100%);
}

遵纪守法常规主见,合作 animation ,大家首先会想到在 animation
的手续中经过转移颜色达成颜色渐变动画,那么大家的 CSS 代码恐怕是:

div { background: linear-gradient(90deg, #ffc700 0%, #e91e1e 100%);
animation: gradientChange 2s infinite; } @keyframes gradientChange {
100% { background: linear-gradient(90deg, #e91e1e 0%, #6f27b0 100%); }
}

1
2
3
4
5
6
7
8
9
10
div {
    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 100%);
    animation: gradientChange 2s infinite;
}
 
@keyframes gradientChange  {
    100% {
        background: linear-gradient(90deg,  #e91e1e 0%, #6f27b0 100%);
    }
}

地点我们用到了二种颜色:

  • #ffc700 黄色
  • #e91e1e 红色
  • #6f27b0 紫色

终极,并从未大家预料的结果,而是那样的:

图片 3

See the Pen 线性渐变动画 by
Chokcoco (@Chokcoco) on
CodePen.

咱俩预料的补间动画,变成了逐帧动画。
图片 4

也正是说,线性渐变是不援救动画 animation
的,那独有的由四个颜色,变化到其余四个颜料吗?像上面那样:

div { background: #ffc700; animation: gradientChange 3s infinite
alternate; } @keyframes gradientChange { 100% { background: #e91e1e; }
}

1
2
3
4
5
6
7
8
9
10
div {
    background: #ffc700;
    animation: gradientChange 3s infinite alternate;
}
 
@keyframes gradientChange  {
    100% {
        background: #e91e1e;
    }
}

发觉,单纯的单色值是足以生出渐变的:

See the Pen 单色值渐变动画 by
Chokcoco (@Chokcoco) on
CodePen.

方法二:

这种办法是采用footer的margin-top负值来贯彻footer永恒永久在页面包车型客车平底效果,上面大家实际看是怎么样促成的。

HTML Markup

XHTML

<div id=”container”> <div id=”page”>Main Content</div>
</div> <div id=”footer”>footer</div>

1
2
3
4
<div id="container">
<div id="page">Main Content</div>
</div>
<div id="footer">footer</div>

地点的代码是最焦点的HTML
Code,同期您也意识了div#footer和div#container是同辈关系,不像方法一,div#footer在div#container容器内部。当然你也足以依靠你的须要把内容扩充在div#container容器中,如:二个三列布局,而且还满含header部分,请看上面包车型客车代码:

XHTML

<div id=”container”> <div id=”header”>Header
Section</div> <div id=”page” class=”clearfix”> <div
id=”left”>Left sidebar</div> <div id=”content”>Main
content</div> <div id=”right”>Right sidebar</div>
</div> </div> <div id=”footer”>Footer
section</div>

1
2
3
4
5
6
7
8
9
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left sidebar</div>
<div id="content">Main content</div>
<div id="right">Right sidebar</div>
</div>
</div>
<div id="footer">Footer section</div>

CSS Code

CSS

html, body { height: 100%; margin: 0; padding: 0; } #container {
min-height: 100%; height: auto !important; height: 100%; } #page {
padding-bottom: 60px;/*中度等于footer的莫大*/ } #footer { position:
relative; margin-top: -60px;/*等于footer的高度*/ height: 60px;
clear:both; background: #c6f; } /*==========其他div==========*/
#header { padding: 10px; background: lime; } #left { width: 18%;
float: left; margin-right: 2%; background: orange; } #content{ width:
60%; float: left; margin-right: 2%; background: green; } #right {
width: 18%; float: left; background: yellow; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
html,
body {
height: 100%;
margin: 0;
padding: 0;
}  
 
#container {
min-height: 100%;
height: auto !important;
height: 100%;
}
#page {
padding-bottom: 60px;/*高度等于footer的高度*/
}
#footer {
position: relative;
margin-top: -60px;/*等于footer的高度*/
height: 60px;
clear:both;
background: #c6f;
}
/*==========其他div==========*/
#header {
padding: 10px;
background: lime;
}
#left {
width: 18%;
float: left;
margin-right: 2%;
background: orange;
}
#content{
width: 60%;
float: left;
margin-right: 2%;
background: green;
}
#right {
width: 18%;
float: left;
background: yellow;
}

艺术一和艺术二有几点是完全同样的,举例说方法一中的1-3三点,在措施二中都同一,换句话说,方法二中也亟需把html,body高度设置为百分之百,同仁一视置margin,padding为0;其二div#container也亟需设置min-height:百分百,并拍卖好IE6下的min-height宽容难点;其三也须求在div#page容器上设置二个padding-bottom或border-bottom-width值等于div#footer中度值(或略大于)。那么三种方法差异之处是:

1.
div#footer放在div#container容器外面,也便是说两个是同级关系,要是你有新因素须求停放在与div#container容器同级,那您需求将此因素实行相对定位,不然将会破坏div#container容器的min-height值;

2.
div#footer进行margin-top的负值设置,并且此值等于div#footer的中度值,何况也要和div#page容器的padding-bottom(或border-bottom-width)值相等。

优点:

结构轻便清晰,无需js和别的hack能落实各浏览器下的合营。

缺点:

要给footer设置固定值,由此无法让footer部分自适应中度。

世家若是对这种措施感兴趣,你也足以浏览一下《CSS Sticky
Footer》和《Pure Css Sticky
Footer》,也许直接点击Demo翻开其源代码。

 

– font-family

大家理解CSS准绳中定义字体是经过 font-family 那条准绳来贯彻的。细心翻翻CSS的文书档案,却从不意识任何能钦点某叁个特定字体的条条框框。

心想十年前,你能够随地见到类似于那样的代码:

JavaScript

<font face="Frankin Gothic Book">Lorem
Ipsum</font>

1
&lt;font face=&quot;Frankin Gothic Book&quot;&gt;Lorem Ipsum&lt;/font&gt;

差那么一点不会有人思虑到,Frankin Gothic Book是二个 Windows only
的字体。在一台Mac上平昔看不到Frankin Gothic
Book字体的魔法,系统因为找不到这种字体,就改用Mac的默许字体显示了。于是,网页的风格就和原本完全不雷同了,根本达不到弗兰kin
Gothic Book的功效。于是W3C提议了font
set 的定义——将一层层近似的字体根据优先级依次组成三个列表;浏览器从列表底部开端匹配,知道找到第贰个可用的书体,并动用该字体举办展示。

比方说上边那个例子,大家能够创立这样的三个font set:

JavaScript

<span style='font-family: "Franklin Gothic
Book","Lucida Grande"'>Lorem Ipsum</span>

1
&lt;span style=&#039;font-family: &quot;Franklin Gothic Book&quot;,&quot;Lucida Grande&quot;&#039;&gt;Lorem Ipsum&lt;/span&gt;

咱俩来看看浏览器怎么来表现这段文字吗:

  • Windows下:浏览器从列表的率先个字体起头寻找——系统中设有Frankin
    Gothic Book,使用Frankin Gothic Book字体显示。
  • Mac 下:浏览器从列表的率先个字体初叶搜索——系统中子虚乌有Frankin Gothic
    Book,寻找退步。继续寻找下一个字体——Lucida Grande。系统中留存Lucida
    Grande字体,终止寻找,并用Lucida Grande字体突显。

如此在Mac上,Mac就会以与Frankin Gothic Book类似的Lucida
Grande字体显示这段文字。

只是大概存在一台微型Computer,下边既未有Frankin Gothic Book字体,也并未有Lucida
Grande字体,那么它如故鞭长莫及精确展现上面的这段文字。于是开辟人士不得不在那几个字体列表中持续追加字体以适应各个系统,导致那个font
set失去原本的“组织近似字体”的机能。于是font
set中引进了“通用字体族”,也便是我们通常见到的 serif 和 sans-serif。作者会在之后的稿子中详细的介绍那多个,以及一些任何的通用字体族。在这里,大家可以省略的将它们明白为一种“在具备钦点字体都失效的情景下,浏览器钦赐的一种最后的代用字体”。

比方说大家在创新一下方面包车型客车这段示例文字:

JavaScript

<span style='font-family: "Franklin Gothic
Book","Lucida Grande",sans-serif'>Lorem
Ipsum</span>

1
&lt;span style=&#039;font-family: &quot;Franklin Gothic Book&quot;,&quot;Lucida Grande&quot;,sans-serif&#039;&gt;Lorem Ipsum&lt;/span&gt;

咱俩再看看浏览器怎么来表现这段立异后的文字吗:

  • Windows下:浏览器从列表的率先个字体开头搜寻——系统中设有Frankin
    Gothic Book,使用Frankin Gothic Book字体展现。
  • Mac 下:浏览器从列表的率先个字体开头寻觅——系统中空中楼阁Frankin Gothic
    Book,寻觅战败。继续搜索下二个字体——Lucida Grande。系统中留存Lucida
    Grande字体,终止寻觅,并用Lucida Grande字体显示。
  • 某系统:浏览器从列表的率先个字体先河搜索——系统中不设有Frankin Gothic
    Book,搜索退步。继续寻觅下二个字体——系统中也不设有Lucida
    Grande字体。继续搜寻下三个字体——通用字体sans-serif。浏览器选用它的默许sans-serif字体”Arial”来显示这段文字。

请介意两点。首先,通用字体族具体对应哪个字体,是由浏览器决定的。下面例子中浏览器内定Arial为sans-serif字体,但一心有望另贰个浏览器钦赐Helvetica
为它的sans-serif字体。具体哪个字体被最后利用,是敬敏不谢预料的。其次,通用字体族只是一种在font
set中其余字体都行不通时的代用方案。因而——设计者应该尽量的付出齐全的font
set,以诚心诚意的遮盖全部的种类,而不该依赖于通用字体族

邻近于以下的二种写法都是荒唐的:

JavaScript

<span style="font-family:sans-serif">Lorem
Ipsum</span> <span
style="font-family:sans-serif,Arial">Lorem
Ipsum</span>

1
2
&lt;span style=&quot;font-family:sans-serif&quot;&gt;Lorem Ipsum&lt;/span&gt;
&lt;span style=&quot;font-family:sans-serif,Arial&quot;&gt;Lorem Ipsum&lt;/span&gt;

首先种写法的荒唐在于——它一定于根本未曾点名字体,仍然是交由浏览器采取字体。写了一定于没写。

其次种写法的谬误在于顺序。因为通用字体族应该在贰个font
set中任何具备字体都失效时才起效果。由此,将钦赐字体放在通用字体之后,会导致制定字体尚未相配时就采纳了通用字体。所以,你应该必得使通用字体处在font
set中的最终一个人。

别的,这里要验证两件业务。

率先,浏览器采纳font
set中哪些字体的条条框框固然看起来相当粗略,但事实上极度trickish。小编会在后头的篇章中做出切实的注脚。

帮助,固然字体的CSS法则名称为font-family, 但它的面目是四个font
set,而各异是印刷意义上的font family。印刷上的font family
是指一两种同样字样的例外强度组合,举个例子Lucida Family(包涵Lucida Sans,
Lucida Sans Typewriter, Lucida Console, Lucida Grande等等)和Arial
Family(Arial, Arial Black, Arial Rounded MT等等),但鲜明那么些font
family 都不契合直接拿来作为一个font set来使用。

昨天就到那边了啊。下一次大家来精心斟酌通用字体族。

1 赞 1 收藏
评论

图片 5

So

总结一下,线性渐变(径向渐变)是不扶助 animation 的,单色的 background
是支撑的。

查找了下文书档案,在 background 周围区域截图如下:

图片 6

哪些 CSS
属性能够动画?,上边包车型地铁截图是不完全的支撑
CSS 动画的品质,完整的能够戳左侧。

对于 background 相关的,文书档案里写的是永葆 background
不过未有前述不补助 background: linear-gradient()/radial-gradient()
。估摸原因,恐怕是由于渐变中投入 animation 的转换对过于消耗质量。

这正是说是还是不是我们想要的背景象渐变动画就不能兑现了吗?上面大家就散架下观念看看有未有其余方法可以达到我们的对象。

方法三:

达成在页脚永久长久在页面尾部的章程有多数,不过有比较多办法是亟需利用一些hack或借助javaScrip来落实,那么接下去要说的方法三,仅仅使用了15行的体裁代码和二个简单明了的HTML结构完结了效果,况且包容性强,别的相当的少说,先看代码。

HTML Code

XHTML

<div id=”container”> <div id=”page”>Your Website content
here.</div> <div class=”push”><!– not have any content
–></div> </div> <div id=”footer”>Footer
Section</div>

1
2
3
4
5
<div id="container">
<div id="page">Your Website content here.</div>
<div class="push"><!– not have any content –></div>
</div>
<div id="footer">Footer Section</div>

地点是最宗旨的HTML
马克up,当然你也得以加上新的剧情,然而有好几内需专一假若您在div#container和div#footer容器外扩展内容的话,新加进徕的要素需求展开相对定位。如如说你能够在div#container容器中丰硕你页面所需的要素

HTML Code

XHTML

<div id=”container”> <div id=”header”>Header
Section</div> <div id=”page” class=”clearfix”> <div
id=”left”>Left sidebar</div> <div id=”content”>Main
Content</div> <div id=”right”>Right Content</div>
</div> <div class=”push”><!– not put anything here
–> </div> </div> <div id=”footer”>Footer
Section</div>

1
2
3
4
5
6
7
8
9
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
<div id="right">Right Content</div>
</div> <div class="push"><!– not put anything here –>
</div>
</div> <div id="footer">Footer Section</div>

CSS Code

CSS

html, body{ height: 100%; margin:0; padding:0; } #container {
min-height: 100%; height: auto !important; height: 100%; margin: 0 auto
-60px;/*margin-bottom的负值等于footer中度*/ } .push, #footer {
height: 60px; clear:both; } /*==========其他div效果==========*/
#header { padding: 10px; background: lime; } #left { width: 18%;
float: left; margin-right: 2%; background: orange; } #content{ width:
60%; float: left; margin-right: 2%; background: green; } #right {
width: 18%; float: left; background: yellow; } #footer { background:
#f6c; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
html,
body{
height: 100%;
margin:0;
padding:0;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;/*margin-bottom的负值等于footer高度*/
} .push,
#footer {
height: 60px;
clear:both;
}
/*==========其他div效果==========*/
#header {
padding: 10px;
background: lime;
}
#left {
width: 18%;
float: left;
margin-right: 2%;
background: orange;
}
#content{
width: 60%;
float: left;
margin-right: 2%;
background: green;
}
#right {
width: 18%;
float: left;
background: yellow;
}
#footer {
background: #f6c;
}

眼前面二种形式相比较,方法三更近乎于方法二,他们都将div#footer放在div#container容器之外,並且以此格局在div#container容器中还扩展了五个div.push用来把div#footer推下去,上边我们就一齐走访这种方式是怎么落到实处页脚永恒恒久在页面头部的。

1.
<html>和<body>标签:
html,body标签和前三种艺术一致,供给设置“height:百分之百”因人而异置“margin”和“padding”为0;

2.
div#container:
艺术三最首要部分就在于div#container的设置,首先需求设置其最小高度(min-height)为100%,为了能合营好IE6,供给对min-height实行包容管理(具体管理措施看眼下或代码)另外这里还大概有四个关键点在div#container容器上急需设置二个margin-bottom,并且给其取负值,何况值的高低相等div#footer和div.push的高度,如果div#footer和div.push设置了padding和border值,那么div#container的margin-bottom负值要求丰硕div#footer和div.push的padding和border值。相当于说“div#container{margin-bottom:-[div#footer的height+padding+border]或者-[div.push的height+padding+border]}”。一言以蔽之:div#container的margin-bottom负值需求和div#footer以及div.push的中度一致(假使有padding或border时,中度值需求增添他们)

3.
div.push:
在div.push中大家不应有放置任何内容,并且这么些div必须放置在div#container容器中,而且是最尾部,并且须求安装其高度值等于div#footer的值,最棒拉长clear:both来祛除浮动。div.push容器在此地所起的功力正是将footer往下推。

4.
div#footer容器:
div#footer容器和格局二一样,不可能松开div#container内部,而和div#container容器同级,假设急需设置成分和footer之间的间隔,最棒使用padding来替代margin值。

优点:

简单明了,易于精通,包容全部浏览器。

缺点:

比起前边的三种方法,多利用了三个div.push容器,同样此办法限制了footer部分可观,无法达到规定的规范自适应中度效果。

万一大家对章程三想询问更加多能够点击这里恐怕直接从DEMO中下载代码自个儿商讨一下。

 

通过 background-position 模拟渐变动画

上面怎样 CSS 属性能够动画的截图中,列出了与 background 相关还可能有
background-position ,也就是 background-position
是支撑动画的,通过改动 background-position 的艺术,能够完结渐变动画:

div { background: linear-gradient(90deg, #ffc700 0%, #e91e1e 50%,
#6f27b0 100%); background-size: 200% 100%; background-position: 0 0;
animation: bgposition 2s infinite linear alternate; } @keyframes
bgposition { 0% { background-position: 0 0; } 100% {
background-position: 100% 0; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div {
    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
    background-size: 200% 100%;
    background-position: 0 0;
    animation: bgposition 2s infinite linear alternate;
}
 
@keyframes bgposition {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0;
    }
}

此地大家还合营了 background-size。首先掌握下:

background-position:内定图片的启幕地点。那么些早先地方是争执于以
background-origin 定义的背景地方图层来讲的。>
background-size:设置背景图片大小。当取值为百分比时,表示钦点背景图片相对背景区的比例大小。当设置多少个参数时,第二个值内定图片的上升的幅度,第贰个值钦赐图片的可观。

通过 background-size: 200% 100%
将图片的宽窄设置为两倍背景区的宽窄,再经过改换 background-position
x 轴伊始地方来运动图片,由于背景图设置的大小是背景区的两倍,所以
background-position的位移是由 0 0 -> 100% 0 。最后效果如下:

See the Pen background-position
完毕渐变动画 by Chokcoco
(@Chokcoco) on
CodePen.

发表评论

电子邮件地址不会被公开。 必填项已用*标注