搜索栏图标：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        input {

            width:270px;

            height:28px;

            background: url('serch.jpg') no-repeat right center;

        }

    </style>

</head>

<body>

    <input type="text" name="name" value="" placeholder="请输入..." />

</body>

</html>

效果：

视频列表图标：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        li{

            list-style:none;

            text-indent:2em;

            background:url('li.gif') no-repeat left center;

        }

    </style>

</head>

<body>

    <ul>

        <li><a href="#">哈哈哈哈哈哈哈</a></li>

        <li><a href="#">哈哈哈哈哈哈哈</a></li>

        <li><a href="#">哈哈哈哈哈哈哈</a></li>

        <li><a href="#">哈哈哈哈哈哈哈</a></li>

        <li><a href="#">哈哈哈哈哈哈哈</a></li>

    </ul>

</body>

</html>

效果：

购物车图标：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        a{

            display:inline-block;

            width:67px;

            height:32px;

            background:url('110.png');

        }

            a:hover {

                background: url('110.png') bottom;

            }

    </style>

</head>

<body>

    <a href="#"></a>

</body>

</html>

素材：

效果：

在点击购物车图标后背景图片会立马切换到登陆：

CSS——background综合运用的更多相关文章

  1. 前端CSS-font属性,超链接的美化,css精灵,background综合属性

    前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...

  2. CSS 背景-CSS background

    这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法   -   TOP CSS背景基础知识 CSS 背 ...

  3. CSS background 属性 总结

    CSS background 属性总结

  4. HTML CSS——background的认识（一）

    今天回归bug时无意间看到了样式表中background属性,如今总结一下: 1.background-color:设置元素的背景色.其值能够为:color-name.color-rgb.color- ...

  5. css background之设置图片为背景技巧

    css background之设置图片为背景技巧-css 背景 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色. ...

  6. CSS background 之设置图片为背景技巧

    首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用):background-color 背景颜色background-image 背景图片backg ...

  7. CSS background 属性详解

    CSS background Property 语法: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-cl ...

  8. [CSS3] CSS Background Images

    Body with background image and gradient html { background: linear-gradient(#000, white) no-repeat; h ...

  9. css background之设置图片为背景技巧

    原文 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色.背景图片截取等样式. 首先先来看看background有那 ...

随机推荐

  1. 小朋友的数字(codevs 3293)

    题目描述 Description 有n个小朋友排成一列.每个小朋友手上都有一个数字,这个数字可正可负.规定每个小朋友的特征值等于排在他前面(包括他本人)的小朋友中连续若干个(最少有一个)小朋友手上的数 ...

  2. codevs1314 寻宝

    题目描述 Description 传说很遥远的藏宝楼顶层藏着诱人的宝藏.小明历尽千辛万苦终于找到传说中的这个藏宝楼,藏宝楼的门口竖着一个木板,上面写有几个大字:寻宝说明书.说明书的内容如下: 藏宝楼共 ...

  3. [bzoj1582][Usaco2009 Hol]Holiday Painting 节日画画_线段树

    Holiday Painting 节日画画 bzoj-1582 Usaco-2009 Hol 题目大意:给定两个n*m的01网格图.q次操作,每次将第二个网格图的子矩阵全部变成0或1,问每一次操作后两 ...

  4. Oracle怎么用（常用工具）

    ​ Oracle数据库管理系统装好了!那要怎么用呢? 将介绍的工具:①Database Configuration Assistant ②SQL Plus ③SQL Developer ​ 一.Dat ...

  5. SVM学习（续）核函数 & 松弛变量和惩罚因子

    SVM的文章可以看:http://www.cnblogs.com/charlesblc/p/6193867.html 有写的最好的文章来自:http://www.blogjava.net/zhenan ...

  6. 不能不说的C#特性-表达式树

    不能不说的C#特性-表达式树 2008-09-18 00:00 by 横刀天笑, 17112 阅读, 14 评论, 收藏, 编辑 最近发生了很多很多事情,频繁的搬家.工作上的事情也挺多的,所以博客更新 ...

  7. PHPthinking官方论坛招募版主

    时间飞逝.就在昨天,我们PHPthinking的官方论坛刚刚上线了我们自己的论坛! 欢迎大家注冊账号,活跃在论坛的大家庭中,我们会及时关注论坛公布的全部内容.在开发学习的过程中,遇到的不论什么问题,有 ...

  8. WPF学习笔记：ComboBox的数据绑定

    UI <UserControl x:Class="UnitViews.UserMeUV" xmlns="http://schemas.microsoft.com/w ...

  9. luogu 3808 【模板】AC自动机（简单版）

    我太菜了 棒神%%% #include<iostream> #include<cstdio> #include<cmath> #include<cstdlib ...

  10. 46. Ext中namespace的作用（转）

    转自:https://www.cnblogs.com/givemeanorange/p/5569954.html Ext中在每一个页面中添加一个namespace呢,就像下面的代码: // creat ...