<!doctype html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#change').click(function(){
$('p').css({"border-color":"#62D781","background-color":"#EAF7EE"});
$('#error').attr("src","img/success.jpg")
});
$('#close').click(function(){
$('p').hide();
});
});
</script>
<style type="text/css">
p {
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-color: #F5A0A0;
background-color: #FCEEEE;
width:540px;
height: 30px;
line-height: 30px
}
#close{
float: right;
margin-top: 7px
}
#error{
float: left;
margin-top: 7px
}
</style>
</head>

<body>
<p>dfsfsd<img src="img/info.jpg" id="error"><img src="img/close.jpg" id="close"></p>
<button id="change">change border</button>
</body>
</html>

完整代码(包括图片和js文件)，到我的Github下载:https://github.com/joyang1/ChangeBorderColor

css边跨实例的更多相关文章

  1. 【转】精选30个优秀的CSS技术和实例

    今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...

  2. 精选30个优秀的CSS技术和实例

    精选30个优秀的CSS技术和实例   投递人 墙头草 发布于 2008-12-06 20:57 评论(97) 有17487人阅读 原文链接 [收藏] « » 今天,我为大家收集精选了30个使用纯CSS ...

  3. css技术和实例

    今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...

  4. 30个优秀的CSS技术和实例 By 彬Go 2008-12-04

    在这里可发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等…这些实例都是使用纯CSS和HTML实现的.单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面(英文),单击每个实例 ...

  5. SQL ser 跨实例访问数据库

    SqlServer如何跨实例访问数据库 Exec sp_droplinkedsrvlogin LinkName,NullExec sp_dropserver LinkName go EXEC sp_a ...

  6. CSS 分类 (Classification) 实例

    CSS 分类 (Classification) 实例CSS 分类属性 (Classification)CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素 ...

  7. CSS 尺寸 (Dimension) 实例

    CSS 尺寸 (Dimension) 实例CSS 尺寸属性CSS 尺寸属性允许你控制元素的高度和宽度.同样,还允许你增加行间距. 属性 描述height 设置元素的高度.line-height 设置行 ...

  8. CSS 边框(border)实例

    CSS 边框(border)实例:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS 边框属性属性 描述bo ...

  9. CSS 字体(font)实例

    CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...

随机推荐

  1. PostgreSQL 日常数据库维护工作

    日常数据库维护工作定期备份,定期”清理“数据库,周期性的日志文件管理check_postgres可用于检测数据库的健康并报告异常情况 1. 日常清理 PostgreSQL数据库要求周期性的清理维护.对 ...

  2. 转：InnoDB Log Block Structure(InnoDB日志Block结构详解)

    文章转载自等博 InnoDB Log Block Structure(InnoDB日志Block结构详解)

  3. Java学习之系统高可用性渲染接口日志自动服务降级

    背景:公司都追求系统的高可用性,这里不可用时间就是其中很重要的一个指标,为此在做系统功能升级迭代的过程中如何快速处理异常恢复正常功能极为重要.现在对新增模块的要求是都增加开关,方便快速关闭异常模块,但 ...

  4. appium_python-测试报告模板话化

    我们用python拓展模板 HTMLTestRunner.py python3 要自己重新改写下输出输入接口,可直接下载 改好的 地址 链接:http://pan.baidu.com/s/1hsOBw ...

  5. delphi 在线程中运行控制台命令(console)

    在编程开发的时候,我们时常会调用windows本身的功能,如:检测网络通断,连接无线wifi等. 虽然,用 windows api 操作可以完美地完成这些操作,但是,函数参数太难了.令人望而生畏,不是 ...

  6. linux下mysql 最新版安装图解教程

    1.查看当前安装的linux版本 命令:lsb_release -a 如下图所示 通过上图中的数据可以看出安装的版本为RedHat5.4,所以我们需要下载RedHat5.4对应的mysql安装包 2. ...

  7. C语言学习笔记--数组指针和指针数组

    C 语言中的数组有自己特定的类型,数组的类型由元素类型和数组大小共同决定.(如 int array[5]类型为 int[5]) 1.定义数组类型 C 语言中通过 typedef 为数组类型重命名:ty ...

  8. 6-EasyNetQ之订阅

    一个EasyNetQ订阅者订阅一种消息类型(消息类为.NET 类型).通过调用Subcribe方法一旦对一个类型设置了订阅,一个持久化队列就会在RabbitMQ broker上被创建,这个类型的任何消 ...

  9. FAILED: Execution Error, return code 2 from org.apache.hadoop

    错误遇到的情形: hive整合hbase,hive的数据表 load,select,insert一切正常 通过hive往hbase关联表插入数据的时候报错,错误内容如下: 2016-04-18 14: ...

  10. JSONP跨域提交表单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...