- 博客(9)
- 收藏
- 关注
RSS订阅原创 使用Flexbox和CSS Grid的简单布局示
在这个示例中，`.container` 类使用Flexbox来创建一个灵活的布局，其中`.site-main` 是主要内容区域，而 `.sidebar` 是侧边栏。在较小屏幕上（小于768px），布局会变为垂直堆叠，以适应移动设备。页脚通过设置 `margin-top: auto;` 自动置于容器底部。以下是一个完整的HTML页面示例，展示了常见的网页布局结构，包括页眉、导航、主要内容、侧边栏和页脚。这个示例使用了Flexbox和CSS Grid来创建响应式布局。
2024-08-24 10:03:52
130
原创 身体部分中各内容的常见布局
在HTML的身体部分（<body>），常见的布局包括页眉（<header>）、导航（<nav>）、主要内容（<main>）、侧边栏（<aside>）、页脚（<footer>）等。
2024-08-24 10:03:38
169
原创 在前端书写网页时，常见的逻辑结构以及书写顺序，命名形式
在前端书写网页时，常见的逻辑结构和书写顺序有助于维护代码的可读性和可维护性。遵循上述结构和命名约定可以帮助创建清晰、一致且易于维护的HTML文档。`lang` 属性指定了页面的语言，有助于搜索引擎优化和屏幕阅读器。这是HTML文档的第一行，告诉浏览器页面使用的HTML版本。1. 文档类型声明（Doctype）# 3. 头部（Head）4. 身体（Body）2. HTML 根元素。
2024-08-24 10:03:22
283
原创 针对页面布局问题在元素对齐、布局错乱中遇到的困难，解决办法。
在这个例子中，`.grid-container` 类使用了 `display: grid;` 定义了两列的宽度比例，其中 `fr` 是一个灵活的单位，表示可用空间的一等份。`gap: 10px;在这个例子中，`.container` 类使用了 `display: flex;` 属性确保了子元素在水平方向上居中对齐，而 `align-items: center;Flexbox是一个用于在容器内分配和对齐元素的工具，能够轻松解决对齐和布局问题。假设我们有一个容器，里面有两个子元素，我们希望它们水平居中对齐。
2024-08-15 20:49:34
167
原创 JavaScript与CSS优化——CSS优化
利用CSS3的新特性，如`flexbox`、`grid`等，可以减少不必要的HTML结构和CSS代码。使用工具如`cssnano`或`clean-css`来压缩CSS文件，减少文件大小。- 利用CSS预处理器（如Sass、Less）来优化代码结构。对于不同的设备和屏幕尺寸，使用媒体查询加载不同的CSS文件。- 移除未使用的CSS规则。- 使用更短的类名和ID。
2024-08-13 13:45:18
205
原创 JavaScript与CSS优化——懒加载
在上一篇提到的React代码分割示例中，我们已经看到了如何使用`React.lazy`来实现组件的懒加载。同样的原理也适用于Vue、Angular等其他前端框架。我们可以使用`Intersection Observer API`来实现图片的懒加载。- **节省带宽**：只有当用户滚动到页面的特定部分时，才加载资源。- **提升用户体验**：减少了页面加载时间，提高了用户体验。- **减少初始负载**：用户不需要一次性加载所有资源。
2024-08-13 13:39:42
236
原创 JavaScript与CSS优化——代码分割
代码分割是一种将代码拆分成多个小块的技术，这些小块可以在需要时再加载。这样做的好处是可以减少初始加载时间，提高应用的性能。Webpack是一个现代JavaScript应用程序的静态模块打包器，它支持代码分割功能。- 配置`SplitChunksPlugin`来优化分割策略。- 使用`import()`语法动态导入模块。
2024-08-13 13:28:34
327
原创 margin是根据父元素的宽度来计算的还是根据高度来计算的？
这意味着 .subbox 盒子距离其父元素 .box 盒子顶部的距离是 .box 盒子高度的一半。在本例中，相应的维度是宽度，因为margin-top是垂直方向上的，而垂直方向的边距和填充是相对于水平方向的容器尺寸计算的。由于 .box 盒子的高度为 200px，所以 .subbox 盒子距离 .box 盒子顶部的距离是 200px * 50% = 100px。因此，当.subbox的margin-top设置为50%时，它实际上是相对于.box的宽度计算的，而不是高度。
2024-08-13 12:54:45
154
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人