css层叠样式表实例资源-CSDN下载

共146个文件

jpg：58个

html：52个

gif：12个

4星 · 超过85%的资源需积分: 4 166 浏览量 2008-10-16 14:30:59 上传评论 1 收藏 4.95MB RAR 举报

CSS（层叠样式表）是网页设计中不可或缺的一部分，它用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。通过CSS，我们可以控制元素的颜色、字体、布局、动画等视觉效果，使得网页更加美观和交互性强。在“css样式表实例”这个主题中，我们将深入探讨CSS的基础概念、选择器、属性和值，以及一些常见的使用技巧。 1. **基础概念**：CSS的工作原理是基于规则的，这些规则由一个或多个选择器与声明组成。声明由属性和值构成，例如`color:red;`表示将文本颜色设置为红色。CSS可以内联、内部或外部引用，分别对应于`<style>`标签、`<head>`中的`<style>`标签和独立的`.css`文件。 2. **选择器**：选择器用于选取我们想要应用样式的HTML元素。基本的选择器有标签选择器（如`p`）、类选择器（如`.myClass`）、ID选择器（如`#myID`）和通配符选择器（如`*`）。更高级的选择器包括属性选择器、伪类和伪元素。 3. **属性与值**：CSS包含大量的属性，如`color`、`font-size`、`background-color`等，每个属性都有其特定的值，如颜色值（如`red`、`#ff0000`或`rgba(255, 0, 0, 1)`）、长度值（如`px`、`em`或`%`）等。 4. **盒模型**：理解CSS盒模型至关重要，它包括元素的内容区、内边距（padding）、边框（border）和外边距（margin）。盒模型决定了元素在页面上的占用空间。 5. **布局技术**：传统布局如流体布局（使用百分比宽度）、定位（`position`属性）和浮动（`float`属性），以及现代CSS布局如Flexbox（灵活盒子布局）和Grid（网格布局）都是创建复杂网页结构的关键工具。 6. **响应式设计**：随着移动设备的普及，CSS媒体查询（`@media`规则）允许我们根据设备的特性（如屏幕宽度）来调整样式，实现响应式网页设计。 7. **CSS预处理器**：Sass、Less和Stylus等CSS预处理器提供了变量、嵌套规则、函数等特性，使CSS编写更高效且易于维护。 8. **CSS动画与过渡**：通过`transition`和`animation`属性，我们可以创建平滑的动态效果，增强用户体验。 9. **CSS重置与正常化**：为了消除浏览器默认样式带来的差异，我们可以使用CSS重置（如Eric Meyer Reset）或正常化（如normalize.css）。 10. **最佳实践**：遵循一定的编码规范，如避免使用！important，保持样式简洁，合理组织和命名选择器，利用CSS预处理器，以及使用浏览器开发者工具进行调试，都是提高CSS代码质量的重要方法。通过“css实例”，你可以亲自动手实践上述知识点，逐步掌握CSS的核心技能。在学习过程中，不断练习和应用这些概念，你将能够创建出具有专业外观和功能的网页。无论是简单的颜色和字体调整，还是复杂的布局和动画效果，CSS都能帮你实现。所以，不要被CSS的简单外表所迷惑，它其实蕴含着无尽的设计可能。

资源推荐

资源详情

资源评论

收起资源包目录

css 层叠样式表实例（146个子文件）

hxs.css 386B

zxxs1.css 335B

zxxs.css 305B

zxs.css 260B

zxs2.css 241B

hxxs.css 225B

Thumbs.db 88KB

Thumbs.db 37KB

Thumbs.db 8KB

Thumbs.db 7KB

Thumbs.db 6KB

hover.gif 773B

link.gif 770B

active.gif 753B

nav.gif 490B

r.gif 469B

normal.gif 303B

top.gif 290B

bottom.gif 290B

tr.gif 196B

bl.gif 195B

br.gif 194B

tl.gif 193B

CSS House 2.htm 219KB

美国国旗.htm 25KB

CSS House (3D Border Demo 2) by Chris Hester.htm 22KB

step3.htm 979B

step4.htm 955B

step2.htm 919B

step1.htm 606B

相册.html 3KB

翻页2.html 2KB

文字排版.html 2KB

三角形的画法.html 2KB

图片动态转换(滤镜的使用).html 2KB

照片1.html 2KB

三角.html 1KB

下拉菜单.html 1KB

test.html 1KB

相对绝对定位区别3.html 1KB

图文排版1.html 1KB

作者介绍.html 1KB

图片预览.html 1KB

隐藏菜单.html 1KB

图片无缝滚动.html 1KB

按钮.html 1KB

my.html 1KB

翻页.html 1KB

表格布局.html 1KB

图文排版疑问.html 1KB

another.html 1KB

test1.html 1KB

圆角样式.html 1KB

样式表-1.html 1KB

折叠标签.html 1KB

相对绝对定位区别.html 1KB

图文排版.html 1KB

相对绝对定位区别2.html 1KB

我的翻页.html 1KB

全图片排版.html 1KB

菜单.html 1018B

模拟热区.html 997B

纵向下拉.html 992B

横向下拉.html 989B

ie6 下拉.html 982B

Untitled-3.html 948B

圆角样式2.html 782B

圆角样式3.html 762B

ie按钮.html 730B

优化导航.html 672B

test.html 668B

纵向菜单2.html 664B

help.html 643B

Untitled-2.html 641B

图像替换3.html 639B

图像替换4.html 633B

提示窗口.html 584B

图片剪切.html 567B

横向菜单.html 553B

纵向菜单.html 551B

图像替换2.html 486B

图像替换1.html 479B

szl.JPG 2.19MB

1.jpg 154KB

11.jpg 105KB

117.jpg 89KB

2.jpg 83KB

116.jpg 62KB

112.jpg 55KB

115.jpg 55KB

111.jpg 51KB

114.jpg 51KB

113.jpg 41KB

112bed46dff.jpg 41KB

pic_8h.jpg 40KB

pic_8v.jpg 33KB

img2.jpg 28KB

pic_9v.jpg 24KB

9.jpg 22KB

5.jpg 22KB

共 146 条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test div</title> <style> img { width:40px; width:49px;} body{ margin:0; padding:0; font-size:12px; background: #333333; line-height:1.7; font-family:Verdana, "宋体"; overflow:hidden } #info{ width:600px; background: #666666; margin-left:auto; margin-right:auto; text-align:center; border:1px solid #FFFFFF; height:450px; margin-top:20px;position:relative; } h3{ margin:30px 0 0 0; color:#CC0000; font-size:12px;color:#FFF} span{visibility:hidden; position:absolute; overflow:hidden;} ul,li{ list-style:none; margin:0; padding:0;} a:active,a:hover{ cursor:pointer} a:hover span,a:active span{position:absolute; top:90px; left:0; z-index:20px; visibility: visible; } #info img{ width:400px; height:280px; border:7px solid #FFFFFF} #zs{ height:340px; overflow: auto; width:140px; float:right; margin-top:20px; margin-bottom:50px;} .z{ width:80px; height:56px;display:block; border:1px solid #FFFFFF; margin:4px 0 4px 25px;color:#FFF} .b1{ background:url(pic/1.jpg)} .b2{ background:url(pic/2.jpg)} .b3{ background:url(pic/3.jpg)} .b4{ background:url(pic/4.jpg)} .b5{ background:url(pic/5.jpg)} .b6{ background:url(pic/6.jpg)} </style> </head> <body> <div id="info"> <h3>子鼠的CSS相册</h3> <div id="zs"> <ul> <li><a href="http://www.zishu.cn" class="b1 z" target="_blank" title="照片1"><span><img src="pic/1.jpg" alt="照片1" /><br /> 这是照片1<br /> www.zishu.cn</span></a></li> <li><a href="http://www.zishu.cn" class="b2 z" target="_blank" title="照片2"><span><img src="pic/2.jpg" alt="照片2" /><br /> 这是照片2<br /> www.zishu.cn</span></a></li> <li><a href="http://www.zishu.cn" class="b3 z" target="_blank" title="照片3"><span><img src="pic/3.jpg" alt="照片3" /><br /> 这是照片3<br /> www.zishu.cn</span></a></li> <li><a href="http://www.zishu.cn" class="b4 z" target="_blank" title="照片4"><span><img src="pic/4.jpg" alt="照片4" /><br /> 这是照片4<br /> www.zishu.cn</span></a></li> <li><a href="http://www.zishu.cn" class="b5 z" target="_blank" title="照片5"><span><img src="pic/5.jpg" alt="照片5" /><br /> 这是照片5<br /> www.zishu.cn</span></a></li> <li><a href="http://www.zishu.cn" class="b6 z" target="_blank" title="照片6"><span><img src="pic/6.jpg" alt="照片6" /><br /> 这是照片6<br /> www.zishu.cn</span></a></li> <li><a href="http://www.zishu.cn" class="b1 z" target="_blank" title="照片1"><span><img src="pic/1.jpg" alt="照片1" /><br /> 这是照片1<br /> www.zishu.cn</span></a></li> <li><a href="http://www.zishu.cn" class="b2 z" target="_blank" title="照片2"><span><img src="pic/2.jpg" alt="照片2" /><br /> 这是照片2<br /> www.zishu.cn</span></a></li> </ul> </div> </div> </body> </html>

评论收藏

内容反馈