整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

十天学会html+css第九天 悬浮窗口固定定位 #网站

天学会html+css,第九天固定定位。

Redmi手机电视笔记本。

今天的学习目标是右侧悬浮工具栏用固定定位实现,它是相对于浏览器窗口的定位方式。

·盒子里的内容用a标签,一个图片加一行文字,此时它的位置在最底部。

·然后给它写上固定定位样式,右侧距离0,下面距离70像素,加上背景颜色,看下效果。

·开始给a标签写样式,固定宽高,text-renderin默认下划线去掉,里面内容居中,看下效果。

·图片写样式之前也要加上这行代码,然后让它的尺寸变小一点,并且左右居中,看下效果。

·文字的颜色、大小也调整一下。

·最后给a标签加上边框、内边距,让里面内容往下挪一挪。

到此,今天的学习完成。

篇文章主要给大家介绍一下使用html+css来模仿制作小米官方网站右侧的浮动框。我们来看下边的这个浮动框,位于小米官网的右侧并且随着页面的滚动,一直浮动在右侧不变;

我们通过上边的图片可以看出图片有5个单独的块元素组成,每个块元素鼠标经过都有一个单独的颜色变为黄色的效果,然后第一个块元素鼠标经过还会在左侧弹出更多内容。接下来我们简单说一下制作所用到的核心知识。

1)制作页面所需知识点

1、列表标签(dl dd dt)的使用,使用dl和dd来完成前边5个相同模块的制作

2、鼠标经过(hover)的使用,第一个元素鼠标经过左侧显示,这个跟我们之前将的导航菜单类似,还有鼠标经过文字以及图片改变颜色,这里可以使用hover之后改变背景图片来实现;

3、浮动(fixed)的使用,该内容一直浮动在网页右侧,跟随页面一起滚动,我们可以使用position:fixed来实现;

2)代码实操演练

大体了解了我们所要使用的知识点之后,我们就可以开始根据图片上的内容来制作我们所需要的页面了,具体的实现代码就如下方所示:(首先写一个div盒子,看到列表形式,直接使用dl和dd,然后每个元素内部有文字和图片,使用h4标签和span标签来存放图片和文字内容,就这么搞定了哈哈),来看代码吧。

html代码挺简单的,我们啪啪敲完之后呢,剩下的就是书写css代码,来完成图片所示的布局样式的制作了。那么我们的css代码就如下图所示:(最外层box直接来个fixed和right、bottom配合,让其浮动在右侧,然后写写dl和dd的宽高,控制控制span的背景,随便写写hover事件,ok完成了)。不多说了,看代码吧。

好了,本篇文章就给大家说到这里,大家自己动手写一下看能不能写出一样的页面效果出来,也可以找一些类似的页面自己练习一下,有需要源码的可以直接私信【网站源码】即可。

每日金句:只有知道别人心里在想什么,你才能得到你想要的。喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。

一篇文章我们把「Web前端开发进阶篇」CSS框模型讲解完了,接着我们来讲解下一篇文章,关于CSS定位的内容知识,小伙伴们跟上我的节奏,动起来,Let's go!

【引言】

CSS定位思想很简单,就是让你定义的元素框相对于其正常位置应该出现的位置,相对于父元素、另一个元素甚至是浏览器窗口的位置。浮动不是完全定位,不过,它也不是正常流布局。在我们切页面的过程中,定位和浮动是经常用,用不好,就会出现页面在不同浏览器的兼容性问题。我会在下面的文章中详细说明。

CSS定位

CSS定位机制

CSS有三种定位机制:普通流、浮动和绝对定位。

除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

CSS position属性

通过position属性我们可以选择4中不同类型的定位。

1、position:static

元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

2、position:relative

元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

3、position:absolute

元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

4、position:fixed

元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

CSS定位属性

CSS 定位属性允许你对元素进行定位。

position:把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

top:定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

right:定义了定位元素右外边距边界与其包含块右边界之间的偏移。

bottom:定义了定位元素下外边距边界与其包含块下边界之间的偏移。

left:定义了定位元素左外边距边界与其包含块左边界之间的偏移。

overflow:设置当元素的内容溢出其区域时发生的事情。

clip:设置元素的形状。元素被剪入这个形状之中,然后显示出来。

vertical-align:设置元素的垂直对齐方式。

z-index:设置元素的堆叠顺序。

了解了这些属性后,下面我们详细的说说相对定位和绝对定位。

CSS相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。

如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。

#box_relative {
 position: relative;
 left: 30px;
 top: 20px;
}

如下图所示:

相对定位

注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

CSS绝对定位

绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

普通流中其它元素的布局就像绝对定位的元素不存在一样:

#box_relative {
 position: absolute;
 left: 30px;
 top: 20px;
}

如下图所示:

绝对定位

绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块

对于定位的主要问题是要记住每种定位的意义。所以,现在让我们复习一下学过的知识吧:相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块。

注释:根据用户代理的不同,最初的包含块可能是画布或 HTML 元素。

提示:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

CSS浮动

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:

右浮动

再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。

如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。

左浮动

如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“挡住”:

左浮动

CSS float 属性

通过 float 属性实现元素的浮动。因此,我们可以创建浮动框可以使文本围绕图像:

文本围绕图像

要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。

为了实现这种效果,在被清理的元素的上外边距上添加足够的空间,使元素的顶边缘垂直下降到浮动框下面:

清除浮动

这是一个有用的工具,它让周围的元素为浮动元素留出空间。

让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:

.news {
 background-color: gray;
 border: solid 1px black;
 }

.news img {
 float: left;
 }

.news p {
 float: right;
 }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

这种情况下,出现了一个问题。因为浮动元素脱离了文档流,所以包围图片和文本的 div 不占据空间。

如何让包围元素在视觉上包围浮动元素呢?需要在这个元素中的某个地方应用 clear:

不幸的是出现了一个新的问题,由于没有现有的元素可以应用清理,所以我们只能添加一个空元素并且清理它。

.news {
 background-color: gray;
 border: solid 1px black;
 }

.news img {
 float: left;
 }

.news p {
 float: right;
 }

.clear {
 clear: both;
 }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

这样可以实现我们希望的效果,但是需要添加多余的代码。常常有元素可以应用 clear,但是有时候不得不为了进行布局而添加无意义的标记。

不过我们还有另一种办法,那就是对容器 div 进行浮动:

.news {
 background-color: gray;
 border: solid 1px black;
 float: left;
 }

.news img {
 float: left;
 }

.news p {
 float: right;
 }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

这样会得到我们希望的效果。不幸的是,下一个元素会受到这个浮动元素的影响。为了解决这个问题,有些人选择对布局中的所有东西进行浮动,然后使用适当的有意义的元素(常常是站点的页脚)对这些浮动进行清理。这有助于减少或消除不必要的标记。


CSS定位今天就讲解到这里了,下一篇讲解CSS选择器,希望大家不要放弃学习哦!

PS:

本文为‘Web前端进阶指南’原创,手动码字不易,小伙伴们别忘了顺手点个赞加个关注哈,有什么不懂的下方留言评论或私信。谢谢大家哈!