css图标的写法

html-css07

css图标的写法,第1张

html代码部分

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>图标写法</title>

</head>

<body>

<div id="icon">

<span class="price">&#6550989.0</span>

  <a href="#" class="btn">去开团&nbsp&gt</a>

</div>

</body>

</html>

下面是css代码部分,处理了浏览器的兼容

<style>

#icon{display:inline-block}

.price{display:inline-blockbackground:#E60012font-size:40pxcolor:#ffffloat:leftpadding:0px 60pxheight:86pxline-height:86px-moz-border-radius-topleft:43px-moz-border-radius-bottomleft: 43px-webkit-border-top-left-radius:43px-webkit-border-bottom-left-radius:43pxborder-top-left-radius:43pxborder-bottom-left-radius:43px}

.btn{display:inline-blockbackground:#000font-size:40pxcolor:#ffftext-decoration:nonefloat:leftpadding:0px 60pxheight:86pxline-height:86px-moz-border-radius-topright:43px-moz-border-radius-bottomright: 43px-webkit-border-top-right-radius:43px-webkit-border-bottom-right-radius:43pxborder-top-right-radius:43pxborder-bottom-right-radius:43px}

</style>

效果图

如果是地址栏的图标，代码如下：

<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属性设置为背景。