CSS——background综合运用
搜索栏图标：
<!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综合运用的更多相关文章
- 前端CSS-font属性,超链接的美化,css精灵,background综合属性
前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...
- CSS 背景-CSS background
这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法 - TOP CSS背景基础知识 CSS 背 ...
- CSS background 属性 总结
CSS background 属性总结
- HTML CSS——background的认识（一）
今天回归bug时无意间看到了样式表中background属性,如今总结一下: 1.background-color:设置元素的背景色.其值能够为:color-name.color-rgb.color- ...
- css background之设置图片为背景技巧
css background之设置图片为背景技巧-css 背景 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色. ...
- CSS background 之设置图片为背景技巧
首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用):background-color 背景颜色background-image 背景图片backg ...
- CSS background 属性详解
CSS background Property 语法: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-cl ...
- [CSS3] CSS Background Images
Body with background image and gradient html { background: linear-gradient(#000, white) no-repeat; h ...
- css background之设置图片为背景技巧
原文 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色.背景图片截取等样式. 首先先来看看background有那 ...
随机推荐
- java虚拟机（三）-- 虚拟机类加载机制
1.类加载的时机:类从被加载到虚拟机内存中开始,到卸载出内存为止.包含以下几个阶段: 1.加载 2.验证 3.准备 4.解析 5.初始化 6.使用 7.卸载 2.类加载器的种类 1.启动类加载器:这个 ...
- cpus Vs cpu period and cpu quota
1. https://docs.oracle.com/cd/E37670_01/E75728/html/section-zb1_wqw_gt.html To control a container' ...
- VS2017 +NetCore2.2.0+WebApi项目整合SwaggerUI 以及遇到的坑
1.新建一个WebApi项目,这里不说了. 2.打开项目nuget管理控制台,在 https://www.nuget.org/ 搜索swagger的包:Swashbuckle.AspNetCore , ...
- Open Flash Chart图表的JSON格式基本属性详解
http://blog.csdn.net/wangwenhui11/article/details/4283571 数据文件必须是JSON格式.JSON对象的基本格式: {} 把所有对象都编写在{}里 ...
- Codeforces Round #245 (Div. 1)——Guess the Tree
题目链接 题意: n个节点,给定每一个节点的子树(包含自己)的节点个数.每一个节点假设有子节点必定大于等于2.求这种数是否存在 n (1 ≤ n ≤ 24). 分析: 用类似DP的思路,从已知開始.这 ...
- jsp,velocity,freemark页面引擎的比較
在java领域.表现层技术主要有三种:jsp.freemarker.velocity. jsp是大家最熟悉的技术 长处: 1.功能强大,能够写java代码 2.支持jsp标签(jsp tag) 3.支 ...
- using gdb to debug c program
#include <stdio.h> static void display(int i, int *ptr); int main(void) { int x = 5; int *xptr ...
- 从一个input点击引起的思考
一个input或者select标签都是有属于自己的disabled属性的,这个属性很少被使用,但是我们在项目实际开发的过程中也会遇到,比如我选择之后就让他置灰不可以变动了,那么久可利用js动态设置.对 ...
- CSDN学院 免费技术答疑公开课，本周六场即将开播~~~
为了酬谢广大学员.CSDN学院特推出免费技术答疑公开课.让您开启一段充实的学习之旅~ 本周六场即将开播. ----------------------------------------------- ...
- HDU 5311 Sequence
Hidden String Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) ...