web前端第二次作业

1. grid布局.html: 这个文件提供了CSS grid布局的示例。Grid布局能创建复杂的网页设计，易于对齐和调整元素的位置。

html <div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <!-- More items --> </div> css .grid-container { display: grid; grid-template-columns: auto auto auto; } .grid-item { border: 1px solid black; padding: 10px; }

2. 01-盒子模型.html: 文件介绍了CSS盒子模型，这是CSS布局的基础，它包括内容(content), 填充(padding), 边框(border)和外边距(margin)。

html <div class="box">Hello, World!</div> css .box { width: 200px; padding: 10px; border: 5px solid black; margin: 10px; }

3. 02-边框.html: 介绍了如何使用CSS定义和定制元素的边框。边框的属性包括边框的宽度、样式和颜色。

html <div class="bordered">This is a bordered box</div> css .bordered { border: 2px solid red; }

4. 09-字体.html: 文件介绍了如何使用CSS来定义文本的样式，包括字体、大小、颜色、行间距和文本装饰。

html <p class="styled-text">Hello, World!</p> css .styled-text { font-family: Arial, sans-serif; font-size: 20px; color: red; line-height: 1.5; text-decoration: underline; }

5. 08-去除标签默认外边距.html: 本文件介绍了如何去除HTML元素默认的外边距，通常用于统一页面样式和提升布局的精确度。

html <p>Hello, World!</p> css p { margin: 0; }

当然，接下来是剩余文件的概要和示例：

6. 过渡.html: 该文件介绍了CSS过渡，这是一种在CSS属性值改变时提供中间过渡效果的方法。

html <div class="transition-box">Hover Over Me!</div> css .transition-box { width: 100px; height: 100px; background: red; transition: background 2s; } .transition-box:hover { background: blue; }

7. 06-避免padding将盒子撑大.html: 该文件展示了如何使用box-sizing属性防止padding将元素撑大。

html <div class="box">Hello, World!</div> css .box { width: 200px; padding: 50px; box-sizing: border-box; }

8. 10-渐变.html: 这个文件展示了如何使用CSS创建颜色渐变效果。

html <div class="gradient-box"></div> css .gradient-box { height: 200px; background: linear-gradient(red, yellow); }

9. 11-css继承性.html: 该文件讲述了CSS的继承性，CSS的某些属性是可以继承的，例如文本颜色和字体族。

html <div class="parent"> Parent <div class="child">Child</div> </div> css .parent { color: red; }

10. 17-过渡.html: 这可能是一个更复杂的过渡效果的示例。

好的，我会继续为你列举剩下的文件及示例：

11. 16-3d转换.html: 此文件描述了如何使用CSS进行3D转换。例如，可以通过旋转元素来创建3D效果。

html <div class="box3D">Hello, World!</div> css .box3D { transform: rotateX(20deg) rotateY(20deg); }

12. 04-外边距.html: 此文件描述了如何使用CSS控制元素的外边距。外边距用于创建元素之间的空间。

html <div class="box-margin">Hello, World!</div> css .box-margin { margin: 20px; }

13. 14-浮动.html: 此文件介绍了CSS的浮动属性，它可以使元素向左或向右移动，直到它碰到父元素或另一个浮动元素的边界。

html <div class="float-box">Hello, World!</div> css .float-box { float: right; }

14. 03-内边距.html: 此文件描述了如何使用CSS控制元素的内边距。内边距是元素的内容和其边界之间的空间。

html <div class="box-padding">Hello, World!</div> css .box-padding { padding: 20px; }

15. 05-外边距塌陷.html: 此文件解释了外边距塌陷的概念，即当两个垂直外边距相遇时，它们会形成一个外边距。

html <div class="box-top">Hello, World!</div> <div class="box-bottom">Hello, World!</div> css .box-top { margin-bottom: 20px; } .box-bottom { margin-top: 30px; }

好的，这是剩下的文件的简要说明和示例：

16. 15-2d转换.html: 此文件介绍了CSS的2D转换，它可以通过旋转、缩放、移动或倾斜等方式改变元素。

html <div class="box2D">Hello, World!</div> css .box2D { transform: rotate(20deg); }

17. 动画.html: 此文件介绍了如何使用CSS动画。动画可以在元素上创建复杂的视觉效果。

html <div class="animated-box">Hello, World!</div> css @keyframes example { 0% {background-color: red;} 100% {background-color: yellow;} } .animated-box { animation-name: example; animation-duration: 4s; }

18. 18-动画.html: 这可能是一个更复杂的CSS动画示例。

19. 12-小米布局练习.html: 此文件可能包含了使用上述CSS知识完成的小米布局的练习。

20. 07-flex布局.html: 这个文件讲述了如何使用CSS的弹性盒子（Flexbox）布局。这是一种用于在一维空间内布局、对齐和分布元素的方式。

html <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <!-- More items --> </div> css .flex-container { display: flex; }

21. 13-浮动.html: 这可能是一个更复杂的浮动布局的示例。

22. 翩翩体-简.ttf: 这是一个字体文件，可能在HTML和CSS中被引用以改变文本的显示方式。