精通CSS+DIV网页样式与布局页面和浏览器元素_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:51:061158浏览
在页面和浏览器中，除了文字、图片、表格、表单等，还有很多各种各样的元素，在上篇博文中，小编主要简单的介绍了一下在CSS中如何设置表格和表单，今天小编主要简单介绍一下丰富的超链接特效、鼠标特效、页面滚动条。首先我们来看一张思维导图：
接着，小编会跟随上述思维导图的足迹，慢慢探寻，丰富的超链接特效中，我们首先来介绍动态超链接，我们来看一下例子的代码和运行的效果：
动态超链接
<span style="font-size:18px;"><span style="font-size:18px;"><title>动态超链接</title>
<style><!--body{ background:url(bg9.gif); /* 页面背景图片 */ margin:0px; padding:0px; cursor:pointer;}.chara1{ font-size:12px; background-color:#90bcff; /* 导航条的背景颜色 */}.chara1 td{ text-align:center;}a:link{ /* 超链接正常状态下的样式 */ color:#005799; /* 深蓝 */ text-decoration:none; /* 无下划线 */}a:visited{ /* 访问过的超链接 */ color:#000000; /* 黑色 */ text-decoration:none; /* 无下划线 */}a:hover{ /* 鼠标经过时的超链接 */ color:#FFFF00; /* 黄色 */ text-decoration:underline; /* 下划线 */}--></style> <table align="center" cellpadding="1" cellspacing="0"> <tr><td><img src="banner3.jpg" border="0" alt="精通CSS+DIV网页样式与布局页面和浏览器元素_html/css_WEB-ITnose" ></td></tr>
</table>
<table width="600px" cellpadding="2" cellspacing="2" class="chara1" align="center"> <tr> <td><a href="#">首页</a></td> <td><a href="#">心情日记</a></td> <td><a href="#">Free</a></td> <td><a href="#">一起走到</a></td> <td><a href="#">从明天起</a></td> <td><a href="#">纸飞机</a></td> <td><a href="#">下一站</a></td> </tr>
</table></span></span> 运行效果如下所示：
分析一下上面的代码，我们很容易可以看出，首先将一个table标记将页面中的banner分离开来，其次将一个table标记将一个横排的一个菜单，实现一个很漂亮的浏览效果。在这里我们值得一下的是：a:link、a:visited、a:hover来分别设置动态了超链接的效果。我们接下来看看按钮式超链接，我们看看例子代码和运行效果
按钮式超链接
<span style="font-size:18px;"><title>按钮超链接</title>
<style><!--a{ /* 统一设置所有样式 */ font-family: Arial; 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;}--></style> <a href="#">首页</a> <a href="#">心情日记</a> <a href="#">学习心得</a> <a href="#">工作笔记</a> <a href="#">生活琐碎</a> <a href="#">其他</a></span> 运行效果如下：
这几个超链接长成了按钮，当鼠标移上去的时候，分别进行了变化，那么他在CSS中又是怎么实现的呢？我们来分析一下代码，首先一个a标记，她是对整个的按钮进行了统一的设置；a:link与a:visited采用了一样的设置，这里边的border-top与border-left用了同一种颜色，border-bottom与border-right使用了同一种颜色，这就实现了一种阴影的效果；而在hover中巧妙的把这两种颜色替换，给人一种感觉如同一个按钮，我们继续看浮雕式超链接，我们来看一下例子代码和运行效果：
浮雕式超链接
<span style="font-size:18px;"><title>浮雕超链接</title>
<style><!--body{ padding:0px; margin:0px; background-color:#f5eee1;}table.banner{ background:url(banner1_bg.jpg) repeat-x; width:100%;}table.links{ background:url(button1_bg.jpg) repeat-x; font-size:12px; width:100%}a{ width:80px; height:32px; padding-top:10px; text-decoration:none; text-align:center; background:url(button1.jpg) no-repeat; /* 超链接背景图片 */}a:link{color:#654300;}a:visited{color:#654300;}a:hover{ color:#FFFFFF; text-decoration:none; background:url(button2.jpg) no-repeat; /* 变换背景图片 */}--></style> <table cellpadding="0" cellspacing="0" class="banner"> <tr><td><img src="banner1_left.jpg" border="0" alt="精通CSS+DIV网页样式与布局页面和浏览器元素_html/css_WEB-ITnose" ></td></tr>
</table>
<table cellpadding="0" cellspacing="0" class="links"> <tr><td>
<a href="#">首页导读</a><a href="#">在线用户</a><a href="#">查询网友</a><a href="#">在线好友</a><a href="#">好友名单</a><a href="#">查看讯息</a><a href="#">发送讯息</a>
</td></tr>
</table></span> 运行效果如下所示：
浮雕按钮好像是浮出纸面一样，当鼠标放上去的时候，她的变化比刚才的按钮来的更加绚丽，分析一下我们的代码，正文部分依然很简单，一个table、一个banner，然后是无数个a标记并排，表示的是超链接，重点的是，将这一横的table标记设置成了一幅背景图片，table.banner将一个小图片进行了重复。我们看看CSS控制鼠标箭头，看看我们的例子代码和运行效果：
CSS控制鼠标箭头
<span style="font-size:18px;"><title>鼠标变幻超链接</title>
<style><!--body{ padding:0px; margin:0px; background-color:#efe5e2;}table.banner{ background:url(banner2_bg.jpg) repeat-x; width:100%;}table.links{ background:url(button3_bg.jpg) repeat-x; font-size:12px; width:100%}a{ width:80px; height:32px; padding-top:10px; text-decoration:none; text-align:center; background:url(button3.jpg) no-repeat; /* 超链接背景图片 */}a:link, a visited{color:#2d2d26;}a:hover{ color:#FFFFFF; text-decoration:none; background:url(button4.jpg) no-repeat; /* 变换背景图片 */}a.help:hover{ /* “帮助”按钮的样式 */ cursor:help; /* 变幻鼠标形状 */}--></style> <table cellpadding="0" cellspacing="0" class="banner"> <tr><td><img src="banner2_left.jpg" border="0" alt="精通CSS+DIV网页样式与布局页面和浏览器元素_html/css_WEB-ITnose" ></td></tr>
</table>
<table cellpadding="0" cellspacing="0" class="links"> <tr><td>
<a href="#">首页导读</a><a href="#">推荐版面</a><a href="#">推荐文章</a><a href="#">收藏夹</a><a href="#">我的信箱</a><a href="#">休闲娱乐</a><a href="#" class="help">帮助</a>
</td></tr>
</table></span> 运行效果如下所示：
当我们把鼠标指向帮助的时候，鼠标的右上角就会出现一个小问号，我们对帮助这个按钮单独设置了一个class类，cursor：help，当然她的值还有很多，不但有help。小伙伴可以自己动手试一下。最后我们来看一个页面滚动条的例子代码和运行效果：
页面滚动条
<span style="font-size:18px;"><title>页面滚动条</title>
<style><!--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;}--></style> <textarea rows="6" cols="50" class="largetext">.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;}</textarea><p>CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。它以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景、整体排版等等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引发了网页设计的一个又一个新高潮，使用CSS设计的优秀页面层出不穷。</p></span> 运行效果如下：
如上图运行效果所示，这个滚动条不再是IE所默认的效果，而是一个非常绚丽的蓝色；我们将页面缩小，同样看到右边的滚动条也在变幻，码十分的简单，scrollbar有很多很多属性，小伙伴们可以自己动手来试试。
小编寄语：该博文小编主要简单的介绍了CSS中关于如何设置页面和浏览器的相关知识点，总共分为三个部分进行详细介绍，包括超链接特效，CSS控制鼠标箭头，页面滚动条，其中详细介绍了超链接的特效，超链接特效包括动态超链接，按钮式超链接和浮雕式超链接，在动态超链接中我们首先将一个table标记将页面中的banner分离开来，其次将一个table标记将一个横排的一个菜单，实现一个很漂亮的浏览效果。在这里我们值得一下的是：a:link、a:visited、a:hover来分别设置动态了超链接的效果；按钮式连接首先一个a标记，她是对整个的按钮进行了统一的设置；a:link与a:visited采用了一样的设置，这里边的border-top与border-left用了同一种颜色，border-bottom与border-right使用了同一种颜色，这就实现了一种阴影的效果；而在hover中巧妙的把这两种颜色替换，给人一种感觉如同一个按钮；最后浮雕式连接一个table、一个banner，然后是无数个a标记并排，表示的是超链接，重点的是，将这一横的table标记设置成了一幅背景图片，table.banner将一个小图片进行了重复，CSS的内容并不困难，难就难在你是否自己真正动手去时间，BS学习，未完待续......