CSS的一些实用例子

最新推荐文章于 2022-02-21 13:26:36 发布
最新推荐文章于 2022-02-21 13:26:36 发布
阅读量148 收藏
点赞数
分类专栏： ajax 文章标签： CSS JavaScript HTML 脚本 Google ViewUI

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

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"οnclick="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），并随时用鼠标的位置修改对应图片的位置。

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

标叔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
20多个CSS样式表精选案例（实用、常用案例）
08-24
个人精心整理收藏，值得推荐！包括《网页设计标准尺寸》文档 搜索引擎 DIV层居中 无图片实现圆角框 精典布局等实用案例！无论新手老手都值得收藏！
css常用综合案例
Evan's learning log
02-14 1114
一.基本css样例         1.圆角            效果图：                       设计思想，利用一组高为1px的块状元素逐行缩进，达到圆角的效果。这里使用b元素（简单只有一个字母）。圆角边框示意图： 源码如下： #container{ margin:0 20%;
【CSS实例】
qll123的专栏
02-21 2583
学习目标： css样式学习、总结，知识巩固 学习内容： 在这里我将会发布一些自己学习过程中完成的css实例，可能是跟着网上学习的练习作品，也可能是自的随意的一个想法。每个作品中会列出编写思路，和编写过程中出现的问题。 目的就是巩固css的基础知识，防止遗忘 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 一、css画时钟 1、涉及到的css技术 利用css绘制圆形 .circle{ ...
CSS 实用实例
开发之路
08-13 633
背景颜色1. 颜色背景&lt;style type="text/css"&gt;body { font-size: 16px;"&gt;h1 { font-size: 16px;"&gt;h2 { font-size: 16px;"&gt;p { font-size: 16px;"&gt;&lt;/style&gt;2. 图片做为背景（１）body {   backgroun
CSS button例子
05-31
通过下载并研究“32、分享50个CSS超炫丽button样式代码下载”的文件，你可以发现更多创新的CSS技巧，这些技巧涵盖了上述各个点，帮助你在实际项目中创建出既美观又实用的按钮。不断实践和学习这些例子，你的CSS技能...
实用CSS 文字收集
10-30
这个属性可以用来实现一些有趣的效果，例如在页面上隐藏文字，仅作为辅助性内容供搜索引擎抓取。 ##### 示例代码： ```css /* 将文字隐藏在页面之外，只对搜索引擎可见 */ p.hidden-text { text-indent: -9999em; ...
css高级实用例子
07-12
在CSS（层叠样式表）领域，掌握高级实用技巧能够帮助开发者创建更加高效、美观且易于维护的网页设计。这个压缩包文件包含了多个项目实例，每个项目都可能涵盖不同的CSS高级技术，旨在通过实践来深化对CSS的理解。...
ucss:UCSS - 实用 CSS
07-12
UCSS - 实用 CSS 该库是可重用实用程序类的可配置集合，旨在用作静默类或直接用于您的标记。 每个属性都定义为一个值数组，这些值将自动生成多个类（可选）和静默类。 我们支持广泛的属性列表，其中大多数已经预先...
js 实用小例子
07-29
根据给定文件的信息，我们可以提炼出一系列与JavaScript相关的实用知识点，涵盖了从基本的页面操作到时间处理、状态显示以及动画效果等多方面的应用。以下是对这些知识点的详细解析： ### 知识点一：自动播放音频或...
CSS的高级应用实例
09-13
CSSchange Ajax的局部更新。 CSSglass 用CSS制作会发光的字体。 CSSmenu 用Ajax+CSS制作动态菜单。 CSSshadow 用CSS制作投影效果。
css样式应用实例基础实例
09-27
css样式 index 样式应用css样式 index 样式应用基础的实力引用 实例
css 的常用案例
gaodda的博客
10-29 1456
Css 的几个常用案例 1. css 编写三角形 2. css编写燕尾角 3. css编写多边形 4. css伪类的妙用 5. css浮动的清除 6. css响应式页面的编写 Created with Raphaël 2.2.0开始我的操作确认？结束yesno ...
CSS经典案例
热门推荐
Within的博客
07-19 1万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;start&lt;/title&gt; &lt;style&gt; body {background-color:tan;} h1 {color:maroon;font-size:20pt;te
22个常用的css例子
MYF110的博客
05-20 1232
1.简单又好的 Blockquote 样式CSS代码如下: blockquote { background:#f9f9f9; border-left:10px solid #ccc; margin:1.5em 10px; padding:.5em 10px; quotes:"\201C""\201D""\2018""\2019"; } blockquote:before ...
5个很常用的CSS3网页小实例
web前端开发
09-11 860
来源 | https://www.cnblogs.com/jr1993/p/4743914.html由于最近比较忙，自己也没有很充裕的时间可以去做比较丰富的案例。我挤出时间来制作这几个很...
70多个非常实用的web开发CSS小技巧
u014041540的博客
09-20 1009
1. 文字水平居中 将一段文字置于容器的水平中点，只要设置text-align属性即可： text-align:center;   2. 容器水平居中 先该容器设置一个明确宽度，然后将margin的水平值设为auto即可。 div#container {　width:760px;　margin:0 auto;　}   3. 文字垂直居中 单行文字的垂直居中，只要将行高与容...
30个超棒的CSS应用实例
weixin_30691871的博客
02-07 297
这 篇文章是很早之前在博客园看到的，收藏在网摘里，今天再看发现实在很棒，转载过来方便以后参考用，最棒的地方是这些效果的实现都只是利用CSS+HTML 来实现的，基本上没有用到什么FLASH或JS脚本，大家也可以看看有那种效果是适合你网站的,简单修改一下就可以拿来用了，原文地 址：http://news.cnblogs.com/n/43821/。 今天，我为大家收集精选了30个使用纯C...
CSS使用
LXMNIIT的专栏
05-07 421
css样式使用实例 //css样式的书写//元素ID#tb1{width:100%;height:80px;background-color:#FFD700;padding:4px;font-family:verdana,tahoma;font-weight:bold;}#tb2{width:100%;padding:4px;font-family:verdana,tahoma;margin:
CSS+Div入门：打造实用菜单与样式控制技巧
本篇文章主要介绍了如何使用CSS+DIV技术来制作实用的网页菜单，涵盖了多个关键知识点。首先，文章对CSS（层叠样式表）进行了概念介绍，指出它是用于控制网页样式、实现样式与内容分离的重要工具，可以解决HTML在设计...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值