div+css (6)

 

                                          页面和浏览器元素

一、动态超链接

主要通过这几个属性设置。

a:link{                                                /* 超链接正常状态下的样式 */

       color:#005799;                            /* 深蓝 */

       text-decoration:none;            /* 无下划线 */

}

a:visited{                                     /* 访问过的超链接 */

       color:#000000;                            /* 黑色 */

       text-decoration:none;            /* 无下划线 */

}

a:hover{                                      /* 鼠标经过时的超链接 */

       color:#FFFF00;                           /* 黄色 */

       text-decoration:underline;      /* 下划线 */

}

二、按钮式超链接

a{                                                                    /* 统一设置所有样式 */

      

       font-size: .8em;

       text-align:center;

       margin:3px;

}

a:link, a:visited{                                          /* 超链接正常状态、被访问过的样式 */

       color: #A62020;

       padding:4px 10px 4px 10px;

       background-color: #ecd8db;

       text-decoration: none;

       border-top: 1px solid #EEEEEE;           /* 边框实现阴影效果 */

       border-left: 1px solid #EEEEEE;

       border-bottom: 1px solid #717171;

       border-right: 1px solid #717171;

}

a:hover{                                                    /* 鼠标经过时的超链接 */

       color:#821818;                                          /* 改变文字颜色 */

       padding:5px 8px 3px 12px;                  /* 改变文字位置 */

       background-color:#e2c4c9;                 /* 改变背景色 */

       border-top: 1px solid #717171;            /* 边框变换，实现“按下去”的效果 */

       border-left: 1px solid #717171;

       border-bottom: 1px solid #EEEEEE;

       border-right: 1px solid #EEEEEE;

}

 

       简单的说就是将鼠标经过和未经过区分开，使用不同的边界和字体间隔实现了按钮的效果。它的页面引用很简单。

<a href="#">首页</a>

       <a href="#">心情日记</a>

       <a href="#">学习心得</a>

       <a href="#">工作笔记</a>

       <a href="#">生活琐碎</a>

       <a href="#">其他</a>

 

三、浮雕式超链接

a:link{color:#654300;}

a:visited{color:#654300;}

a:hover{

       color:#FFFFFF;

       text-decoration:none;

       background:url(button2.jpg) no-repeat; /* 变换背景图片 */

}

       简单的说就是变换了背景图片。

 

四、CSS控制鼠标箭头

a.help:hover{                                                    /* “帮助”按钮的样式 */

       cursor:help;                                              /* 变幻鼠标形状 */

}

就是这个cursor属性控制着鼠标箭头。

 

五、页面滚动条

body{                                                              /* 页面滚动条 */

       background-color:#efe5e2;

       scrollbar-3dlight-color: #B0C4DE;

       scrollbar-arrow-color: #34547E;

       scrollbar-base-color: #FF0000;            /* 基调颜色 */

       scrollbar-darkshadow-color: #1D4272;

       scrollbar-face-color: #CFDFF4;

       scrollbar-highlight-color: #FFFFFF;

       scrollbar-shadow-color: #5380BA;

}

.largetext {                                                /* 文本框滚动条 */

       scrollbar-3dlight-color: #B0C4DE;

       scrollbar-arrow-color: #FFFFFF;

       scrollbar-base-color: #8BA9CF;

       scrollbar-darkshadow-color: #436DA3;

       scrollbar-face-color: #34547E;

       scrollbar-highlight-color: #E6ECF4;

       scrollbar-shadow-color: #000000;

}