易妖游戏网
您的当前位置:首页精通CSS+DIV网页样式与布局--页面和浏览器元素

精通CSS+DIV网页样式与布局--页面和浏览器元素

来源:易妖游戏网

分享一下我老师大神的人工智能教程!零基础,通俗易懂!

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

               

        在页面和浏览器中,除了文字、图片、表格、表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效、鼠标特效、页面滚动条。首先我们来看一张思维导图:

        

        接着,小编会跟随上述思维导图的足迹,慢慢探寻,丰富的超链接特效中,我们首先来介绍动态超链接,我们来看一下例子的代码和运行的效果:

         动态超链接

<span style="font-size:18px;"><span style="font-size:18px;"><html><head><title>动态超链接</title><style><!--bodybackground:url(bg9.gif); /* 页面背景图片 */ margin:0px; padding:0pxcursor:pointer;}.chara1font-size:12pxbackground-color:#90bcff/* 导航条的背景颜色 */}.chara1 tdtext-align:center;}a:link{       /* 超链接正常状态下的样式 */ color:#005799;    /* 深蓝 */ text-decoration:none;  /* 无下划线 */}a:visited{      /* 访问过的超链接 */ color:#000000;    /* 黑色 */ text-decoration:none;  /* 无下划线 */}a:hover{      /* 鼠标经过时的超链接 */ color:#FFFF00;    /* 黄色 */ text-decoration:underline; /* 下划线 */}--></style>   </head><body><table align="center" cellpadding="1" cellspacing="0"> <tr><td><img src="banner3.jpg" border="0"></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></body></html></span></span>

        运行效果如下所示:

         

         分析一下上面的代码,我们很容易可以看出,首先将一个table标记将页面中的banner分离开来,其次将一个table标记将一个横排的一个菜单,实现一个很漂亮的浏览效果。在这里我们值得一下的是:a:link、a:visited、a:hover来分别设置动态了超链接的效果。我们接下来看看按钮式超链接,我们看看例子代码和运行效果

         按钮式超链接

<span style="font-size:18px;"><html><head><title>按钮超链接</title><style><!--a{          /* 统一设置所有样式 */ font-family: Arial; font-size: .8emtext-align:center; margin:3px;}a:link, a:visited{      /* 超链接正常状态、被访问过的样式 */ color: #A62020padding:4px 10px 4px 10pxbackground-color: #ecd8dbtext-decoration: none; border-top: 1px solid #EEEEEE;  /* 边框实现阴影效果 */ border-left: 1px solid #EEEEEEborder-bottom: 1px solid #717171border-right: 1px solid #717171;}a:hover{        /* 鼠标经过时的超链接 */ color:

因篇幅问题不能全部显示,请点此查看更多更全内容