189 8069 5689
html代码部分
成都创新互联公司是专业的麻阳网站建设公司，麻阳接单;提供成都网站建设、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行麻阳网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
!doctype html
html
head
meta charset="utf-8"
title图标写法/title
/head
body
div id="icon"
span class="price"#65509;89.0/span
a href="#" class="btn"去开团nbsp;gt;/a
/div
/body
/html
下面是css代码部分,处理了浏览器的兼容
style
#icon{display:inline-block;}
.price{display:inline-block; background:#E60012; font-size:40px; color:#fff; float:left; padding:0px 60px; height:86px; line-height:86px; -moz-border-radius-topleft:43px; -moz-border-radius-bottomleft: 43px; -webkit-border-top-left-radius:43px; -webkit-border-bottom-left-radius:43px; border-top-left-radius:43px; border-bottom-left-radius:43px;}
.btn{display:inline-block; background:#000; font-size:40px; color:#fff; text-decoration:none; float:left; padding:0px 60px; height:86px; line-height:86px; -moz-border-radius-topright:43px; -moz-border-radius-bottomright: 43px; -webkit-border-top-right-radius:43px; -webkit-border-bottom-right-radius:43px; border-top-right-radius:43px; border-bottom-right-radius:43px;}
/style
效果图
输入框吧？方法很多给两种供选择。
输入框左侧加一个缩进(padding-left)空出图标空间，
1.如果图标是图片文件，作为输入框的背景图，不重复(no-repeat)，通过background-position调整图标位置
2.如果是字体图标，跟输入框放在同一个容器里，通过绝对定位，移动到相应位置
当然，图片文件的图标也可以用方法2，这样就能用雪碧图了
可以在阿里图库中下载相应的图标，下到本地后
第一步：拷贝项目下面生成的font-face
@font-face {font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
第二步：定义使用iconfont的样式
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
第三步：挑选相应图标并获取字体编码，应用于页面
i class="iconfont"#x33;/i
font-class引用
font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。
与unicode使用方式相比，具有如下特点：
兼容性良好，支持ie8+，及所有现代浏览器。
相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。
使用步骤如下：
第一步：拷贝项目下面生成的fontclass代码：
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
第二步：挑选相应图标并获取类名，应用于页面：
i class="iconfont icon-xxx"/i
html5 css3样式图标制作方法：
1、html代码：
div id="boxes"
div id="boxShortcode"border-radius: 40px (shortcode)/div
div id="box1"border-top-right-radius: 40px (same on both axis)/div
div id="box2"border-top-right-radius: 20px 40px (x y) /div
div id="box3"border-top-right-radius: 40px 20px (x y) /div
/div
2、css样式代码：
#boxes div { margin-bottom: 20px; height: 50px; padding-left: 20px }
#boxShortcode {
background: cyan;
border-radius: 40px;
}
#box1 {
background: red;
border-top-right-radius: 40px;
}
#box2 {
background: yellow;
border-top-right-radius: 20px 40px;
}
#box3 {
background: lime;
border-top-right-radius: 40px 20px;
}
3、运行结果：