- 博客(10)
- 收藏
- 关注
RSS订阅原创 现代布局手段——flex弹性盒模型 + 静态网页制作（HTML+CSS）-期末综合练习
摘要：本文介绍了Flex布局的核心概念与应用，包括容器与项目、主轴与交叉轴、空间分配和对齐方式等属性。作者分享了使用Flex布局简化导航栏设计的经验，通过设置justify-content: space-between等属性实现灵活布局。文中还提供了完整的导航栏HTML/CSS代码示例，并展示了如何利用开发者工具实时调试Flex属性。最后，作者基于Flex布局完成了博客园主页仿制项目，探讨了column-gap/row-gap等实用技巧，对比传统margin布局的优势。文章以轻松幽默的口吻，分享了前端开发中
2025-07-30 23:52:01
1025
1
原创 HTML作业练习——CSS部分：传统布局手段2——浮动与清除浮动
本文详细探讨了CSS浮动布局的特性与应用。首先介绍了元素类型转换的display属性值（block、inline等），重点分析了浮动元素的排布规则：浮动元素会脱离文档流形成浮动层，遵循向上向左/向右的排列规则，空间不足时自动换行。作者通过实验验证了浮动层合并的复杂行为，指出浮动元素可能遮盖块级元素的边框背景但不会完全遮挡内容。针对浮动导致的容器高度塌陷问题，提出了清除浮动（clear属性）和改用inline-block等解决方案。最后作者反思了过度研究浮动布局的时间投入与实用价值，建议转向更现代的弹性盒布局
2025-07-08 23:14:12
993
原创 HTML作业练习——CSS应用：传统布局手段1——切换定位方式，设置偏移量
本文详细讲解了CSS定位属性的使用方式，主要包括position属性的取值（static、relative、absolute、fixed）及其效果，以及top/bottom/left/right偏移量的基准方向和取值方式。重点解析了相对定位和绝对定位的区别：相对定位以元素原位置为基准进行偏移，保留文档流空间；绝对定位以最近定位外层容器为基准，脱离文档流。文章还通过实际案例演示定位的综合应用。文中采用幽默的表述方式，提醒读者注意定位实现的细节。
2025-05-26 22:55:36
499
原创 HTML作业练习—CSS应用：CSS样式常用属性
CSS提供了丰富的样式属性来设置网页元素的外观和布局。常用的文本样式属性包括color（文字颜色）、font-family（字体类型）、font-size（字号）、font-weight（字体粗细）、text-align（水平对齐方式）等。背景样式属性如background-position（背景图片位置）、background-size（背景图片大小）等，可以通过复合属性background进行设置。其他通用属性如width、height（宽高）、opacity（不透明度）、border（边框样式）等，可
2025-05-17 23:19:07
1360
原创 HTML作业练习—CSS入门：CSS引入方式、样式规则优先级
HTML决定了网页的骨架内容，CSS（层叠样式表）决定了网页的样式（如文字大小、颜色，图片位置等）。下面以我乱搞的实例进行讲解。
2025-04-23 21:09:14
1690
原创 HTML作业练习：用表格布局表单
input标签中不同的type属性可以呈现出各种文本输入框、选择按钮、功能按钮等，对应的其他属性及其作用可能略有不同。下列是type属性的取值。
2025-04-03 15:04:27
437
原创 HTML作业练习：无序有序嵌列表，表格合并单元格
ul></ul>创建无序列表，<ol></ol >创建有序列表，<li></li>标识列表项，type属性设定编号样式，取值及其对应样式见下表。快速生成4行5列表格标签：输入tr*4>td*5。快速生成9条列表项标签：输入li*9。在VS Code中，
2025-03-26 15:30:14
323
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人