- 博客(15)
- 收藏
- 关注
RSS订阅
原创 基于Flex弹性布局的校园网页综合布局设计
本次校园网页案例完整实现了头部、导航、三栏主体、表单模块、页脚的标准化页面结构，让我深刻理解了现代网页的布局思想。同时熟悉了图片、背景、表单、文字样式的综合调试方法，大幅提升了网页排版与问题排查能力，为后续复杂网页开发、响应式布局学习打下了扎实基础。相比传统浮动布局，Flex 布局更加简洁、高效，能够轻松实现元素居中、均分排列、自动换行等常用网页效果。本次实验以校园官网首页为案例，整体页面分为：头部区域、导航栏区域、主体三栏区域、页脚区域，全部核心排版均使用 Flex 布局实现。
2026-06-03 01:13:52
176
原创 告别布局混乱！一文吃透盒子模型
border-top-left-radius、border-bottom-right-radius：单独控制某一个角。本次实验全面学习了 CSS盒子模型，掌握宽高、内边距、边框、外边距的用法，实现了块级盒子与行内块盒子的布局。学会了圆角、背景色、不透明度等样式，能够独立制作带边框、带圆角、带间距的图文盒子。border-top-right-radius：单独设置右上角圆角。border：边框，可设置粗细、颜色、线型（solid实线）。margin：外边距，盒子与盒子之间的距离。
2026-05-12 22:37:10
46
原创 一篇吃透CSS四大复合选择器，精确控制页面样式
本次实验通过完整校园网页结构，实战练习了CSS四大复合选择器，清晰理解了后代、子代、相邻兄弟、通用兄弟的匹配规则与区别。作用：选中紧跟在元素1后面、同级、紧挨着的第一个元素2。作用：选中元素1之后、同级、所有符合条件的元素2。后代选择器（空格）：所有后代，不限层级（最常用）4. 相邻兄弟选择器 元素1 + 元素2。+ 只选紧挨着的1个；作用：只选中直接子元素，不包含孙子、重孙。作用：选中父元素内部所有层级的目标元素。子代选择器（>）：只亲儿子，不隔代。相邻兄弟（+）：只选紧挨着的后一个。
2026-05-05 21:12:48
43
原创 玩转CSS基础选择器，彻底搞懂样式优先级与覆盖规则
本次实验学习了 CSS 三种基础选择器的语法与使用场景，熟练掌握 ID 选择器、类选择器的编写方式。通过 <style> 标签写在网页 <head> 中，使用标签选择器统一控制对应标签样式。掌握了元素 id、class 属性的作用，为后续复合选择器、页面样式美化打下基础。写在 head 内部，用于书写当前页面 CSS 样式，是内嵌式引入方式。1. 书写规范：ID选择器前缀 # ，类选择器前缀 . ，不能混淆。-class ：类名标识，用于类选择器分组选中，支持多个标签共用。
2026-04-28 20:06:10
369
原创 课后练习4
enctype="multipart/form-data" ：支持文件上传，必须配置。文件上传控件，可选择本地文件，依赖表单 multipart/form-data 编码。- method="post" ：使用post方式提交，数据安全，支持大数据、文件；HTML5 文档声明，告知浏览器使用 HTML5 标准解析网页，必须写在首行。16. <input type="submit" value="提交">15. <input type="reset" value="重置">
2026-04-15 19:20:56
164
原创 课后练习3表格与列表
width，border （0和1布尔值），height。———————列表练习—————————————————效果图————————＜tr＞（行 table row）＜td＞（单元格（td*3））＜th＞：搜索引擎时才有用。1）无序列表：ul（容器）rowspan原理同上。此时需要干掉单元格5。里面：ui（列表项）li里面＋ol/ul。
2026-04-01 11:40:53
32
原创 课后练习2
img src="https://www.bizhigq.com/pc-img/2023-03/1392.jpg" alt="图片无法显示" height="366rpx" weight="366rpx"><a name="苹果">< img src="https://img95.699pic.com/photo/60067/3494.jpg_wh860.jpg" alt="无法显示">点击查看苹果</a ><a href="https://www.baidu.com/">跳转为百度</a >
2026-03-25 17:13:52
49
原创 掌握Flex主轴对齐：justify
space-between / space-around / space-evenly 实现了不同模式的均匀分布，解决了传统布局中手动设置间距的繁琐问题。本次实验通过对比 justify-content 的 6 种取值，系统掌握了 Flex 布局中项目在主轴方向的对齐与间距控制方法。误解 space-around ：误以为边缘间距与项目间间距相等，实际边缘间距是项目间间距的一半。space-around ：每个项目两侧有相等的外边距，导致边缘间距为项目间间距的一半。
2026-06-01 20:35:39
38
原创 掌握Flex布局：容器默认规则与项目排列全解析
解决：设置 flex-shrink: 0 禁止收缩，或设置 flex-wrap: wrap 允许换行。主轴（Main Axis）：项目排列的方向，默认是水平方向（ flex-direction: row ）。本次实验掌握了 Flex 布局的基础用法，理解了容器与项目的关系，以及 Flex 布局的默认行为。- flex-shrink: 1 ：项目会自动缩小，以适应容器宽度（这就是项目被挤扁的原因）。Flex 项目：Flex 容器的直接子元素，会自动遵循 Flex 规则排列。
2026-05-27 09:58:14
225
原创 玩转CSS display属性：块级、行内、行内块全解析
2. 行内块元素的空白间隙：使用 inline-block 时，HTML 代码中的换行和空格会被解析为一个空白字符，导致元素之间出现空隙。实验表现：代码中的 <b> 标签（盒子5、盒子6），虽然设置了 width: 200px;1. 混淆行内元素宽高设置：试图给 <span> 、 <b> 等行内元素设置宽高，导致样式不生效。典型元素： <div> 、 <p> 、 <h1> ~ <h6> 、 <ul> 、 <li> 等。典型元素： <span> 、 <b> 、 <i> 、 <a> 等。
2026-05-27 09:15:58
335
原创 CSS定位三大核心实战——相对、绝对、固定定位全解析
偏移值错误：使用固定像素值（如 left: 300px ），页面大小变化时位置错乱，推荐使用 top/right/bottom/left: 0 结合 transform 调整。父相子绝：父元素设置 position: relative ，子元素设置 position: absolute ，是网页布局中最常用的定位组合。作用：以元素自身原来的位置为基准进行偏移，不会脱离文档流，不会影响其他元素布局。作用：脱离文档流，以浏览器窗口为基准定位，无论页面如何滚动，元素位置保持不变。
2026-05-26 21:54:47
207
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人