之前的笔记都存在onenote中,突然想起还有CSDN这种公共平台可以分享一下自己的学习之路
希望能通过这种方式不断激励自己并能和大家一起进步!
链接的四种状态:
首先插入链接
a:link 普通的 未被访问的链接
a:LINK{
color: red;
text-decoration: none;
}
设置链接字体为红色,并不显示下划线
a:visited 用户已访问的链接
a:VISITED{
color: BLUE;
text-decoration: none;
}
设置被点击过的链接为蓝色并不显示下划线
a:hover 鼠标指针位于链接的上方
a:hover{
background-color: red;
text-decoration: none;
}
当鼠标位于链接区域时,链接区域变为红色并不显示下划线
a:active 链接被点击的时刻
一般显示时间很短基本不用考虑,如需设置,类似以上参数即可。
升级操作:按钮式链接
大白话说就是链接展现成按钮区域的样子
部分代码如下:
a:LINK,a:VISITED{
color: #A62020;
text-decoration: none;
padding:4px 10px 4px 10px;
backgound-color:#DDD;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
border-left: 1px solid #EEEEEE;
border-top: 1px solid #EEEEEE;
}
a:HOVER{
color:#821818;
padding:5px 8px 3px 12px;
background-color: #CCC;
border-bottom: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
border-left: 1px solid #717171;
border-top: 1px solid #717171;
首先是要将超链接区域展示成按钮的样子,通过不同的border颜色来体现出按钮的立体感;
其次是当鼠标放置到链接上时,应体现出按钮被按动的样子,依然是通过border颜色的变化以及链接区域颜色的变化来体现。