网页浮动图标的代码是什么,最好是css的

html-css023

网页浮动图标的代码是什么,最好是css的,第1张

如果是地址栏的图标,代码如下:

<link rel="shortcut icon" href="MyImg.ico" />

<link rel="Bookmark" href="favicon.ico" />

代码放置在<head></head>之间,图片放置在站点根目录。

如果是页面上的某个图标,这个也有多种方法。

一种是float的浮动,不脱离页面内容流。

一种是position,可以脱离页面内容流,独立设置位置。

如果是某些标题,列表前的小图标,则可以使用img添加,如:

<img src="..." /><a href="...">链接</a>

也可以用css的background属性集合padding属性设置为背景。

1、标准流——标签按照规定好默认方式排列

2、浮动

3、定位

多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。

float属性用于创建浮动框,将其移动到一边,直到左边或者右边边缘及包含块或另一个浮动框的边缘。

选择器:{ float:属性值}

1、 浮动的元素会脱离标准流(脱标),不再保留原来的位置

2、浮动的元素会一行内显示并且元素顶部对齐

3、浮动的元素会具有行内块元素的特性

1、为了约束浮动元素,一般采取的策略是:先用标准流的父元素排列上下位置,之后内部子元素采取浮动左右位置,符合网页布局第一准则。

2、一个元素浮动了,理论上其余的兄弟元素也要浮动。浮动的盒子只会影响当前浮动盒子后面的标准流,不会影响前面的标准流

父级盒子不给高度,自己盒子会撑开父级盒子高度,但是加上浮动就会无效。

额外标签法也称为隔墙法,是W3C推荐的做法。会在浮动元素的末尾添加一个空的标签。例如:<div style="chear:both"></div>。新的标签必须是块级元素。

选择器:{ clear :属性值}

实际工作中几乎只用clear :both 。清除浮动的策略是闭合浮动,只让浮动在父级盒子内部影响。

可以给父级添加overflow属性,将其属性值设置为hidden、auto或scroll。这个属性还用于外边距合并。   缺点就是无法显示溢出部分。

:after伪元素法相当于额外标签法的升级版,也是在浮动元素尾部添加空的块级元素,用法是给父元素添加属性。以下为固定格式。

类似于:after 伪元素法,只不过前后都会插入一个盒子,更符合闭合的概念。