1月17日java假期学习读书笔记

一、学习目标
掌握CSS的Flexbox和Grid布局技术。
了解响应式设计的基本概念和实现方法。
学习HTML表单的基本用法。
通过实际练习，构建一个响应式网页布局。
二、学习内容
（一）CSS Flexbox布局
Flexbox简介
Flexbox（弹性布局）是一种用于一维布局的CSS技术，能够灵活地分配容器内的空间，使子元素能够适应不同的屏幕尺寸和设备。
容器属性
display: flex：将容器设置为弹性布局。
flex-direction：定义主轴的方向（row、column等）。
justify-content：定义主轴上的对齐方式（flex-start、center、space-between等）。
align-items：定义交叉轴上的对齐方式（flex-start、center、stretch等）。
项目属性
flex：定义项目的伸缩能力，包括flex-grow、flex-shrink和flex-basis。
order：定义项目的排列顺序。
示例代码
HTML
复制

Item 1

Item 2

Item 3

css 复制 .flex-container { display: flex; flex-direction: row; justify-content: center; align-items: center; }

.flex-item {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
（二）CSS Grid布局
Grid简介
Grid（网格布局）是一种用于二维布局的CSS技术，能够同时控制行和列的布局。
容器属性
display: grid：将容器设置为网格布局。
grid-template-columns和grid-template-rows：定义列和行的大小。
gap：定义网格之间的间距。
项目属性
grid-column和grid-row：定义项目在网格中的位置。
示例代码
HTML
复制

Item 1

Item 2

Item 3

Item 4

css 复制 .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 10px; }

.grid-item {
background-color: lightgreen;
padding: 20px;
text-align: center;
}
（三）响应式设计
响应式设计简介
响应式设计是一种设计方法，使网页能够根据不同的设备屏幕尺寸自动调整布局和样式。
媒体查询（Media Queries）
使用@media规则根据屏幕宽度、高度等条件应用不同的样式。
css
复制
@media (max-width: 600px) {
.flex-container {
flex-direction: column;
}
}
视口元标签
在HTML中添加，确保网页在移动设备上能够正确缩放。
示例代码
HTML
复制

Item 1

Item 2

Item 3

（四）HTML表单 表单简介 HTML表单用于收集用户输入，例如用户名、密码、联系方式等。 常用表单元素

：定义表单容器。 ：用于创建文本框、按钮、单选按钮等。 ：为表单元素提供文本描述。 ：创建下拉菜单。 ：创建多行文本框。 <button>：创建按钮。 示例代码 HTML 复制 <form action="/submit" method="post"> <label for="username">用户名：</label> <input type="text" id="username" name="username" required><br><br> <label for="password">密码：</label> <input type="password" id="password" name="password" required><br><br> <label for="gender">性别：</label> <input type="radio" id="male" name="gender" value="male"> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label><br><br> <label for="bio">个人简介：</label> <textarea id="bio" name="bio">

提交 三、学习心得 Flexbox和Grid的对比 Flexbox适合一维布局（行或列），而Grid适合二维布局（行和列）。 在实际开发中，可以根据需求选择合适的布局方式，甚至可以将两者结合使用。 响应式设计的重要性 随着移动设备的普及，响应式设计成为网页开发的必备技能。 使用媒体查询可以轻松实现不同屏幕尺寸下的布局调整。 HTML表单的实用性 表单是用户与网页交互的重要方式，掌握表单的使用方法可以为后续的前端开发打下坚实基础。 实践的重要性 通过实际编写代码，我更好地理解了Flexbox、Grid和响应式设计的实现方法。 实践可以帮助快速发现和解决问题，加深对知识点的理解。