CSS的一些实用例子

最新推荐文章于 2024-08-26 17:02:51 发布
最新推荐文章于 2024-08-26 17:02:51 发布
阅读量650 收藏 1
点赞数
文章标签： css html javascript 脚本 div class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youshini/article/details/6499987
版权

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

Code:
  1.   
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  3. <html>   
  4.     <head>   
  5.         <title>css11.html</title>   
  6.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
  7.         <style type="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>   
  23.   
  24.     </head>   
  25.   
  26.     <body>   
  27.         <div class="hide">     //将不显示
  28.             <img src="smile.gif" alt="">   
  29.         </div>   
  30.         <div class="show">   
  31.             <img src="cry.gif" alt="">   
  32.         </div>   
  33.   
  34.     </body>   
  35. </html>  

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

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

Code:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  2. <html>   
  3.     <head>   
  4.         <title>css12.html</title>   
  5.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
  6.         <style type="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>   
  23.   
  24.     </head>   
  25.   
  26.     <body>   
  27.         <p class="hand">   
  28.             Give me a hand!（手形）   
  29.         </p>   
  30.         <p class="crosshair">   
  31.             Give me a crosshair（精确定位）!   
  32.         </p>   
  33.         <p class="move">   
  34.             Give me a Move（移动）!   
  35.         </p>   
  36.         <p class="e-resize">   
  37.             Give me a e-resize(箭头方向朝右)!   
  38.         </p>   
  39.         <p class="ne-resize">   
  40.             Give me a ne-resize(箭头方向朝右上)!   
  41.         </p>   
  42.         <p class="nw-resize">   
  43.             Give me a nw-resize(箭头方向朝左上)!   
  44.         </p>   
  45.         <p class="n-resize">   
  46.             Give me a n-resize(上)!   
  47.         </p>   
  48.         <p class="se-resize">   
  49.             Give me a se-resize(左下)!   
  50.         </p>   
  51.         <p class="s-resize">   
  52.             Give me a s-resize(下)!   
  53.         </p>   
  54.         <p class="w-resize">   
  55.             Give me a w-resize(左)!   
  56.         </p>   
  57.         <p class="text">   
  58.             Give me a text(文本)!   
  59.         </p>   
  60.         <p class="wait">   
  61.             Give me a wait(等待)!   
  62.         </p>   
  63.         <p class="help">   
  64.             Give me a help(帮助)!   
  65.         </p>   
  66.   
  67.     </body>   
  68. </html>  

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

Code:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  2. <html>   
  3.     <head>   
  4.         <title>setHome.html</title>   
  5.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
  6.         <script language="JavaScript" type="text/javascript">   
  7.             function set()   
  8.             {   
  9.                 sethome.style.behavior="url(#default#homepage)";   
  10.                 sethome.setHomePage(http://www.google.com);   
  11.             }   
  12.         </script>   
  13.   
  14.     </head>   
  15.   
  16.     <body>   
  17.         <span id="sethome" οnclick="set()" style="CURSOR: hand"><br>将本站设置为首页</span>   
  18.     </body>   
  19. </html>  

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

Code:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  2. <html>   
  3.     <head>   
  4.         <title>movPic.html</title>   
  5.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
  6.         <style type="text/css">   
  7.             <!--  
  8.             #topdown{   
  9.                 position:absolute;   
  10.                 left:12;   
  11.                 top:222;   
  12.                 }   
  13.             -->   
  14.         </style>   
  15.         <script language="JavaScript" type="text/javascript">   
  16.             function move(x, y)   
  17.             {   
  18.                 topdown.style.left = x;   
  19.                 topdown.style.top = y;   
  20.             }   
  21.         </script>   
  22.   
  23.     </head>   
  24.   
  25.     <body onmousemove="move(event.x, event.y)">    /×事件驱动×/
  26.         <div id="topdown">        /×id 样式修饰×/
  27.             <img src="smile.gif" alt="">    /*层标记 div×/
  28.         </div>   
  29.     </body>   
  30.   
  31. </html>  

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

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

 

标叔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
20多个CSS样式表精选案例（实用、常用案例）
08-24
个人精心整理收藏，值得推荐！包括《网页设计标准尺寸》文档 搜索引擎 DIV层居中 无图片实现圆角框 精典布局等实用案例！无论新手老手都值得收藏！
CSS button例子
05-31
通过下载并研究“32、分享50个CSS超炫丽button样式代码下载”的文件，你可以发现更多创新的CSS技巧，这些技巧涵盖了上述各个点，帮助你在实际项目中创建出既美观又实用的按钮。不断实践和学习这些例子，你的CSS技能...
30个超棒的CSS应用实例
weixin_30691871的博客
02-07 303
这 篇文章是很早之前在博客园看到的，收藏在网摘里，今天再看发现实在很棒，转载过来方便以后参考用，最棒的地方是这些效果的实现都只是利用CSS+HTML 来实现的，基本上没有用到什么FLASH或JS脚本，大家也可以看看有那种效果是适合你网站的,简单修改一下就可以拿来用了，原文地 址：http://news.cnblogs.com/n/43821/。 今天，我为大家收集精选了30个使用纯C...
CSS使用
LXMNIIT的专栏
05-07 424
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:
14个实用的CSS在线实例教程
...
10-04 1118
CSS在线实例教程
常用的css小例子
weixin_41970780的博客
11-17 542
常用的css小例子 第一种效果： 录制GIF有点卡，但是你单纯运行代码美滋滋哦！ 上代码： <span class="shake">弹</span> <style> .shake{ width:40px; height:40px; display:block; background:lightgreen; border-radius:50%; margin:5px; color:#fff; font-siz
css高级实用例子
07-12
在CSS（层叠样式表）领域，掌握高级实用技巧能够帮助开发者创建更加高效、美观且易于维护的网页设计。这个压缩包文件包含了多个项目实例，每个项目都可能涵盖不同的CSS高级技术，旨在通过实践来深化对CSS的理解。...
5种简单实用的css列表样式实例
03-02
这篇文章中我们给出几个实用的例子，你可以把他们直接用到自己的工作中。我们从一个带有动画效果的垂直列表开始，接着是一个图文混排的例子，然后是一个只有图片的list例子跟一个水平菜单的例子，最后是一个以放大...
实用CSS 文字收集
10-30
这个属性可以用来实现一些有趣的效果，例如在页面上隐藏文字，仅作为辅助性内容供搜索引擎抓取。 ##### 示例代码： ```css /* 将文字隐藏在页面之外，只对搜索引擎可见 */ p.hidden-text { text-indent: -9999em; ...
css小实例
Zero_ying的博客
07-08 276
界面运行效果如下所示： 界面代码如下： 由于系统会为某些元素设置默认的margin值或者padding值，所以先要清除所有元素的margin和padding值。即：*{margin 0； padding 0；}；此外还要将<li>标签中的list-style设为none。对于box1，只给了高度height的值是因为对于浏览器来说，不写宽度就默认从浏览器的最左边到最右边。 ...
css样式应用实例基础实例
09-27
css样式 index 样式应用css样式 index 样式应用基础的实力引用 实例
CSS的高级应用实例
09-13
CSSchange Ajax的局部更新。 CSSglass 用CSS制作会发光的字体。 CSSmenu 用Ajax+CSS制作动态菜单。 CSSshadow 用CSS制作投影效果。
css常用综合案例
Evan's learning log
02-14 1128
一.基本css样例         1.圆角            效果图：                       设计思想，利用一组高为1px的块状元素逐行缩进，达到圆角的效果。这里使用b元素（简单只有一个字母）。圆角边框示意图： 源码如下： #container{ margin:0 20%;
CSS基础及应用实例
itlly的博客
08-23 350
一、CSS简介 1.什么是css 重叠样式表 主要是负责标签的样式 美化页面 一个网页分三大部分 结构层： 主要由html负责 负责页面的结构 表现层： 主要由css负责 页面的展示样式 美化页面 行为层： 主要由js负责 负责页面和用户的交互效果 Css是单独的一种文件类型 后 Css的三种引入方式后缀为.css的文件 2.css的三种引入方式 行间样式：给标签添加style属性 值就是...
【CSS实例】
qll123的专栏
02-21 2593
学习目标： css样式学习、总结，知识巩固 学习内容： 在这里我将会发布一些自己学习过程中完成的css实例，可能是跟着网上学习的练习作品，也可能是自的随意的一个想法。每个作品中会列出编写思路，和编写过程中出现的问题。 目的就是巩固css的基础知识，防止遗忘 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 一、css画时钟 1、涉及到的css技术 利用css绘制圆形 .circle{ ...
CSS 实用实例
开发之路
08-13 641
背景颜色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经典案例
热门推荐
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
css 的常用案例
gaodda的博客
10-29 1465
Css 的几个常用案例 1. css 编写三角形 2. css编写燕尾角 3. css编写多边形 4. css伪类的妙用 5. css浮动的清除 6. css响应式页面的编写 Created with Raphaël 2.2.0开始我的操作确认？结束yesno ...
CSS中禁用DOM事件
最新发布
bingmoujs的博客
08-26 513
表示元素不应对鼠标事件进行响应。这包括鼠标的点击、悬停和其他鼠标相关的动作。这个属性指定当鼠标指针设备（如鼠标）在元素上时，事件应该有什么表现。
CSS+Div入门：打造实用菜单与样式控制技巧
本篇文章主要介绍了如何使用CSS+DIV技术来制作实用的网页菜单，涵盖了多个关键知识点。首先，文章对CSS（层叠样式表）进行了概念介绍，指出它是用于控制网页样式、实现样式与内容分离的重要工具，可以解决HTML在设计...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值