[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"chapter-book:1l63ZKg2":3,"chapter:Wk8YGKGx":52},{"id":4,"created_at":5,"updated_at":5,"code":6,"author_id":7,"title":8,"slug":9,"cover_theme_key":10,"visibility":11,"status":12,"sort_order":4,"favorite_count":13,"view_count":13,"author":14,"chapter_count":24,"word_count":26,"free_count":13,"is_favorite":23,"book_status":12,"unparted":27},8,"2024-04-14T12:10:43.191+08:00","1l63ZKg2",1,"Materializecss框架","materializecss框架-8","default","public","published",0,{"id":7,"created_at":15,"updated_at":16,"code":17,"username":18,"display_name":19,"role":20,"avatar_url":21,"is_active":22,"is_banned":23,"follower_count":13,"following_count":24,"last_login_at":25},"2023-11-30T23:53:12.952+08:00","2026-10-20T16:16:54.352+08:00","Mg87g8Gk","1701359592888","大苹果","verified_author","\u002Fcuts\u002F17021220625513129.png",true,false,3,"2026-10-20T16:12:35+08:00",10348,[28,36,44],{"id":29,"created_at":30,"updated_at":30,"code":31,"author_id":7,"book_id":4,"slug":32,"article_id":33,"title":34,"sort_order":29,"content":35,"status":12},37,"2024-04-14T12:10:58.845+08:00","q28keKle","掌握-materialize-css创建响应式网页设计-37",187,"掌握 Materialize CSS：创建响应式网页设计","标题：掌握 Materialize CSS：创建响应式网页设计\n\nMaterialize CSS 是一个流行的前端框架，用于创建响应式网页设计。它基于 Google 的 Material Design 规范，提供了丰富的样式和组件，让开发者可以轻松构建现代化、具有吸引力的用户界面。在本文中，我们将介绍如何使用 Materialize CSS 创建一个简单而漂亮的响应式网页。\n\n### 步骤 1：准备工作\n\n首先，我们需要在项目中引入 Materialize CSS。你可以通过 CDN 或者下载并引入本地文件的方式来获取。下面是使用 CDN 的示例：\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  \u003Ctitle>Materialize CSS Demo\u003C\u002Ftitle>\n  \u003C!-- Materialize CSS -->\n  \u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fmaterialize\u002F1.0.0\u002Fcss\u002Fmaterialize.min.css\">\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003C!-- 内容将在这里 -->\n\n\u003C!-- Materialize JavaScript -->\n\u003Cscript src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fmaterialize\u002F1.0.0\u002Fjs\u002Fmaterialize.min.js\">\u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### 步骤 2：创建布局\n\nMaterialize CSS 提供了一个灵活的网格系统，使得网页布局变得非常容易。以下是一个简单的布局示例：\n\n```html\n\u003Cdiv class=\"container\">\n  \u003Cdiv class=\"row\">\n    \u003Cdiv class=\"col s12 m6\">\n      \u003C!-- 左侧内容 -->\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"col s12 m6\">\n      \u003C!-- 右侧内容 -->\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n在这个示例中，我们创建了一个包含两列的网格布局，分别占据了屏幕的一半空间。\n\n### 步骤 3：添加组件\n\nMaterialize CSS 提供了丰富的组件，包括按钮、卡片、导航栏等等。我们可以利用这些组件来丰富我们的网页。下面是一个添加按钮和卡片的示例：\n\n```html\n\u003Cdiv class=\"container\">\n  \u003Cdiv class=\"row\">\n    \u003Cdiv class=\"col s12\">\n      \u003Ca class=\"waves-effect waves-light btn\">按钮\u003C\u002Fa>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"row\">\n    \u003Cdiv class=\"col s12 m6\">\n      \u003Cdiv class=\"card\">\n        \u003Cdiv class=\"card-content\">\n          \u003Cspan class=\"card-title\">卡片标题\u003C\u002Fspan>\n          \u003Cp>这是一个卡片的内容。\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"col s12 m6\">\n      \u003Cdiv class=\"card\">\n        \u003Cdiv class=\"card-content\">\n          \u003Cspan class=\"card-title\">另一个卡片标题\u003C\u002Fspan>\n          \u003Cp>这是另一个卡片的内容。\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n### 步骤 4：响应式设计\n\nMaterialize CSS 默认支持响应式设计，可以在不同设备上良好地显示。你可以通过添加不同的 CSS 类来控制元素在不同屏幕尺寸下的表现。例如，`s12` 类表示在所有屏幕尺寸下占据 12 个栅格，而 `m6` 类表示在中型屏幕及以上尺寸下占据 6 个栅格。\n\n### 结论\n\n通过本文的介绍，我们学习了如何使用 Materialize CSS 创建响应式网页。Materialize CSS 提供了丰富的样式和组件，使得网页设计变得简单而富有吸引力。希望这篇文章能够帮助你更好地掌握 Materialize CSS，并将其应用到你的项目中。\n",{"id":37,"created_at":38,"updated_at":38,"code":39,"author_id":7,"book_id":4,"slug":40,"article_id":41,"title":42,"sort_order":37,"content":43,"status":12},38,"2024-04-14T12:54:07.527+08:00","n26qDKxb","materializecss轮播组件构建动态网页内容的利器-38",188,"MaterializeCSS轮播组件：构建动态网页内容的利器","**MaterializeCSS轮播组件：构建动态网页内容的利器**\r\n\r\n在现代网页设计中，轮播（Carousel）是一种非常流行的组件，用于在首页或特定页面上展示一系列的图片或内容，从而吸引用户的注意力。MaterializeCSS框架提供了强大的轮播组件，使开发者能够轻松地构建具有现代化风格的轮播效果。在本文中，我们将详细介绍MaterializeCSS轮播组件的使用方法，并提供代码示例。\r\n\r\n**一、MaterializeCSS轮播组件的基本用法**\r\n\r\n要使用MaterializeCSS的轮播组件，首先需要确保已经正确引入了MaterializeCSS的CSS和JavaScript文件。然后，在HTML中创建一个包含轮播内容的容器，并使用MaterializeCSS提供的类来初始化轮播组件。\r\n\r\n**二、代码实现**\r\n\r\n下面是一个使用MaterializeCSS轮播组件的简单示例：\r\n\r\n```html\r\n\u003C!DOCTYPE html>\r\n\u003Chtml>\r\n\u003Chead>\r\n  \u003C!-- 引入 MaterializeCSS 的 CSS 文件 -->\r\n  \u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fmaterialize\u002F1.0.0\u002Fcss\u002Fmaterialize.min.css\">\r\n\u003C\u002Fhead>\r\n\u003Cbody>\r\n\r\n  \u003C!-- 创建轮播容器 -->\r\n  \u003Cdiv class=\"carousel\">\r\n    \u003Ca class=\"carousel-item\" href=\"#one!\">\u003Cimg src=\"image1.jpg\">\u003C\u002Fa>\r\n    \u003Ca class=\"carousel-item\" href=\"#two!\">\u003Cimg src=\"image2.jpg\">\u003C\u002Fa>\r\n    \u003Ca class=\"carousel-item\" href=\"#three!\">\u003Cimg src=\"image3.jpg\">\u003C\u002Fa>\r\n  \u003C\u002Fdiv>\r\n\r\n  \u003C!-- 初始化轮播组件 -->\r\n  \u003Cscript>\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n      var elems = document.querySelectorAll('.carousel');\r\n      var instances = M.Carousel.init(elems);\r\n    });\r\n  \u003C\u002Fscript>\r\n\r\n  \u003C!-- 引入 MaterializeCSS 的 JavaScript 文件 -->\r\n  \u003Cscript src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fmaterialize\u002F1.0.0\u002Fjs\u002Fmaterialize.min.js\">\u003C\u002Fscript>\r\n\u003C\u002Fbody>\r\n\u003C\u002Fhtml>\r\n```\r\n\r\n在上面的代码中，我们创建了一个包含三个轮播项的轮播容器。每个轮播项都是一个带有`carousel-item`类的`\u003Ca>`元素，其中包含了一个`\u003Cimg>`元素来显示图片。`href`属性中的`!`符号用于区分不同的轮播项。\r\n\r\n然后，我们使用JavaScript代码来初始化轮播组件。在`DOMContentLoaded`事件触发后，我们选择了所有的轮播容器元素，并调用`M.Carousel.init()`方法来初始化轮播组件。\r\n\r\n**三、自定义轮播组件**\r\n\r\nMaterializeCSS的轮播组件还支持各种自定义选项，如自动播放、指示器、导航按钮等。你可以通过添加额外的类和属性来定制轮播组件的外观和行为。\r\n\r\n例如，要启用自动播放功能，你可以在轮播容器上添加`autoplay`类：\r\n\r\n```html\r\n\u003Cdiv class=\"carousel autoplay\">\r\n  \u003C!-- 轮播项 -->\r\n\u003C\u002Fdiv>\r\n```\r\n\r\n要显示导航按钮，你可以在轮播容器上添加`indicators`类：\r\n\r\n```html\r\n\u003Cdiv class=\"carousel indicators\">\r\n  \u003C!-- 轮播项 -->\r\n\u003C\u002Fdiv>\r\n```\r\n\r\n**四、总结**\r\n\r\n通过使用MaterializeCSS的轮播组件，我们可以轻松地构建具有现代化风格的轮播效果，为网页增添动态和吸引力。通过简单的HTML和JavaScript代码，我们可以自定义轮播组件的外观和行为，满足不同的设计需求。希望本文能帮助你更好地理解和使用MaterializeCSS的轮播组件。\r\n",{"id":45,"created_at":46,"updated_at":46,"code":47,"author_id":7,"book_id":4,"slug":48,"article_id":49,"title":50,"sort_order":45,"content":51,"status":12},39,"2024-04-14T13:02:33.285+08:00","Wk8YGKGx","掌握-materialize-css-框架构建现代化网页的利器-39",189,"掌握 Materialize CSS 框架：构建现代化网页的利器","在现代网页设计中，一个强大的 CSS 框架可以帮助我们快速构建美观、功能强大的网站。Materialize CSS 是一个基于 Google 的 Material Design 设计的 CSS 框架，它可以帮助我们快速构建具有现代化风格的网页。在本文中，我们将介绍 Materialize CSS 的基本用法和代码示例，帮助读者掌握这个强大的工具。\r\n\r\n一、Materialize CSS 的特点\r\n\r\nMaterialize CSS 是一个开源的 CSS 框架，它具有以下特点：\r\n\r\n1. 基于 Material Design 设计，具有现代化的设计风格。\r\n2. 提供丰富的组件和样式，方便快速构建网页。\r\n3. 支持响应式设计，能够自适应不同大小的屏幕。\r\n4. 易于定制和扩展，方便开发者根据需求进行自定义。\r\n\r\n二、Materialize CSS 的基本用法\r\n\r\n1. 引入 Materialize CSS\r\n\r\n要使用 Materialize CSS，首先需要将其引入到你的网页中。你可以通过 CDN 或者下载本地文件的方式引入 Materialize CSS。\r\n\r\n```html\r\nhtml\u003C!DOCTYPE html>\r\n\u003Chtml>\r\n\u003Chead>\r\n  \u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fmaterialize\u002F1.0.0\u002Fcss\u002Fmaterialize.min.css\">\r\n\u003C\u002Fhead>\r\n\u003Cbody>\r\n  \u003C!-- 网页内容 -->\r\n\u003C\u002Fbody>\r\n\u003C\u002Fhtml>\r\n```\r\n\r\n1. 使用 Materialize CSS 组件\r\n\r\nMaterialize CSS 提供了丰富的组件，如导航栏、按钮、卡片、表单等。要使用这些组件，只需要在 HTML 中添加相应的类和属性即可。\r\n\r\n例如，要创建一个带有 Material Design 风格的导航栏，可以使用以下代码：\r\n\r\n```html\r\n\u003Cnav>\r\n  \u003Cdiv class=\"nav-wrapper\">\r\n    \u003Ca href=\"#\" class=\"brand-logo\">Logo\u003C\u002Fa>\r\n    \u003Cul id=\"nav-mobile\" class=\"right hide-on-med-and-down\">\r\n      \u003Cli>\u003Ca href=\"sass.html\">Sass\u003C\u002Fa>\u003C\u002Fli>\r\n      \u003Cli>\u003Ca href=\"badges.html\">Components\u003C\u002Fa>\u003C\u002Fli>\r\n      \u003Cli>\u003Ca href=\"collapsible.html\">JavaScript\u003C\u002Fa>\u003C\u002Fli>\r\n    \u003C\u002Ful>\r\n  \u003C\u002Fdiv>\r\n\u003C\u002Fnav>\r\n```\r\n\r\n在上面的代码中，我们使用了 `nav`、`nav-wrapper`、`brand-logo`、`right`、`hide-on-med-and-down` 等 Materialize CSS 提供的类，创建了一个具有 Material Design 风格的导航栏。\r\n\r\n三、Materialize CSS 的代码示例\r\n\r\n下面是一个使用 Materialize CSS 构建的简单网页的代码示例：\r\n\r\n```html\r\n\u003C!DOCTYPE html>\r\n\u003Chtml>\r\n\u003Chead>\r\n  \u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fmaterialize\u002F1.0.0\u002Fcss\u002Fmaterialize.min.css\">\r\n\u003C\u002Fhead>\r\n\u003Cbody>\r\n  \u003Cnav>\r\n    \u003Cdiv class=\"nav-wrapper\">\r\n      \u003Ca href=\"#\" class=\"brand-logo\">Logo\u003C\u002Fa>\r\n      \u003Cul id=\"nav-mobile\" class=\"right hide-on-med-and-down\">\r\n        \u003Cli>\u003Ca href=\"#\">首页\u003C\u002Fa>\u003C\u002Fli>\r\n        \u003Cli>\u003Ca href=\"#\">产品\u003C\u002Fa>\u003C\u002Fli>\r\n        \u003Cli>\u003Ca href=\"#\">关于我们\u003C\u002Fa>\u003C\u002Fli>\r\n      \u003C\u002Ful>\r\n    \u003C\u002Fdiv>\r\n  \u003C\u002Fnav>\r\n\r\n  \u003Cdiv class=\"container\">\r\n    \u003Cdiv class=\"row\">\r\n      \u003Cdiv class=\"col s12 m6\">\r\n        \u003Cdiv class=\"card\">\r\n          \u003Cdiv class=\"card-image\">\r\n            \u003Cimg src=\"image.jpg\">\r\n            \u003Cspan class=\"card-title\">Card Title\u003C\u002Fspan>\r\n          \u003C\u002Fdiv>\r\n          \u003Cdiv class=\"card-content\">\r\n            \u003Cp>Some quick example text to build on the card title and make up the bulk of the card's content.\u003C\u002Fp>\r\n          \u003C\u002Fdiv>\r\n          \u003Cdiv class=\"card-action\">\r\n            \u003Ca href=\"#\">This is a link\u003C\u002Fa>\r\n          \u003C\u002Fdiv>\r\n        \u003C\u002Fdiv>\r\n      \u003C\u002Fdiv>\r\n    \u003C\u002Fdiv>\r\n  \u003C\u002Fdiv>\r\n\r\n  \u003Cscript src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fmaterialize\u002F1.0.0\u002Fjs\u002Fmaterialize.min.js\">\u003C\u002Fscript>\r\n\u003C\u002Fbody>\r\n\u003C\u002Fhtml>\r\n```\r\n\r\n在上面的代码中，我们使用了 Materialize CSS 的导航栏、卡片等组件，构建了一个简单的网页。同时，我们引入了 Materialize CSS 的 JavaScript 文件，以便使用其提供的 JavaScript 功能。\r\n\r\n四、总结\r\n\r\nMaterialize CSS 是一个功能强大的 CSS 框架，它可以帮助我们快速构建具有现代化风格的网页\r\n",{"id":45,"created_at":46,"updated_at":46,"code":47,"author_id":7,"book_id":4,"slug":48,"article_id":49,"title":50,"sort_order":45,"content":51,"status":12}]