关于对CSS中超链接那部分的设置
a:link{ //正常下的超链接
color:red; //超链接的颜色
text-decoration:none; //超链接没有下划线
}
a:visited{ //访问过的超链接
color:yellow; //访问过的超链接颜色
text-decoration:none; //访问过的超链接没有下划线
}
a:hover{ //鼠标悬停超链接
color: blue; //鼠标悬停超链接颜色
text-decoration:underline; //鼠标悬停超链接带下划线
}
a:active{ //鼠标点击超链接时
color:black; //鼠标点击超链接时颜色
text-decoration:none; //鼠标点击超链接时没有下划线
}
超链接实现按钮效果:
<head>
<style>
a{
margin:9px; //超链接之间的距离
background-color:#3399ff; //超链接背景颜色
}
a:link,a:visited{ //正常超链接和访问过的超链接
padding:4px 10px 4px 10px; //超链接文字与背景四周间距
border-top:1px solid #eeeeee; //超链接上边框1px 实线 颜色
border-left:1px solid #eeeeee; //超链接左边框1px 实线 颜色
border-right:1px solid #717171; //超链接右边框1px 实线 颜色
border-bottom:1px solid #717171; //超链接下边框1px 实线 颜色
}
a:hover{
border-top:1px solid #717171; //超链接上边框1px 实线 颜色
border-left:1px solid #717171; //超链接左边框1px 实线 颜色
border-right:1px solid #eeeeee; //超链接右边框1px 实线 颜色
border-bottom:1px solid #eeeeee; //超链接下边框1px 实线 颜色
padding:5px 8px 3px 12px; //超链接文字与背景四周间距
}
</style>
</head>
<body>
<a href="#">中国</a>
<a href="#">中国</a>
<a href="#">美国</a>
<a href="#">刊国</a>
<a href="#">日本</a>
</body>
CSS设置鼠标特效:
a.help:hover{
cursor:help; //当鼠标悬停到超链接时,鼠标的指针变成帮助指针
}
下面是全部cursor 的 css 效果
十字准心 cursor:crosshair;
手 cursor:pointer;
cursor:hand;
写两个是为了照顾IE5,它只认hand。
等待/沙漏 cursor:wait;
帮助 cursor:help;
无法释放 cursor:no-drop;
文字/编辑 cursor:text;
可移动对象 cursor:move;
向上改变大小 cursor:n-resize;
向下改变大小 cursor:s-resize;
向右改变大小 cursor:e-resize;
向左改变大小 cursor:w-resize;
向上右改变大小 cursor:ne-resize;
向上左改变大小 cursor:nw-resize;
向下右改变大小 cursor:se-resize;
向下左改变大小 cursor:sw-resize;
自动 cursor:auto;
禁止 cursor:not-allowed;
处理中 cursor:progress;
系统默认 cursor:default;
用户自定义 cursor:url('#');#=光标文件地址(注意文件格式必须为.cur或.ani)。
利用css设置滚动条效果:
scrollbar-arrow-color:red; //设置滚动条箭头颜色
scrollbar-base-color:balck; //设置滚动条基本颜色
scrollbar-face-color:yellow ; //设置滚动条基本颜色
scrollbar-darkshadow-color:blue; // //设置滚动条背面线的颜色
scrollbar-3dlight-color:red; //设置滚动条前面线的颜色
scrollbar-shadow-color:blue; //设置滚动条背面线的颜色
关于对CSS中超链接那部分的设置的更多相关文章
- css中的border-collapse属性如何设置表格边框线?(代码示例)
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...
- 有关CSS中字体响应式的设置
在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...
- CSS中字体响应式的设置
在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...
- css中background-image背景图片路径设置
web项目中经常会用到background-image:url(),很多小伙伴不知道该怎么写需要的图片路径. 在此之前先要知道几个重要的东东: / 项目根目录 这个不用多说,就是程序 ...
- css中关于table的相关设置
一.设置好看的单边框表格 1.一种实现方式 分别给table标签和td标签设置不在同一方向的border属性,如下table设置‘左上’边框,td设置‘右下’边框.其他设置方式同样可以实现. tabl ...
- CSS中为什么有的元素能够设置高度,而有的元素却不能设置高度与宽度?
可以使用{display:block}将内联元素变为块级元素,同时使用{display:inline}将块级元素变为内联元素. {display:inline-block}又是怎么回事,根据张鑫旭老师 ...
- css中使用rgba和opacity设置透明度的区别
1.使用rgba设置背景色的透明 效果如下: <body> <div id="box"> 你好啊! </div> </body> b ...
- CSS 中如何把 Span 标签设置为固定宽度
一.形如<span>ABC</span>独立行设置SPAN为固定宽度方法如下: span {width:60px; text-align:center; display:blo ...
- transition&transform,CSS中过度和变形的设置
设置样式的过度效果transition-property: none/all; transition-duration:2s;运动时间,默认是0秒 transition-delay:0s; 延迟时间默 ...
随机推荐
- python websocket Django 实时消息推送
概述: WebSocket 是什么? WebSocket 是 HTML5 提供的一种浏览器与服务器间进行全双工通讯的协议.依靠这种协议可以实现客户端和服务器端 ,一次握手,双向实时通信. WebSoc ...
- oracle控制文件问题
下午时连接数据库突然发现连不上了,监听报错找不到服务,于是登录数据库所在服务器,查看监听状态,oracle:lsnrctl status 监听状态正常,登入数据库查看[oracle@frkdb1 ~] ...
- JavaScript之更改闭包内的变量值
var f = function( ) { var x = 1 function fo() { console.log( x++ ) } return fo } var fn = f() fn() ...
- Ajaxpro使用的方法
1.下载Ajaxpro.2.dll 程序中引用 2.web.config配置 <?xml version="1.0" encoding="utf-8"?& ...
- 用户控件 RadioButtonList
public static MvcHtmlString RadioButtonList(this HtmlHelper htmlHelper, string name, string codeCate ...
- [Python学习笔记] turtle库的基本使用
turtle库常用函数 引入turtle模块 import turtle turtle的绘图窗体 #setup()设置窗口大小及位置#setup()可省略turtle.setup(width,heig ...
- spring-aop思想实践demo
需求: 例如我们需要有一个类中每个方法执行前都需要做一个权限校验,必须是有特定权限的账号才能完成该方法的操作. 解决方案: 1.使用父类继承方式,书写该类的父类,然后在父类中定义一个checkPri的 ...
- 一次奇妙的http请求之旅
TCP/IP不是一个协议,而是一个协议族的统称.里面包括IP协议.IMCP协议.TCP协议. 这里有几个需要注意的知识点: 互联网地址:也就是IP地址,一般为网络号+子网号+主机号 域名系统:通俗的来 ...
- EXCEL中,如何引用一个单元格中的数据,作为另一个单元格内容中的一部分?
https://zhidao.baidu.com/question/230715654.html 假设单元格A1值是8(该值由函数计算得出),我要在单元格B1中引用A1的值,但只是作为B1单元格内容中 ...
- Pycharm桌面图标(Fedora)
1.解压pycharm压缩包至/usr/local/pycharm文件夹下 2.在/usr/share/applications/目录下,新建Pycharm.desktop文件,内容如下: [Desk ...