<!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. Unreal Engine 4 Radiant UI 入门教程（一）制作Radiant HUD

    请注意:本篇教程的编号是从零开始的,如果没有看第零篇教程,请前往学习. 本教程介绍如何制作Radiant HUD,这是指将网页元素直接加入到HUD中,效果为: 对应的网页元素为: 第一步: 将之前下载 ...

  2. 12-01Js表单验证和JsWindow

    一.表单验证form 1.创建一个新的表单: <form id="id是唯一的,不可重复" name=“可重复”,method="post/get",ac ...

  3. Samba服务学习报错总结

    1 2 3 4 5 此文献来至百度文库 http://wenku.baidu.com/link?url=hkHembjXcjoYRU9ky34a46Lzv5SAEutwa0v1_F8INQsdg_KK ...

  4. Android 媒体编解码器(转)

    媒体编解码器 MediaCodec类是用来为低级别的媒体编码和解码的媒体编解码器提供访问.您可以实例化一个MediaCodec类通过调用createEncoderByType()方法来进行对媒体文件进 ...

  5. Activity的显式跳转和隐式挑战

    安卓中Activity的跳转几乎是每一个APP都会用到的技术点.而且他的使用时十分简单的. 这里我们先说一下主要的技术要点: 1.在清单文件中注册新的Activity 2.通过意图跳转 这里我们看一下 ...

  6. MySQL中的多表插入更新与MS-SQL的对比

    MySQL多表插入: INSERT INTO tdb_goods_cates (cate_name) SELECT goods_cate FROM tdb_goods GROUP BY goods_c ...

  7. NLP整体流程的代码

    import nltk import numpy as np import re from nltk.corpus import stopwords # 1 分词1 text = "Sent ...

  8. alias这个命令还是很有用的

    这是在知乎看到的一个回答. 我一开始学习linux命令的时候觉得这个alias命令很奇怪,为什么要给别人起个别名呢?有什么好处? 因为当时接触的是比较简单的命令 比如ls -al的这种短小的命令,对a ...

  9. 算法Sedgewick第四版-第1章基础-004一封装交易对象

    1. package ADT; /****************************************************************************** * Co ...

  10. noi.ac day3t2 染色

    传送门 分析 dp[i][j]为考虑前i个位置,[i-j+1,i]中的颜色互不相同,并且ai-j与这段区间中的某一个位置颜色相同 我们枚举第i+1个位置和[i-j+1,i]中的哪一个颜色相同或者全部不 ...