`

CSS的一些实用例子

    博客分类：
  • ajax
CSSJavaScriptHTML脚本Google 
阅读更多

// 结合脚本语言动态的控制元素在页面中出现的位置。

Code:
  2. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
  3. <html>
  4. <head>
  5. <title>css11.html</title>
  6. <metahttp-equiv="content-type"content="text/html;charset=UTF-8">
  7. <styletype="text/css">
  8. <!--
  9. div.show{
  10. position:absolute;
  11. top:10;
  12. left:200;
  13. visibility:visible;
  14. }
  15. div.hide{
  16. position:absolute;
  17. top:120;
  18. left:200;
  19. visibility:hidden;
  20. }
  21. -->
  22. </style>
  24. </head>
  26. <body>
  27. <divclass="hide"> //将不显示
  28. <imgsrc="smile.gif"alt="">
  29. </div>
  30. <divclass="show">
  31. <imgsrc="cry.gif"alt="">
  32. </div>
  34. </body>
  35. </html>

【注】div块标记，该标记可以将其内部的图片及文字作为一个整体，及分层进行控制，往往可以实现页面效果的局部改变。

##CSS中的cursor属性改变鼠标指针的形状。

Code:
  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
  2. <html>
  3. <head>
  4. <title>css12.html</title>
  5. <metahttp-equiv="content-type"content="text/html;charset=UTF-8">
  6. <styletype="text/css">
  7. <!--
  8. .hand{cursor:hand;}/*手形*/ //==》class属性值
  9. .crosshair{cursor:crosshair;}/*精确定位“+”字*/
  10. .move{cursor:move;}/*移动*/
  11. .e-resize{cursor:e-resize;}/*箭头朝右方*/
  12. .ne-resize{cursor:ne-resize;}/*箭头朝右上方*/
  13. .nw-resize{cursor:nw-resize;}/*箭头朝左上方*/
  14. .n-resize{cursor:n-resize;}/*箭头朝上方*/
  15. .se-resize{cursor:se-resize;}/*箭头朝右下方*/
  16. .s-resize{cursor:s-resize;}/*箭头朝下方*/
  17. .w-resize{cursor:w-resize;}/*箭头朝左方*/
  18. .text{cursor:text;}/*“I”字型*/
  19. .wait{cursor:wait;}/*等待*/
  20. .help{cursor:help;}/*帮助*/
  21. -->
  22. </style>
  24. </head>
  26. <body>
  27. <pclass="hand">
  28. Givemeahand!（手形）
  29. </p>
  30. <pclass="crosshair">
  31. Givemeacrosshair（精确定位）!
  32. </p>
  33. <pclass="move">
  34. GivemeaMove（移动）!
  35. </p>
  36. <pclass="e-resize">
  37. Givemeae-resize(箭头方向朝右)!
  38. </p>
  39. <pclass="ne-resize">
  40. Givemeane-resize(箭头方向朝右上)!
  41. </p>
  42. <pclass="nw-resize">
  43. Givemeanw-resize(箭头方向朝左上)!
  44. </p>
  45. <pclass="n-resize">
  46. Givemean-resize(上)!
  47. </p>
  48. <pclass="se-resize">
  49. Givemease-resize(左下)!
  50. </p>
  51. <pclass="s-resize">
  52. Givemeas-resize(下)!
  53. </p>
  54. <pclass="w-resize">
  55. Givemeaw-resize(左)!
  56. </p>
  57. <pclass="text">
  58. Givemeatext(文本)!
  59. </p>
  60. <pclass="wait">
  61. Givemeawait(等待)!
  62. </p>
  63. <pclass="help">
  64. Givemeahelp(帮助)!
  65. </p>
  67. </body>
  68. </html>

//-------css+javascript 脚本实现的动态交互效果（设置首页）-----

Code:
  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
  2. <html>
  3. <head>
  4. <title>setHome.html</title>
  5. <metahttp-equiv="content-type"content="text/html;charset=UTF-8">
  6. <scriptlanguage="JavaScript"type="text/javascript">
  7. functionset()
  8. {
  9. sethome.style.behavior="url(#default#homepage)";
  10. sethome.setHomePage(http://www.google.com);
  11. }
  12. </script>
  14. </head>
  16. <body>
  17. <spanid="sethome"onclick="set()"style="CURSOR:hand"><br>将本站设置为首页</span>
  18. </body>
  19. </html>

//-----------进一步丰富鼠标的效果------------

Code:
  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
  2. <html>
  3. <head>
  4. <title>movPic.html</title>
  5. <metahttp-equiv="content-type"content="text/html;charset=UTF-8">
  6. <styletype="text/css">
  7. <!--
  8. #topdown{
  9. position:absolute;
  10. left:12;
  11. top:222;
  12. }
  13. -->
  14. </style>
  15. <scriptlanguage="JavaScript"type="text/javascript">
  16. functionmove(x,y)
  17. {
  18. topdown.style.left=x;
  19. topdown.style.top=y;
  20. }
  21. </script>
  23. </head>
  25. <bodyonmousemove="move(event.x,event.y)"> /×事件驱动×/
  26. <divid="topdown"> /×id 样式修饰×/
  27. <imgsrc="smile.gif"alt=""> /*层标记 div×/
  28. </div>
  29. </body>
  31. </html>

解释：使用层标记div将图片单独放在一层中，然后使用css层叠样式表定义了该图片的位置，再与onmouseover事件结合，追踪鼠标的位置（event.x 和event.y），并随时用鼠标的位置修改对应图片的位置。

效果：页面中显示一张始终跟着鼠标指针移动的笑脸。

分享到：
| XHTML走马观花
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css高级实用例子

    在CSS（层叠样式表）领域，掌握高级实用技巧能够帮助开发者创建更加高效、美观且易于维护的网页设计。这个压缩包文件包含了多个项目实例，每个项目都可能涵盖不同的CSS高级技术，旨在通过实践来深化对CSS的理解。...

    CSS button例子

    通过下载并研究“32、分享50个CSS超炫丽button样式代码下载”的文件，你可以发现更多创新的CSS技巧，这些技巧涵盖了上述各个点，帮助你在实际项目中创建出既美观又实用的按钮。不断实践和学习这些例子，你的CSS技能...

    CSS的好例子

    本文将深入探讨CSS的核心概念、应用场景以及一些实用技巧，以"CSS的好例子"为出发点，帮助你更好地理解和运用CSS。 1. **CSS基本概念** - **选择器**: CSS的选择器是用于定位HTML或XML文档中元素的关键工具。例如...

    AjAX CSS 小例子

    这个名为"AjAX CSS 小例子"的压缩包文件提供了一些实用的示例，帮助我们深入理解这两者在实际应用中的工作方式。 首先，让我们关注AJAX。AJAX是一种创建动态网页的技术，它允许网页在不重新加载整个页面的情况下与...

    css菜单例子与js文件

    在这个"css菜单例子与js文件"的压缩包中，我们可以探讨如何结合两者来创建功能丰富的网页导航菜单。 首先，CSS菜单设计是网页界面设计中的核心部分，它帮助用户高效地浏览网站内容。一个良好的CSS菜单应该具备清晰...

    css网页特效、css属性例子

    在这个“css网页特效、css属性例子”的资源包中，你将找到一系列用于创建精美网页特效的CSS代码实例，这些都是实践中的应用，旨在帮助你提升网页设计的创意和实用性。 首先，CSS特效可以分为多种类型，如动画、过渡...

    css&javascript小例子

    "css&javascript小例子"这个压缩包可能包含了一些用于学习和实践这两种语言基础及应用的小项目。 首先，CSS是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它允许开发者控制网页的...

    js 实用小例子

    根据给定文件的信息，我们可以提炼出一系列与JavaScript相关的实用知识点，涵盖了从基本的页面操作到时间处理、状态显示以及动画效果等多方面的应用。以下是对这些知识点的详细解析： ### 知识点一：自动播放音频或...

    将AE制作的动画导出为CSS代码

    在这个例子中，提到的文件“ae2css-master”可能是一个这样的工具，它可能包含源码和说明，供开发者自定义使用。 2. **设置AE动画**：在AE中创建所需的动画，确保所有的动画效果都基于关键帧。这些关键帧将对应于...

    CSS3、1000+案例.zip

    5. **简单实用的点击切换选项卡代码**：选项卡式布局在网页设计中很常见，这个案例提供了一种使用CSS3实现的简单且高效的选项卡切换机制，通过伪类和transition，实现平滑的切换动画。 6. **CSS3动画下拉菜单 带...

    两个div+css整站的例子

    总结起来，“两个div+css整站的例子”是一个理想的实践平台，它将帮助你深入理解Div和CSS在构建网站时的作用，以及如何通过它们创造出既美观又实用的网页。通过实际操作，你可以掌握网页布局的多种技巧，提升自己的...

    css3_倒计时_实用网页特效

    本篇将深入探讨如何利用CSS3来创建倒计时网页特效，并结合实际应用中的例子进行讲解。 首先，CSS3的动画和过渡特性是实现倒计时效果的基础。通过`@keyframes`规则，我们可以定义一个时间序列，使得元素在不同时间点...

    CSS实用教程.pdf

    CSS（Cascading Style Sheets）层叠样式表是用于控制网页外观的一套规则，由W3C（World Wide ...通过阅读CSS实用教程，开发者可以掌握这些技能，并在网页设计和开发中灵活运用，以实现符合标准并且兼容多浏览器的网页。

    用js实现换肤的一个例子，div css的，很实用。

    在这个例子中，`index.htm`可能包含了用于换肤的按钮或下拉菜单，以及应用皮肤样式的`div`元素。 2. **CSS**： `css`文件夹可能包含多个CSS文件，每个文件代表一种皮肤样式。这些文件定义了各种元素的颜色、字体、...

    20个超漂亮实用的纯CSS web2.0导航菜单模板

    本资源集合了20个超漂亮且实用的纯CSS Web2.0导航菜单模板，它们完全基于CSS（Cascading Style Sheets）编写，无需JavaScript或其他脚本语言，易于定制和整合到你的项目中。 首先，我们来了解什么是CSS。CSS是一种...

    很经典的CSS蓝色竖导航，方便实用。

    本资源是一个经典的CSS蓝色竖向导航栏的示例，适用于构建网页的导航结构，既实用又美观。下面将详细解释这个经典案例中的关键知识点。 1. **CSS布局**： - **Flexbox布局**：现代CSS中的Flexbox模型（弹性盒布局）...

    基于JS+CSS实现实用的信息提示框演示代码.zip

    在这个例子中，CSS 将被用来设计提示框的外观，包括颜色、字体、边框、阴影、过渡效果等。 3. **DOM（文档对象模型）操作**：JavaScript 可以通过 DOM 来操纵 HTML 元素。在提示框的实现中，JS 会创建、查找或修改 ...

    css3文字特效_css3火焰文字_css3文字渐变代码

    在现代网页设计中，CSS3（层叠样式表第三版）已经成为了不可或缺的一部分，它带来了丰富的视觉效果，其中就包括各种炫酷的文字特效。...在掌握这些技术的同时，也要灵活运用，创造出既美观又实用的设计。

    《CSS网站布局实战》—实例源码包

    选例实用，讲解透彻。 本书内容丰富，注重思维方法与实践应用，适合初、中级网页设计爱好者和希望使用Web标准对原有网页进行重构的专业网页设计师，同时也是任何网站开发相关人员手中不可缺少的资料。

    一套基于纯JS+CSS实现的漂亮动画效果菜单源码例子

    本示例提供了一套基于纯JavaScript (JS) 和CSS实现的漂亮动画效果菜单，这是一套用于增强网站视觉吸引力和操作体验的实用工具。我们将深入探讨这个源码例子中的关键知识点。 首先，JavaScript是前端开发中不可或缺...

Magicbox
Global site tag (gtag.js) - Google Analytics