【免费】source.zip

共281个文件

png：87个

jpg：74个

html：71个

需积分: 0 37 浏览量更新于2024-01-17 收藏 11.4MB ZIP 举报

【CSS（层叠样式表）基础概念】 CSS，全称为Cascading Style Sheets，是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它的主要作用是分离网页的内容（HTML或其他XML）与表现（样式），使网页设计更加灵活，维护更方便。在HTML中，我们可以通过内联样式（直接在元素中添加style属性）、内部样式表（在<head>部分定义<style>标签）和外部样式表（链接单独的.css文件）三种方式来应用CSS。外部样式表是最常用的方式，它能够实现样式复用，提高代码可维护性。【CSS选择器】 CSS选择器是用于选取HTML或XML文档中的元素的规则。常见的选择器有： 1. 标签选择器：通过元素名称选取，如`p {color: red;}`将所有段落文字设为红色。 2. 类选择器：使用`.`前缀，如`.myClass {color: blue;}`选取所有class为'myClass'的元素。 3. ID选择器：使用`#`前缀，如`#myID {font-size: 24px;}`选取id为'myID'的唯一元素。 4. 属性选择器：如`[href] {text-decoration: underline;}`选取所有带有href属性的元素。 5. 伪类和伪元素：如`:hover`（鼠标悬停状态）、`:active`（被激活状态）、`:focus`（获取焦点状态）和`::before`、`::after`（在元素前后插入内容）。【CSS盒模型】 CSS盒模型是理解元素布局的基础。每个HTML元素可以视为一个矩形盒子，包含内容区、内边距（padding）、边框（border）和外边距（margin）。默认盒模型（W3C盒模型）中，元素宽度和高度只包含内容区；IE盒模型中，还包括内边距和边框。通过`box-sizing`属性可以改变元素的盒模型。【CSS布局模式】 1. 流动布局（Block Layout）：默认情况下，块级元素独占一行，行内元素在同一行显示。 2. 浮动布局（Float Layout）：通过`float`属性，元素可以浮动到其父元素的左侧或右侧，其他元素会围绕它排列。 3. 定位布局（Positioning）：使用`position`属性（static、relative、absolute、fixed），可以精确控制元素在页面上的位置。 4. 弹性布局（Flexbox）：适用于一维布局，如水平或垂直排列元素。通过`display: flex`开启弹性布局，使用`flex-direction`、`justify-content`、`align-items`等属性调整元素排列。 5. 网格布局（Grid Layout）：适用于二维布局，通过`display: grid`创建网格系统，使用`grid-template-columns`和`grid-template-rows`定义列和行，`grid-gap`设置间距。【CSS3新特性】 CSS3引入了许多新特性，如： 1. 渐变（Gradients）：线性渐变和径向渐变允许创建平滑过渡效果。 2. 文本阴影（Text Shadows）和元素阴影（Box Shadows）：增加元素的视觉层次感。 3. 多列布局（Multi-column Layout）：创建类似报纸的多列文本布局。 4. 背景和边框（Backgrounds and Borders）：支持圆角边框、多个背景图层等。 5. CSS动画（Animations）和过渡（Transitions）：使元素动态变化更加平滑。 6. 媒体查询（Media Queries）：实现响应式设计，根据设备特性应用不同样式。【总结】 CSS作为网页设计的核心，提供丰富的选择器、布局机制和视觉效果。理解和熟练运用CSS，能帮助开发者创建美观、响应式的网站，提升用户体验。通过不断学习和实践，我们可以掌握更多高级技巧，如Flexbox和Grid布局，以及CSS预处理器（如Sass、Less），进一步提升开发效率和代码质量。

收起资源包目录

source.zipsource.zipsource.zipsource.zip （281个子文件）

demo.css 8KB

htmleaf-demo.css 6KB

carousel.css 2KB

iconfont.css 2KB

normalize.css 2KB

.DS_Store 6KB

iconfont.eot 2KB

icomoon.eot 2KB

1.gif 940KB

fcloading.gif 2KB

tb.gif 520B

bg.gif 209B

demo_index.html 9KB

3d-旋转木马轮播图.html 5KB

index.html 4KB

3d旋转-导航翻转.html 3KB

3d-点击旋转图片.html 3KB

2d旋转-扑克牌摊开.html 2KB

1-爱宠作业.html 2KB

12-轮播图.html 2KB

3d-立体图案.html 2KB

过渡-蓝快滑动.html 2KB

3d-水平旋转.html 2KB

仿新浪网站固定头部.html 2KB

3d-横向旋转.html 2KB

test.html 1KB

3d-案例.html 1KB

淘宝轮播图静态布局.html 1KB

3d立方体.html 1KB

2d旋转-图片摊开.html 1KB

3d-立体旋转.html 1KB

index.html 1KB

3-图文绕排.html 1KB

4-作业4.html 1KB

2-作业2.html 1KB

导航栏.html 1KB

8-多行导航.html 1KB

19-新增伪类选择器.html 1KB

tab切换.html 1KB

1-作业1.html 1020B

过渡-手风琴.html 989B

9-浮动解决方案.html 975B

微信案例.html 948B

15-定位元素的层级关系.html 921B

新浪tab导航.html 917B

7-浮动问题.html 914B

4-浮动的特性.html 893B

6-浮动的详细情况.html 840B

3-作业5.html 836B

过渡-红块拉伸.html 807B

14-固定定位案例.html 778B

8-绝对定位2.html 748B

过渡-文字拉伸.html 746B

20-2d变换.html 716B

2-伪对象.html 706B

3d-硬币旋转.html 656B

z-index出题.html 646B

模拟新浪导航.html 634B

21-美女放大看.html 560B

6-相对定位.html 552B

模拟小米滑动效果.html 542B

16-层级关系的案例.html 530B

13-固定定位.html 527B

3d.html 509B

5-列表+浮动-导航.html 491B

7-绝对定位.html 484B

22-2d斜切.html 481B

9-定位例子1.html 478B

17-内减模式.html 443B

18-新增属性选择器.html 441B

11-盒子水平并垂直居中.html 430B

13-细线边框.html 410B

字穿线效果.html 408B

2d移动-居中定位.html 402B

10-定位例子2.html 378B

12-阴影小案例.html 347B

14-字体图标.html 347B

文字阴影-凹凸文字.html 332B

5-静态定位.html 296B

11-边框阴影.html 281B

10-文字阴影.html 268B

1.ico 4KB

9.jpg 524KB

6.jpg 240KB

banner_1.jpg 183KB

5.jpg 143KB

banner_2.jpg 134KB

3.jpg 130KB

2.jpg 118KB

7.jpg 107KB

8.jpg 105KB

共 281 条

资源推荐

资源预览

资源评论

浮动： 1.脱离标准流 2.浮动元素都是行内块 3.不会覆盖文字问题： 4.子元素浮动后不能撑开父元素的高度清除浮动： 1.给父元素加高度 2.个体父元素加overflow 3.空标签使用clear:both 4.使用伪元素代替空标签：content display:block; clear:both; height:0; overflow: 伪元素：元素:after{} 元素后面添加一个元素（在盒子里面）元素:before{} 阴影：文字阴影：text-shadow:横向偏移纵向偏移模糊距离颜色; 盒子阴影：box-shadow:横向偏移纵向偏移模糊距离阴影尺寸颜色; 都可以设置多个阴影，10px 10px 2px red,-10px -10px 3px blue; 细线边框：border-collapse:collapse; 网站图标：www.bitbug.net 字体图标：www.iconfont.cn 锚点的本质是页面滚动，所以锚点能用的前提是有滚动条，这个滚动条可以是浏览器的，也可以自己生成的（overflow）