【免费】css实例欣赏资源-CSDN文库

共63个文件

htm：34个

jpg：21个

gif：6个

需积分: 0 195 浏览量更新于2008-07-14 收藏 406KB RAR 举报

在IT行业中，CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它控制了网页元素的布局、颜色、字体、尺寸以及整体视觉效果。这个名为"css实例欣赏"的资源集合，显然是为了展示和学习CSS的各种应用技巧和美学设计。 CSS的核心在于选择器和声明。选择器定位你要改变样式的HTML元素，而声明则定义元素的具体样式，通常由属性和值组成。例如，`p {color: red; font-size: 16px;}` 这个例子中，`p`是选择器，`color`和`font-size`是属性，`red`和`16px`是对应的值，它们使得所有段落文本变为红色且字体大小为16像素。在实际应用中，CSS可以通过内联样式、内部样式表和外部样式表三种方式引入。内联样式是将CSS直接写在HTML元素的`style`属性中，但这种方式不利于维护和重用。内部样式表通常放在`<head>`标签内的`<style>`标签中，适用于整个页面的样式统一。外部样式表则是以`.css`文件形式存在，可以被多个页面共享，有利于代码组织和维护。 `div`标签在CSS布局中扮演重要角色，它是一个无语义的容器元素，常用来组织页面结构。通过CSS，我们可以设置`div`的宽度、高度、边距、填充等属性，实现复杂的布局设计。比如，我们可以用`display: flex`或`grid`创建响应式布局，适应不同设备屏幕。 ASP.NET是一种Microsoft开发的服务器端Web应用程序框架，它可以与CSS一起使用，来构建动态网站。在ASP.NET中，CSS可以应用于服务器控件，同样通过类名选择器来设定样式。这使得开发者能保持前后端样式的一致性，提高开发效率。标签中的"css实例"可能包含各种CSS效果的示例，如阴影、过渡、动画、响应式设计等。这些实例可以帮助初学者理解CSS的实际应用，提升设计能力。同时，"asp.net"表明这些实例可能也涉及到ASP.NET环境下的CSS实践，这将对学习如何在.NET平台上利用CSS进行网页开发大有裨益。 "css实例欣赏"这个资源包很可能是为了提供一系列精心设计的CSS样式示例，涵盖基础到高级的技巧，包括但不限于布局、色彩、字体、动画等。同时，结合ASP.NET的使用，可以帮助开发者了解在实际项目中如何有效地应用CSS进行Web开发。通过研究和实践这些实例，无论是初学者还是经验丰富的开发者，都能深化对CSS的理解，提升Web界面的设计水平。

收起资源包目录

css实例欣赏.rar （63个子文件）

css实例欣赏

csstx17.htm 7KB

csstx12.htm 7KB

csstx16.htm 8KB

csstx05.htm 7KB

csstx13.htm 8KB

csstx06.htm 7KB

csstx01.htm 7KB

csstx07.htm 8KB

csstx03.htm 6KB

csstx04.htm 9KB

csstx18.htm 9KB

img

ss07075.jpg 11KB

csssl02.gif 4KB

SS01093.JPG 19KB

SS01094.JPG 20KB

csssl01.gif 6KB

css069.gif 6KB

ss05058.jpg 7KB

SS05050.JPG 23KB

ss01087.jpg 24KB

link.gif 1022B

css022.jpg 24KB

csstx08.htm 7KB

csstx14.htm 8KB

yidong.htm 2KB

ss07075.jpg 11KB

ss01038.jpg 11KB

ss01093.jpg 19KB

ss07049.jpg 24KB

tupian.htm 236B

huadong.htm 850B

dtfilter.htm 1KB

djs.htm 4KB

dttimecontrol.htm 2KB

dtvisible.htm 1KB

ss01020.jpg 32KB

clip2.htm 3KB

csssl01.gif 6KB

clip1.htm 3KB

move.htm 2KB

ss01044.jpg 26KB

ss01076.jpg 19KB

ss01095.jpg 32KB

zly-gogo.jpg 3KB

jianrong.htm 739B

1118023L.JPG 25KB

ss05058.jpg 31KB

ss01094.jpg 20KB

shubiaocontrol.htm 901B

jianpan2.htm 1KB

075.gif 26KB

trans.htm 857B

clip.htm 2KB

ss01087.jpg 24KB

ss01035.jpg 40KB

jianpan3.htm 1KB

csstx15.htm 11KB

csstx11.htm 7KB

Recycled

INFO2 20B

desktop.ini 65B

csstx09.htm 8KB

csstx02.htm 7KB

homepage

csstx

csstx10.htm 7KB

资源推荐

资源预览

资源评论

<html> <head> <title>洪恩在线 - CSS特效赏析</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <link rel="stylesheet" href="/pub/css/home.css"> <link rel="stylesheet" href="/pc/homepage/homepage.css"> <meta name="keywords" content="电脑乐园,电脑,乐园,交互教程,交互,教程,教育,网页制作,CSS,特效,赏析"> <style>  </style> </head> <body bgcolor="white" text="black" topmargin="10" leftmargin="0" marginwidth="0" marginheight="10" onload="playHelp()">  <script language="Javascript" src="/pub/js/head.js"></script>  <table width="760" height="20" border=0 cellspacing="0" cellpadding="0" align="center"> <tr> <td height=20 class="p1" bgcolor="#E8E8E8" align="left"><img src="/pc/img/blank.gif" width="12" height="8"><font color="#000000"><font color="#FF9966">当前位置</font>：<a href="/default.htm" class="under">洪恩在线</a> -> <a href="/pc/index.htm" class="under">电脑乐园</a> -> CSS特效赏析</font></td> </tr> </table> <table width="760" border=0 cellspacing="0" cellpadding="0" align="center"> <tr> <td height="15"></td> </tr> </table> <table width="760" cellspacing="0" border=0 cellpadding="0" align="center"> <tr> <td width="145" valign="top" bgcolor="#E8E8E8" align="left" style="color:blue" class="p1"> <br> <table width="145" border="0" cellspacing="0" cellpadding="0" bordercolor="#F8AC0E" height="20"> <tr bgcolor="000099" valign="middle"> <td width="115" align="center" class="p2"><b><font color="#FFFFFF">CSS特效赏析</font></b></td> <td height="20" bgcolor="#E8E8E8" width="13"><img src="/pc/img/title_00.gif" width="13" height="20"></td> <td height="20" bgcolor="#E8E8E8" width="17"> </td> </tr> </table> <p class="p1" style="line-height:17pt" align="left"> 　1.<a href="csstx01.htm">动态改变样式</a><br> 　2.<a href="csstx02.htm">动态可视化效果</a><br> 　3.<a href="csstx03.htm">动态滤镜显示</a><br> 　4.<a href="csstx04.htm">Blentrans属性</a><br> 　5.<a href="csstx05.htm">Revealtrans属性</a><br> 　6.<a href="csstx06.htm">动态Glow属性</a><br> 　7.<a href="csstx07.htm">显示和隐藏</a><br> 　8.<a href="csstx08.htm">兼容两种浏览器</a><br> 　9.<a href="csstx09.htm">移动对象</a><br> 　10.<a href="csstx10.htm">对象的滑动</a><br> 　11.<a href="csstx11.htm">键盘控制对象</a><br> 　12.<a href="csstx12.htm">鼠标控制对象</a><br> 　13.<a href="csstx13.htm">Clip属性的应用</a><br> 　14.<a href="csstx14.htm">动态文字变换</a><br> 　15.<a href="csstx15.htm">动态改变页面样式</a><br> 　16.<a href="csstx16.htm">动态时钟控制</a><br> 　17.<a href="csstx17.htm">倒计时</a> 　<br> 　18.<a href="csstx18.htm">动态刷新</a><br> </p> <p align="center" class=p1> <a href=/pc/bin/msg.pl?file_id=k_csstx target="_blank"><img src="/pc/img/message.gif" width="64" height="54" alt="请您留言" border="0"><br> 谈谈您的看法</a> <br> <script language="javascript"> speak_num="za" </script> <script language="javascript" src=/pc/var/pc_k_csstx.js> </script> <script language="javascript"> var num=0 if (!isNaN(speak_num)){ num=speak_num; } else{ num=0 } document.writeln ("已有") document.writeln (num) document.writeln ("条发言") </script> </p> <p class="p1" style="line-height:17pt" align="left">  </p> </td> <td width=1 bgcolor=#0586D7 height="123"><img src="/pc/img/blank.gif" width="1" height="1"> </td> <td width=15 background="/pc/img/line.gif"> <p> </p> </td> <td valign="top" background="/pc/img/line.gif" width="584" height="123" class="p2"> <p align="center"><b><span class="p3"><br> <font color="#3366CC">CSS特效赏析</font></span></b></p> <p align="right" class="p1">　<a href="csstx14.htm">上一实例</a>　<a href="csstx16.htm">下一实例</a>   </p> <hr color=blue size=1> <p class="p2" style="line-height:17pt">　　<b><font color="#336633">15、动态改变页面样式</font></b></p> <p class="p2" style="line-height:17pt">　　我们先来看一下下面这个例子吧，请您用鼠标点击表格中相应的部分看效果。</p> <script>  </script> <p id="Clock" align="center"></p> <table border="1" align="center"> <tr> <td class="p2">时钟颜色</td> <td class="p2">时钟背景</td> <td class="p2">时钟字体</td> <td class="p2">字体尺寸</td> <td class="p2">字体粗细</td> </tr> <tr> <td colspan="5" height="3"> </td> </tr> <tr> <td class="p2"> <span onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor=default" onclick="Clock.style.color='purple'">紫色</span> </td> <td class="p2"> <span onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor=default" onclick="Clock.style.background='red'">红色</span> </td> <td class="p2"><span onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor=default" onclick="Clock.style.fontFamily='verdana'">无边饰</span> </td> <td class="p2"><span onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor=default" onclick="Clock.style.fontSize='24pt'">24pt</span> </td> <td class="p2"><span onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor=default" onclick="Clock.style.fontWeight='normal'">普通</span> </td> <tr> <td class="p2"><span onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor=default" onclick="Clock.style.color='white'">白色</span> </td> <td class="p2"><span onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor=default" onclick="Clock.style.background='yellow'">黄色</span> </td> <td class="p2"><span onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor=default"