xiangxiongfly915
xiangxiongfly915

Bootstrap4 总结

文章目录

  • Bootstrap4 总结
    • 概述
    • 安装
      • 使用CDN
      • 使用源码
    • 屏幕尺寸的分割点
    • 响应式容器(Containers)
      • .container-fluid
      • .container
      • .container-{breakpoint}
    • 网格系统(Gird system)
      • 指定列宽
        • 实现8列布局
      • 等列宽
      • auto列宽
      • 响应式列
    • 响应式工具类
      • display属性
      • 其他工具类
    • 组件
      • 按钮
      • 按钮组
      • 轮播图
      • 面包屑导航
      • 弹窗
    • 案例

Bootstrap4 总结

概述

Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能，能够让你快速设计并定制你的网站。

安装

使用CDN

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
  head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js">script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>
  body>
html>

使用源码

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
  head>
  <body>
    <script src="./libs/jquery/jquery-3.5.1.js">script>
    <script src="./libs/bootstrap-4.6.2/js/bootstrap.bundle.min.js">script>
  body>
html>

屏幕尺寸的分割点

  • Bootstrap的一大核心是响应式，底层原理是使用媒体查询为布局和页面创建合理的断点，根据这些断点给不同屏幕尺寸设置不同的CSS样式。
  • Bootstrap4设置了5个断点来构建响应式系统，5个断点分别为：Extral-Small、Small、Medium、Large、Extra large。
断点 中缀 尺寸
Extra-Small None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px

响应式容器(Containers)

  • Containers容器是Bootstrap中最基本的布局元素，并且该布局支持响应式。在使用默认网格系统时是必须的。
  • Containers容器用于包含、填充、内容居中使用。
  • Bootstrap带有三个不同的Containers容器：
    • .container：它在每个断点处会设置不同的max-width。
    • .container-fluid：在所有断点处都是width: 100%。
    • .container-{breakpoint}：默认是width: 100%，直到指定断点才会修改响应的值。
Extra small <576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px
.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px
.container-fluid 100% 100% 100% 100% 100%

.container-fluid

使用.container-fluid作为全宽度容器，横跨视口的整个宽度。

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Documenttitle>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
    <style>
      div {
        background-color: pink;
        height: 40px;
      }
    style>
  head>
  <body>
    <div class="container-fluid">我是boxdiv>
  body>
html>

在这里插入图片描述

.container

.container类是一个响应式的、固定宽度的容器，这意味着它的最大宽度在每个断点处都会改变。

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Documenttitle>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
    <style>
      div {
        background-color: pink;
        height: 40px;
      }
    style>
  head>
  <body>
    <div class="container">我是boxdiv>
  body>
html>

在这里插入图片描述

.container-{breakpoint}

它们允许您指定一个在达到指定断点之前宽度为100%的类，之后我们对每个较高的断点应用max-width。

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Documenttitle>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
    <style>
      div {
        background-color: pink;
        height: 40px;
      }
    style>
  head>
  <body>
    <div class="container-md">我是boxdiv>
  body>
html>

Bootstrap4 总结_第1张图片

网格系统(Gird system)

  • 在我们在开发一个页面时，经常会遇到一些列表（例如，商品列表），这些列表通常都是通过行和列来排版。为了方便我们对这种常见列表的布局，Bootstrap框架对它进行了封装，封装为一个网格系统（Grid system）。
  • Bootstrap网格系统是用于构建移动设备优先的强大布局系统，可支持12列网格、5 个断点和数十个预定义类。
  • 网格系统是有container、row、col三部分组成，底层使用flexbox来布局，并且支持12列网格布局。
    • 底层使用了强大的flexbox来构建弹性布局，并支持12列的网格布局。从Bootstrap2开始，网格系统从16 列转向12列网格，原因之一是12列比以前的16列系统更灵活。
    • 12列网格这意味着我们可将一行分解为12、6、4、3、2和1份：
      • 1列，独占12等份
      • 2列，每列占6等份
      • 3列，每列占4等份
      • 4列，每列占3等份
      • 6列，每列占2等份
      • 12列，每列占1等份

指定列宽

底层是 flex: 0 0 x%，max-width: x%

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Documenttitle>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
    <style>
      .container {
        background-color: gainsboro;
      }
      .mr {
        margin-top: 10px;
      }
      .item {
        height: 40px;
        border: 1px solid red;
        box-sizing: border-box;
      }
    style>
  head>
  <body>
    <div class="container mr">
      <div class="row">
        <div class="col-1 item">1div>
        <div class="col-1 item">2div>
        <div class="col-1 item">3div>
        <div class="col-1 item">4div>
        <div class="col-1 item">5div>
        <div class="col-1 item">6div>
        <div class="col-1 item">7div>
        <div class="col-1 item">8div>
        <div class="col-1 item">9div>
        <div class="col-1 item">10div>
        <div class="col-1 item">11div>
        <div class="col-1 item">12div>
      div>
      <div class="row mr">
        <div class="col-2 item">1div>
        <div class="col-2 item">2div>
        <div class="col-2 item">3div>
        <div class="col-2 item">4div>
        <div class="col-2 item">5div>
        <div class="col-2 item">6div>
      div>
      <div class="row mr">
        <div class="col-3 item">1div>
        <div class="col-3 item">2div>
        <div class="col-3 item">3div>
        <div class="col-3 item">4div>
      div>
      <div class="row mr">
        <div class="col-4 item">1div>
        <div class="col-4 item">2div>
        <div class="col-4 item">3div>
      div>
      <div class="row mr">
        <div class="col-6 item">1div>
        <div class="col-6 item">2div>
      div>
      <div class="row mr">
        <div class="col-12 item">1div>
      div>
    div>
  body>
html>

Bootstrap4 总结_第2张图片

实现8列布局

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Documenttitle>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
    <style>
      .container {
        background-color: gainsboro;
      }
      .mr {
        margin-top: 10px;
      }
      .item {
        height: 40px;
        border: 1px solid red;
        box-sizing: border-box;
      }
    style>
  head>
  <body>
    <div class="container mr">
      <h2>方式一：h2>
      <div class="row">
        <div class="col item">1div>
        <div class="col item">2div>
        <div class="col item">3div>
        <div class="col item">4div>
        <div class="col item">5div>
        <div class="col item">6div>
        <div class="col item">7div>
        <div class="col item">8div>
      div>
      <h2>方式二：h2>
      <div class="row">
        <div class="col-6">
          <div class="row">
            <div class="col-3 item">1div>
            <div class="col-3 item">2div>
            <div class="col-3 item">3div>
            <div class="col-3 item">4div>
          div>
        div>
        <div class="col-6">
          <div class="row">
            <div class="col-3 item">5div>
            <div class="col-3 item">6div>
            <div class="col-3 item">7div>
            <div class="col-3 item">8div>
          div>
        div>
      div>
    div>
  body>
html>

Bootstrap4 总结_第3张图片

等列宽

底层是 flex-grow: 1, max-width: 100%。该类网格系统仅用flexbox布局。

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Documenttitle>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
    <style>
      .container {
        background-color: gainsboro;
      }
      .mr {
        margin-top: 10px;
      }
      .item {
        height: 40px;
        border: 1px solid red;
        box-sizing: border-box;
      }
    style>
  head>
  <body>
    <div class="container mr">
      <div class="row">
        <div class="col item">1div>
        <div class="col item">2div>
        <div class="col item">3div>
        <div class="col item">4div>
        <div class="col item">5div>
        <div class="col item">6div>
        <div class="col item">7div>
        <div class="col item">8div>
        <div class="col item">9div>
        <div class="col item">10div>
        <div class="col item">11div>
        <div class="col item">12div>
        <div class="col item">13div>
        <div class="col item">13div>
        <div class="col item">13div>
        <div class="col item">13div>
      div>
    div>
  body>
html>

在这里插入图片描述

auto列宽

底层是 flex: 0 0 auto; width: auto

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Documenttitle>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
    <style>
      .container {
        background-color: gainsboro;
      }
      .mr {
        margin-top: 10px;
      }
      .item {
        height: 40px;
        border: 1px solid red;
        box-sizing: border-box;
      }
    style>
  head>
  <body>
    <div class="container mr">
      <div class="row">
        <div class="col-auto item">helloworlddiv>
        <div class="col item">1div>
        <div class="col item">2div>
        <div class="col item">3div>
      div>
    div>
  body>
html>

在这里插入图片描述

响应式列

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Documenttitle>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
    <style>
      .container {
        background-color: gainsboro;
      }
      .mr {
        margin-top: 10px;
      }
      .item {
        height: 40px;
        border: 1px solid red;
        box-sizing: border-box;
      }
    style>
  head>
  <body>
    <div class="container mr">
      <div class="row">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">1div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">2div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">3div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">4div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">5div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">6div>
      div>
    div>
  body>
html>

Bootstrap4 总结_第4张图片

响应式工具类

display属性

当我们在开发响应式页面时，可能会有这样的需求：

  • 某个功能在PC端可见，但是在移动端不可见。

  • 因为移动端的屏幕比较小，是不能把PC端中所有的内容都展示出来，所以有些不重要的内容可能在移动端就被简化了。

  • 这时我们就可以借用响应式的工具来实现该功能。

使用响应工具类：

  • 隐藏元素可以给某个元素添加 .d-none 类或 .d-{sm,md,lg,xl,xxl}-none 类中的任何一个。

  • 显示元素可以给某个元素添加 .d-block 类或 .d-{sm,md,lg,xl,xxl}-block 类中的任何一个。

屏幕尺寸 类
在所有尺寸的屏幕上隐藏 .d-none
只在 xs 尺寸的屏幕上隐藏 .d-none .d-sm-block
只在 sm 尺寸的屏幕上隐藏 .d-sm-none .d-md-block
只在 md 尺寸的屏幕上隐藏 .d-md-none .d-lg-block
只在 lg 尺寸的屏幕上隐藏 .d-lg-none .d-xl-block
只在 xl 尺寸的屏幕上隐藏 .d-xl-none
在所有尺寸的屏幕上显示 .d-block
只在 xs 尺寸的屏幕上显示 .d-block .d-sm-none
只在 sm 尺寸的屏幕上显示 .d-none .d-sm-block .d-md-none
只在 md 尺寸的屏幕上显示 .d-none .d-md-block .d-lg-none
只在 lg 尺寸的屏幕上显示 .d-none .d-lg-block .d-xl-none
只在 xl 尺寸的屏幕上显示 .d-none .d-xl-block

其他工具类

快速浮动（Float）：

  • float-left

  • float-right

文本（Text）：

  • text-left、text-right、text-center

  • text-{sm、md、lg、xl}-left

边框：

  • borde border-top border-left …

  • border border-primary border-success

截断文本：

  • text-truncate

组件

按钮

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Documenttitle>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
  head>
  <body>
    <div class="btn btn-primary">按钮一div>
    <div class="btn btn-warning">按钮一div>
    <div class="btn btn-info">按钮一div>

    <button type="button" class="btn btn-primary">Primarybutton>
    <button type="button" class="btn btn-secondary">Secondarybutton>
    <button type="button" class="btn btn-success">Successbutton>
    <button type="button" class="btn btn-danger">Dangerbutton>
    <button type="button" class="btn btn-warning">Warningbutton>
    <button type="button" class="btn btn-info">Infobutton>
    <button type="button" class="btn btn-light">Lightbutton>
    <button type="button" class="btn btn-dark">Darkbutton>
    <button type="button" class="btn btn-link">Linkbutton>

    <script src="./libs/jquery/jquery-3.5.1.js">script>
    <script src="./libs/bootstrap-4.6.2/js/bootstrap.bundle.min.js">script>
  body>
html>

在这里插入图片描述

按钮组

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Documenttitle>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
  head>
  <body>
    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
      <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">1button>
        <button type="button" class="btn btn-secondary">2button>
        <button type="button" class="btn btn-secondary">3button>
        <button type="button" class="btn btn-secondary">4button>
      div>
      <div class="btn-group mr-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">5button>
        <button type="button" class="btn btn-secondary">6button>
        <button type="button" class="btn btn-secondary">7button>
      div>
      <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-secondary">8button>
      div>
    div>

    <script src="./libs/jquery/jquery-3.5.1.js">script>
    <script src="./libs/bootstrap-4.6.2/js/bootstrap.bundle.min.js">script>
  body>
html>

在这里插入图片描述

轮播图

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no" />
    <title>Documenttitle>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
  head>
  <body>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active">li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1">li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2">li>
      ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="./images/0.jpg" class="d-block w-100" alt="..." />
        div>
        <div class="carousel-item">
          <img src="./images/1.jpg" class="d-block w-100" alt="..." />
        div>
        <div class="carousel-item">
          <img src="./images/1.jpg" class="d-block w-100" alt="..." />
        div>
      div>
      <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true">span>
        <span class="sr-only">Previousspan>
      button>
      <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true">span>
        <span class="sr-only">Nextspan>
      button>
    div>

    <script src="./libs/jquery/jquery-3.5.1.js">script>
    <script src="./libs/bootstrap-4.6.2/js/bootstrap.bundle.min.js">script>
  body>
html>

Bootstrap4 总结_第5张图片

面包屑导航

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
    <style>
      .mt {
        margin-top: 10px;
      }
    style>
  head>
  <body>
    <div class="container mt">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Homea>li>
          <li class="breadcrumb-item"><a href="#">Librarya>li>
          <li class="breadcrumb-item active" aria-current="page">Datali>
        ol>
      nav>
    div>
  body>
html>

在这里插入图片描述

弹窗

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <link rel="stylesheet" href="./libs/bootstrap-4.6.2/css/bootstrap.min.css" />
  head>
  <body>
    <button id="btn" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
      Launch demo modal
    button>

    <div class="modal" id="myModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal titleh5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×span>
            button>
          div>
          <div class="modal-body">
            <p>Modal body text goes here.p>
          div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Closebutton>
            <button type="button" class="btn btn-primary">Save changesbutton>
          div>
        div>
      div>
    div>

    <script src="./libs/jquery/jquery-3.5.1.js">script>
    <script src="./libs/bootstrap-4.6.2/js/bootstrap.bundle.min.js">script>
    <script>
      $("#btn").click("click", function () {
        $("#myModal").modal("show");
      });
    script>
  body>
html>

Bootstrap4 总结_第6张图片

案例

代码下载

Bootstrap4 总结_第7张图片

Bootstrap4 总结_第8张图片

你可能感兴趣的:(前端,Bootstrap4)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师
    1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
  • 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript
    1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
  • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
    数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
  • 分布式锁和spring事务管理 暴躁的鱼 锁及事务分布式springjava
    最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
  • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • 【前端】vue 报错:The template root requires exactly one element 程序员-张师傅 前端前端vue.jsjavascript
    【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
  • 从单体到微服务：FastAPI ‘挂载’子应用程序的转变 黑金IT fastapi微服务fastapi架构
    在现代Web应用开发中，模块化架构是一种常见的设计模式，它有助于将大型应用程序分解为更小、更易于管理的部分。FastAPI，作为一个高性能的PythonWeb框架，提供了强大的支持来实现这种模块化设计。通过“挂载”子应用程序，我们可以为不同的功能区域（如前端接口、管理员接口和用户中心）创建独立的应用程序，并将它们整合到一个主应用程序中。本文将详细介绍如何在FastAPI中使用“挂载”子应用程序的方
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • 前端three.js的Sprite模拟下雪动画效果 qq_35430208 three.js前端javascript三维场景中下雪效果threejs实现下雪效果
    一、效果如图所示：二、原理同下雨一样三、完整代码：index.jsimport*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';//模型对象//场景constscene=newTHREE.Scene();scene.add
  • 系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机 rabbit_it qiankun学习前端框架前端阿里云
    一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性
  • ODOO不同版本与平台选择 chouchengyin2080 c#操作系统运维
    1.10.0vs11.0vs8.0截至2017年底，最新的ODOO发布版为ODOO11.0，但功能上有一定精简（去除财务模块，去除工作流支持），技术上变动较大（代码逐步迁移至Python3，前端框架改写得抽象）。所以如果是从生产使用的角度来讲，ODOO10.0是当前最好选择，因为其更稳定，第三方模块也更多更全面。而如果是ODOO技术爱好从业者，则逐步迁移至ODOO11.0也有必要，因为其底层技术架
  • Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数 qcidyu 好用的工具集合代码效率前端技巧Vue开发组合式函数模块管理自动导入NuxtKit
    title:NuxtKit自动导入功能：高效管理你的模块和组合式函数date:2024/9/14updated:2024/9/14author:cmdragonexcerpt:通过使用NuxtKit的自动导入功能，您可以更高效地管理和使用公共函数、组合式函数和VueAPI。无论是单个导入、目录导入还是从第三方模块导入，您都可以通过简单的API调用轻松实现。categories:前端开发tags:N
  • JVM StackMapTable 属性的作用及理解 lijingyao8206 jvm字节码Class文件StackMapTable
            在Java 6版本之后JVM引入了栈图(Stack Map Table)概念。为了提高验证过程的效率，在字节码规范中添加了Stack Map Table属性，以下简称栈图，其方法的code属性中存储了局部变量和操作数的类型验证以及字节码的偏移量。也就是一个method需要且仅对应一个Stack Map Table。在Java 7版
  • 回调函数调用方法 百合不是茶 java
    最近在看大神写的代码时,.发现其中使用了很多的回调 ,以前只是在学习的时候经常用到 ,现在写个笔记 记录一下   代码很简单:           MainDemo  :调用方法  得到方法的返回结果        
  • [时间机器]制造时间机器需要一些材料 comsci 制造
          根据我的计算和推测,要完全实现制造一台时间机器,需要某些我们这个世界不存在的物质     和材料...       甚至可以这样说,这种材料和物质,我们在反应堆中也无法获得......      
  • 开口埋怨不如闭口做事 邓集海 邓集海 做人 做事 工作
    “开口埋怨，不如闭口做事。”不是名人名言，而是一个普通父亲对儿子的训导。但是，因为这句训导，这位普通父亲却造就了一个名人儿子。这位普通父亲造就的名人儿子，叫张明正。 　　 　　张明正出身贫寒，读书时成绩差，常挨老师批评。高中毕业，张明正连普通大学的分数线都没上。高考成绩出来后，平时开口怨这怨那的张明正，不从自身找原因，而是不停地埋怨自己家庭条件不好、埋怨父母没有给他创造良好的学习环境。 　　 　　
  • jQuery插件开发全解析，类级别与对象级别开发 IT独行者 jquery开发插件　函数
    jQuery插件的开发包括两种： 一种是类级别的插件开发，即给 jQuery添加新的全局函数，相当于给 jQuery类本身添加方法。 jQuery的全局函数就是属于 jQuery命名空间的函数，另一种是对象级别的插件开发，即给 jQuery对象添加方法。下面就两种函数的开发做详细的说明。   1 、类级别的插件开发 类级别的插件开发最直接的理解就是给jQuer
  • Rome解析Rss 413277409 Rome解析Rss
    import java.net.URL;  import java.util.List;    import org.junit.Test;    import com.sun.syndication.feed.synd.SyndCategory;  import com.sun.syndication.feed.synd.S
  • RSA加密解密 无量 加密解密rsa
    RSA加密解密代码 代码有待整理 package com.tongbanjie.commons.util; import java.security.Key; import java.security.KeyFactory; import java.security.KeyPair; import java.security.KeyPairGenerat
  • linux 软件安装遇到的问题 aichenglong linux遇到的问题ftp
    1 ftp配置中遇到的问题    500 OOPS: cannot change directory   出现该问题的原因:是SELinux安装机制的问题.只要disable SELinux就可以了   修改方法:1 修改/etc/selinux/config 中SELINUX=disabled    2 source /etc
  • 面试心得 alafqq 面试
    最近面试了好几家公司。记录下； 支付宝，面试我的人胖胖的，看着人挺好的；博彦外包的职位，面试失败； 阿里金融，面试官人也挺和善，只不过我让他吐血了。。。 由于印象比较深，记录下； 1，自我介绍 2，说下八种基本类型；（算上string。楼主才答了3种，哈哈，string其实不是基本类型，是引用类型） 3，什么是包装类，包装类的优点； 4，平时看过什么书？NND，什么书都没看过。。照样
  • java的多态性探讨 百合不是茶 java
    java的多态性是指main方法在调用属性的时候类可以对这一属性做出反应的情况 //package 1; class A{ public void test(){ System.out.println("A"); } } class D extends A{ public void test(){ S
  • 网络编程基础篇之JavaScript-学习笔记 bijian1013 JavaScript
    1.documentWrite <html> <head> <script language="JavaScript"> document.write("这是电脑网络学校"); document.close(); </script> </h
  • 探索JUnit4扩展：深入Rule bijian1013 JUnitRule单元测试
            本文将进一步探究Rule的应用，展示如何使用Rule来替代@BeforeClass，@AfterClass，@Before和@After的功能。         在上一篇中提到，可以使用Rule替代现有的大部分Runner扩展，而且也不提倡对Runner中的withBefores()，withAfte
  • [CSS]CSS浮动十五条规则 bit1129 css
    这些浮动规则，主要是参考CSS权威指南关于浮动规则的总结，然后添加一些简单的例子以验证和理解这些规则。   1. 所有的页面元素都可以浮动 2. 一个元素浮动后，会成为块级元素，比如<span>,a, strong等都会变成块级元素 3.一个元素左浮动，会向最近的块级父元素的左上角移动，直到浮动元素的左外边界碰到块级父元素的左内边界；如果这个块级父元素已经有浮动元素停靠了
  • 【Kafka六】Kafka Producer和Consumer多Broker、多Partition场景 bit1129 partition
    0.Kafka服务器配置 3个broker 1个topic，6个partition，副本因子是2 2个consumer，每个consumer三个线程并发读取   1. Producer package kafka.examples.multibrokers.producers; import java.util.Properties; import java.util.
  • zabbix_agentd.conf配置文件详解 ronin47 zabbix 配置文件
    Aliaskey的别名，例如 Alias=ttlsa.userid:vfs.file.regexp[/etc/passwd,^ttlsa:.:([0-9]+),,,,\1]， 或者ttlsa的用户ID。你可以使用key：vfs.file.regexp[/etc/passwd,^ttlsa:.: ([0-9]+),,,,\1]，也可以使用ttlsa.userid。备注: 别名不能重复，但是可以有多个
  • java--19.用矩阵求Fibonacci数列的第N项 bylijinnan fibonacci
    参考了网上的思路，写了个Java版的： public class Fibonacci { final static int[] A={1,1,1,0}; public static void main(String[] args) { int n=7; for(int i=0;i<=n;i++){ int f=fibonac
  • Netty源码学习-LengthFieldBasedFrameDecoder bylijinnan javanetty
    先看看LengthFieldBasedFrameDecoder的官方API http://docs.jboss.org/netty/3.1/api/org/jboss/netty/handler/codec/frame/LengthFieldBasedFrameDecoder.html API举例说明了LengthFieldBasedFrameDecoder的解析机制，如下： 实
  • AES加密解密 chicony 加密解密
    AES加解密算法，使用Base64做转码以及辅助加密： package com.wintv.common; import javax.crypto.Cipher; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.SecretKeySpec; import sun.misc.BASE64Decod
  • 文件编码格式转换 ctrain 编码格式
    package com.test; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream;
  • mysql 在linux客户端插入数据中文乱码 daizj mysql中文乱码
    1、查看系统客户端，数据库，连接层的编码  查看方法： http://daizj.iteye.com/blog/2174993 进入mysql，通过如下命令查看数据库编码方式： mysql>  show variables like 'character_set_%'; +--------------------------+------
  • 好代码是廉价的代码 dcj3sjt126com 程序员读书
      长久以来我一直主张：好代码是廉价的代码。 当我跟做开发的同事说出这话时，他们的第一反应是一种惊愕，然后是将近一个星期的嘲笑，把它当作一个笑话来讲。 当他们走近看我的表情、知道我是认真的时，才收敛一点。 当最初的惊愕消退后，他们会用一些这样的话来反驳： “好代码不廉价，好代码是采用经过数十年计算机科学研究和积累得出的最佳实践设计模式和方法论建立起来的精心制作的程序代码。” 我只
  • Android网络请求库——android-async-http dcj3sjt126com android
    在iOS开发中有大名鼎鼎的ASIHttpRequest库，用来处理网络请求操作，今天要介绍的是一个在Android上同样强大的网络请求库android-async-http，目前非常火的应用Instagram和Pinterest的Android版就是用的这个网络请求库。这个网络请求库是基于Apache HttpClient库之上的一个异步网络请求处理库，网络处理均基于Android的非UI线程，通
  • ORACLE 复习笔记之SQL语句的优化 eksliang SQL优化Oracle sql语句优化SQL语句的优化
    转载请出自出处：http://eksliang.iteye.com/blog/2097999   SQL语句的优化总结如下   sql语句的优化可以按照如下六个步骤进行： 合理使用索引 避免或者简化排序 消除对大表的扫描 避免复杂的通配符匹配 调整子查询的性能 EXISTS和IN运算符 下面我就按照上面这六个步骤分别进行总结：
  • 浅析：Android 嵌套滑动机制（NestedScrolling） gg163 android移动开发滑动机制嵌套
    谷歌在发布安卓 Lollipop版本之后，为了更好的用户体验，Google为Android的滑动机制提供了NestedScrolling特性 NestedScrolling的特性可以体现在哪里呢？<!--[if !supportLineBreakNewLine]--><!--[endif]--> 比如你使用了Toolbar，下面一个ScrollView，向上滚
  • 使用hovertree菜单作为后台导航 hvt JavaScriptjquery.nethovertreeasp.net
      hovertree是一个jquery菜单插件，官方网址：http://keleyi.com/jq/hovertree/ ，可以登录该网址体验效果。 0.1.3版本：http://keleyi.com/jq/hovertree/demo/demo.0.1.3.htm hovertree插件包含文件： http://keleyi.com/jq/hovertree/css
  • SVG 教程 （二）矩形 天梯梦 svg
    SVG <rect> SVG Shapes SVG有一些预定义的形状元素，可被开发者使用和操作： 矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path>
  • 一个简单的队列 luyulong java数据结构队列
    public class MyQueue { private long[] arr; private int front; private int end; // 有效数据的大小 private int elements; public MyQueue() { arr = new long[10]; elements = 0; front
  • 基础数据结构和算法九：Binary Search Tree sunwinner Algorithm
      A binary search tree (BST) is a binary tree where each node has a Comparable key (and an associated value) and satisfies the restriction that the key in any node is larger than the keys in all
  • 项目出现的一些问题和体会 Steven-Walker DAOWebservlet
         第一篇博客不知道要写点什么，就先来点近阶段的感悟吧。     这几天学了servlet和数据库等知识，就参照老方的视频写了一个简单的增删改查的，完成了最简单的一些功能，使用了三层架构。 dao层完成的是对数据库具体的功能实现，service层调用了dao层的实现方法，具体对servlet提供支持。  &
  • 高手问答：Java老A带你全面提升Java单兵作战能力！ ITeye管理员 java
    本期特邀《Java特种兵》作者：谢宇，CSDN论坛ID: xieyuooo 针对JAVA问题给予大家解答，欢迎网友积极提问，与专家一起讨论! 作者简介： 淘宝网资深Java工程师，CSDN超人气博主，人称“胖哥”。 CSDN博客地址： http://blog.csdn.net/xieyuooo 作者在进入大学前是一个不折不扣的计算机白痴，曾经被人笑话过不懂鼠标是什么，
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他