• 爱学习公众号

    关注爱学习公众号

  • 扫码手机阅读更方便

推荐阅读
  • CSS3 弹性盒子

    CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器

  • Vue3 教程

    Vue3 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue 学习起来非常简单,本教程基于 Vue 3.0.5 版本测试。 阅读本教程前,您需要了解的知识: HTML CSS JavaScript

  • Bootstrap4 面包屑导航

    Bootstrap4 面包屑导航(Breadcrumb) 面包屑导航是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置,是在用户界面中的一种导航辅助。 Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS(bootstrap.min.css)中的 ::b

  • Bootstrap4 折叠

    Bootstrap4 折叠 Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。 实例 [mycode3 type='html'] 折叠 Lorem ipsum dolor text.... [/mycode3] 尝试一下 » 实例解析 .collapse 类用于指定一个折叠元素 (实例中的 <div>);

  • Bootstrap4 安装使用

    Bootstrap4 安装使用 我们可以通过以下两种方式来安装 Bootstrap4: 使用 Bootstrap 4 CDN。 从官网 getbootstrap.com 下载 Bootstrap 4。 Bootstrap 4 CDN 国内推荐使用 Staticfile CDN 上的库: Bootstrap4 CDN [mycode3 type='html&#

  • Vue3 目录结构

    Vue3 目录结构 上一章节中我们使用了 npm 安装项目(Vue-cli 和 Vite),我们在 IDE(Vscode、Atom等) 中打开该目录,结构如下所示: 命令行工具 vue-cli(爱学习网-vue3-test): Vite(爱学习网-vue3-test2) 目录解析 目录/文件 说明 build 项目构建(webpack)相关代码 confi

  • Bootstrap 4 Flex

    Bootstrap4 Flex(弹性)布局 Bootstrap4 通过 flex 类来控制页面的布局。 弹性盒子(flexbox) Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局,而不是使用浮动来布局。 弹性盒子是 CSS3 的一种新的布局模式,更适合响应式的设计,如果你还不了解 flex,可以阅读我们的 CSS3 弹性盒子(

  • CSS3 圆角

    #rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #8AC007;

  • Bootstrap4 按钮

    Bootstrap4 按钮 Bootstrap 4 提供了不同样式的按钮。 实例 [mycode3 type='html'] 基本按钮 主要按钮 次要按钮 成功 信息 警告 危险 黑色 浅色 链接 [/mycode3] 尝试一下 » 按钮类可用于 <a>, <button>, 或 &amp

  • Bootstrap4 按钮组

    Bootstrap4 按钮组 Bootstrap 4 中允许我们将按钮放在同一行上。 可以在 <div> 元素上添加 .btn-group 类来创建按钮组。 实例 [mycode3 type='html'] Apple Samsung Sony [/mycode3] 尝试一下 » 提示: 我们可以使用 .

  • CSS3 多媒体查询实例

    CSS3 多媒体查询实例 本章节我们将为大家演示一些多媒体查询实例。 开始之前我们先制作一个电子邮箱的链接列表。HTML 代码如下: 实例 1 <!DOCTYPE html><html><head><style>ul {  &nbs

  • CSS3 多媒体查询

    CSS3 多媒体查询 CSS2 多媒体类型 @media 规则在 CSS2 中有介绍,针对不同媒体类型可以定制不同的样式规则。 例如:你可以针对不同的媒体类型(包括显示器、便携设备、电视机,等等)设置不同的样式规则。 但是这些多媒体类型在很多设备上支持还不够友好。 CSS3 多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置

  • CSS3 弹性盒子

    CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器

  • CSS3 框大小

    CSS3 框大小 [mystyle] #div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: content-box; } #div2 { width: 300px; height: 100px; padding: 50px; bord

  • CSS3 分页

    CSS 分页实例 .article-body ul li { background-image:none} .pagination,.pagination2,.pagination3 { display: inline-block; padding: 0; margin: 8px 0; } .pagination li,.pagination2 li,.pagination3 li

  • CSS3 按钮

    .w3-ripple{ position: relative; background-color: #4CAF50; border: none; font-size: 28px; color: #FFFFFF; padding: 20px; width: 200px; text-align: center; -webkit-tran

  • CSS3 图片

    CSS 图片 本章节将为大家介绍如何使用 CSS 来布局图片。 圆角图片 实例 圆角图片: img {    border-radius: 8px;} 尝试一下 » 实例 椭圆形图片: img {    border-radius: 50%;} 尝试一下 » 缩

  • CSS3 用户界面

    CSS3 用户界面 CSS3 用户界面 在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。 在本章中,您将了解以下的用户界面属性: resize box-sizing outline-offset 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号

  • CSS3 多列

    CSS3 多列 CSS3 可以将文本内容设计成像报纸一样的多列布局,如下实例: .newspaper { border:1px black solid; padding: 15px; -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */

  • CSS3 动画

    [mystyle] #animated_div { width:76px; height:47px; background:#92B901; color:#ffffff; position:relative; font-weight:bold; font-size:20px; padding:10px; animation:animated_div 5s 1; -moz-animation:a

关于 免责声明 联系
Copyright © 2023 爱学习网 浙ICP备18049359号 网站地图 Google地图