昊虹AI笔记

Bootstrap的卡片组件相关知识

01-卡片介绍及常用场合

Bootstrap的卡片组件（Card）是一种常用的UI元素，或者也可称为一种常用的结构，用于呈现信息和内容，通常在网页和应用程序中用于以下情况：

博客文章和新闻文章： 卡片可以用来显示博客文章、新闻文章或其他类似的内容。您可以在卡片内包含文章标题、摘要、作者信息、发布日期和文章图片等。
产品展示： 电子商务网站经常使用卡片来展示产品信息。每个产品都可以在一个独立的卡片中显示，包括产品名称、价格、描述和产品图像。
用户配置文件： 用户配置文件通常以卡片的形式呈现，包括用户头像、姓名、简介、联系信息等。
社交媒体帖子： 社交媒体网站常使用卡片来展示用户的帖子、图片和评论。每个帖子可以在一个卡片中显示，包括帖子文本、图片、点赞和评论等。
任务和待办事项： 卡片可以用于显示任务、待办事项或提醒事项的列表。每个任务可以在一个卡片中显示，包括任务描述、截止日期和状态。
产品特性和服务： 公司网站通常使用卡片来展示其产品特性或提供的服务。每个特性或服务可以在一个独立的卡片中详细介绍。
画廊和图库： 图片画廊和图库常使用卡片来展示图片集。每张图片可以在一个卡片中显示，包括图像、标题和描述。

Bootstrap的卡片组件提供了丰富的样式和排版选项，使您可以轻松地自定义卡片的外观和布局，以适应不同的需求和设计风格。卡片通常用于创建信息块，使内容更具吸引力和可读性。这些卡片可以以单个卡片的形式出现，也可以作为多个卡片的列表或网格排列。

02-一个简单的卡片使用示例

示例代码如下：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>卡片title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<body class="container">
<h3 align="center">定义卡片h3>
<div class="container">
    <div class="card">
        <h1 class="card-title">卡片标题h1>
        <h5 class="card-subtitle text-muted">小标题h5>
        <div class="card-body">
            <p class="card-text">卡片主体内容p>
            <a href="#" class="card-link">注册a>
            <a href="#" class="card-link">登录a>
        div>
    div>
div>
body>
html>

运行效果如下：

03-设置卡片中的图片

03-1-设置卡片顶部的图片

类card-img-top定义一张图片中卡片的顶部。
示例代码如下：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>卡片中的图像title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<body class="container">
<h3 align="center">卡片中的图像h3>
<div class="card float-left" style="width: 25rem;">
    <img src="1.jpg" class="card-img-top" alt="">
    <div class="card-body">
        <p class="card-text">苹果营养价值很高，富含矿物质和维生素，含钙量丰富，有助于代谢掉体内多余盐分，苹果酸可代谢热量，防止肥胖。p>
    div>
div>
html>

运行效果如下：

03-2-设置卡片的背景图片

示例代码如下：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图像背景title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<body class="container">
<h3 align="center">图像背景h3>
<div class="card bg-dark text-white">
    <img src="2.jpg" class="card-img" alt="">
    <div class="card-img-overlay">
    <h3 class="card-title">黄鹤楼送孟浩然之广陵h3>
    <p class="card-text">故人西辞黄鹤楼，烟花三月下扬州。p>
    <p class="card-text">孤帆远影碧空尽，唯见长江天际流。p>
    div>
div>
body>
html>

运行效果如下：

04-卡片列表组效果

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>卡片列表组效果title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<body class="container">
<h3 align="center">卡片列表组效果h3>
<div class="card">
    <div class="card-header">商品类别div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">1. 洗衣机li>
        <li class="list-group-item">2. 冰箱li>
        <li class="list-group-item">3. 空调li>
        <li class="list-group-item">4. 电视机li>
    ul>
div>
body>
html>

运行效果如下：

05-设置卡片的页眉和页脚

示例代码如下：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页眉和页脚title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<body class="container">
<h3 align="center">卡片的页眉和页脚h3>
<div class="card text-center">
    <div class="card-header">热门课程div>
    <div class="card-body">
        <h5 class="card-title">热门训练营h5>
        <p class="card-text">1. 网络安全训练营p>
        <p class="card-text">2. 网站开发训练营p>
        <p class="card-text">3. 智能开发训练营p>
        <p class="card-text">4. Java开发训练营p>
        <a href="#" class="btn btn-primary">报名课程a>
    div>
    <div class="card-footer">打造经典课程div>
div>
body>
html>

运行效果如下：

06-设置卡片的宽度

卡片没有固定宽度。默认情况下，卡片的真实宽度是100%。可以根据需要使用网格系统、宽度类或自定义CSS样式来设置卡片的宽度。

06-1-使用网格系统控制卡片的宽度

示例代码如下：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>控制卡片的宽度title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<body class="container">
    <h2 align="center">使用网格系统控制卡片的宽度h2>
    <div class="row">
        <div class="col-sm-6">
            <div class="card">
                <div class="card-header">热门课程div>
                <div class="card-body">网络安全训练营div>
                <div class="card-footer">打造经典课程div>
            div>
        div>
        <div class="col-sm-6">
            <div class="card">
                <div class="card-header">热门课程div>
                <div class="card-body">网站开发训练营div>
                <div class="card-footer">打造经典课程div>
            div>
        div>
    div>
body>
html>

运行效果如下：

06-2-使用宽度类控制卡片的宽度

可以使用Bootstrap的宽度类 w-* 设置卡片的宽度。可以选择的宽度类包括 w-25、w-50、w-75、和w-100。
示例代码如下：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用宽度类w-50控制卡片的宽度title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<body>
<div class="container">
<h2 align="center">使用宽度类w-50控制卡片的宽度h2>
	<div class="card w-50 float-left">
		<div class="card-header">热门课程div>
		<ul class="list-group list-group-flush">
			<li class="list-group-item">1. 网络安全训练营li>
			<li class="list-group-item">2. 网站开发训练营li>
			<li class="list-group-item">3. 人工智能开发训练营li>
		ul>
		<div class="card-footer">打造经典课程div>
	div>
	<div class="card w-50 float-left">
		<div class="card-header">经典教材div>
		<ul class="list-group list-group-flush">
			<li class="list-group-item">1. 网站安全开发系列教材li>
			<li class="list-group-item">2. 网站开发系列教材li>
			<li class="list-group-item">3. 人工智能开发系列教材li>
		ul>
		<div class="card-footer">打造经典教材div>
	div>	
div>
body>
html>

运行效果如下：

06-3-使用CSS样式来控制卡片的宽度

示例代码如下：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>控制卡片的宽度title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<body class="container">
    <h2 align="center">使用CSS样式来控制卡片的宽度h2>
    <div class="card mb-3" style="width: 15rem">
        <div class="card-body">卡片主体的宽度（15rem）div>
    div>
    <div class="card mb-3" style="width: 20rem">
        <div class="card-body">卡片主体的宽度（20rem）div>
    div>
    <div class="card" style="width: 40rem">
        <div class="card-body">卡片主体的宽度（40rem）div>
    div>
body>
html>

运行效果如下：

07-卡片中的文本的对齐方式

使用Bootstrap中的文本对齐类 text-center、text-center 、text-right可以设置卡片中内容的对齐方式。
示例代码如下：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文本的对齐方式title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<body class="container">
<h2 align="center">文本的对齐方式h2>
<div>
    <div class="card-header text-left ">页眉(左对齐)div>
    <div class="card-body text-center ">卡片的主体(居中对齐)div>
    <div class="card-footer text-right ">页脚(右对齐)div>
div>
html>

运行效果如下：

08-在卡片中添加导航菜单

关于导航菜单的相关知识，可以参考下面两篇博文：
https://blog.csdn.net/wenhao_ir/article/details/133819035
https://blog.csdn.net/wenhao_ir/article/details/133901596
示例代码如下：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加标签导航title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<body class="container">
<h3 align="center">添加标签导航h3>
<div class="card ">
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item">
                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#nav1">家用电器a>
            li>
            <li class="nav-item">
                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#nav2">数码相机a>
            li>
            <li class="nav-item">
                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#nav3">手机电脑a>
            li>
            <li class="nav-item">
                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#nav4">办公设备a>
            li>
            <li class="nav-item">
                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#nav5">水果特产a>
            li>
        ul>
    div>
    <div class="card-body tab-content">
        <div class="tab-pane fade show active" id="nav1">
            <div class="card-body">
                <h5 class="card-title">家用电器h5>
                <p class="card-text"><input type="text" class="form-control">p>
                <a href="#" class="btn btn-primary">搜索a>
            div>
        div>
        <div class="tab-pane fade" id="nav2">
            <div class="card-body">
                <h5 class="card-title">数码相机h5>
                <p class="card-text"><input type="text" class="form-control">p>
                <a href="#" class="btn btn-primary">搜索a>
            div>
        div>
        <div class="tab-pane fade" id="nav3">
            <div class="card-body">
                <h5 class="card-title">手机电脑h5>
                <p class="card-text"><input type="text" class="form-control">p>
                <a href="#" class="btn btn-primary">搜索a>
            div>
        div>
        <div class="tab-pane fade" id="nav4">
            <div class="card-body">
                <h5 class="card-title">办公设备h5>
                <p class="card-text"><input type="text" class="form-control">p>
                <a href="#" class="btn btn-primary">搜索a>
            div>
        div>
        <div class="tab-pane fade" id="nav5">
            <div class="card-body">
                <h5 class="card-title">水果特产h5>
                <p class="card-text"><input type="text" class="form-control">p>
                <a href="#" class="btn btn-primary">搜索a>
            div>
        div>
    div>
div>
body>
html>

运行效果如下：

09-设置卡片的背景颜色

示例代码如下：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>卡片的背景颜色title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<body class="container">
<h3 align="center">卡片的背景颜色h3>
<div class="card text-white bg-primary mb-3">
    <div class="card-header">这里是bg-primarydiv>
div>
<div class="card text-white bg-secondary mb-3">
    <div class="card-header">这里是 bg-secondarydiv>
div>
<div class="card text-white bg-success mb-3">
    <div class="card-header">这里是bg-successdiv>
div>
<div class="card text-white bg-danger mb-3">
    <div class="card-header">这里是bg-dangerdiv>
div>
<div class="card text-white bg-warning mb-3">
    <div class="card-header">这里是bg-warningdiv>
div>
<div class="card text-white bg-info mb-3">
    <div class="card-header">这里是bg-infodiv>
div>
<div class="card text-dark bg-light mb-3">
    <div class="card-header">这里是bg-lightdiv>
div>
<div class="card text-white bg-dark mb-3">
    <div class="card-header">这里是bg-darkdiv>
div>
body>
html>

运行效果如下：

10-设置卡片的边框颜色

示例代码如下：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>卡片的边框颜色title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<body class="container">
<h3 align="center">卡片的边框颜色h3>
<div class="card border-primary mb-3">
    <div class="card-header text-primary"> border-primary边框颜色div>
div>
<div class="card border-secondary mb-3">
    <div class="card-header text-secondary"> border-secondary边框颜色div>
div>
<div class="card border-success mb-3">
    <div class="card-header text-success"> border-success边框颜色div>
div>
<div class="card border-danger mb-3">
    <div class="card-header text-danger">border-danger边框颜色div>
div>
<div class="card border-warning mb-3">
    <div class="card-header text-warning"> border-warning边框颜色div>
div>
<div class="card border-info mb-3">
    <div class="card-header text-info"> border-info边框颜色div>
div>
<div class="card border-light mb-3">
    <div class="card-header"> border-light边框颜色div>
div>
<div class="card border-dark mb-3">
    <div class="card-header text-dark"> border-dark边框颜色div>
div>
body>
html>

运行效果如下：

11-多卡片的排版

11-1-卡片组

使用卡片组的类card-group可将多个卡片结为一个群组，使它们具有相同的宽度和高度。
示例代码如下：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>卡片组title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<body class="container">
<h3 align="center">卡片组排版h3>
<div class="card-group">
    <div class="card">
        <img src="3.jpg" class="card-img-top" >
        <div class="card-body">
            <h5 class="card-title">网络安全训练营h5>
            <p class="card-text"> 从零基础快速入门网络安全,一套课程带你掌握网络安全技术。侧重实际操作。 p>
        div>
        <div class="card-footer">
            <small>打造经典课程small>
        div>
    div>
    <div class="card">
        <img src="4.jpg" class="card-img-top">
        <div class="card-body">
            <h5 class="card-title">网站开发训练营h5>
            <p class="card-text"> 从零基础快速入门网站开发,一套课程带你掌握网站开发技术。侧重实际操作。p>
        div>
        <div class="card-footer">
            <small>打造经典课程small>
        div>
    div>
    <div class="card">
        <img src="5.jpg" class="card-img-top">
        <div class="card-body">
            <h5 class="card-title">Java开发训练营h5>
            <p class="card-text">从零基础快速入门Java开发,一套课程带你掌握Java开发技术。侧重实际操作。p>
        div>
        <div class="card-footer">
            <small>打造经典课程small>
        div>
    div>
div>
body>
html>

运行效果如下：

11-2-卡片阵列

如果需要一套相互不相连，但宽度和高度相同的卡片，可以使用卡片阵列来实现。
相关的类是：card-deck
示例代码如下：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用卡片阵列排版title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<body class="container">
<h3 align="center">使用卡片阵列排版h3>
<div class="card-deck">
    <div class="card">
        <img src="3.jpg" class="card-img-top" >
        <div class="card-body">
            <h5 class="card-title">网络安全训练营h5>
            <p class="card-text"> 从零基础快速入门网路安全,一套课程带你掌握网络安全技术。侧重实际操作。 p>
        div>
        <div class="card-footer">
            <small>打造经典课程small>
        div>
    div>
    <div class="card">
        <img src="4.jpg" class="card-img-top">
        <div class="card-body">
            <h5 class="card-title">网站开发训练营h5>
            <p class="card-text"> 从零基础快速入门网站开发,一套课程带你掌握网站开发技术。侧重实际操作。p>
        div>
        <div class="card-footer">
            <small>打造经典课程small>
        div>
    div>
    <div class="card">
        <img src="5.jpg" class="card-img-top">
        <div class="card-body">
            <h5 class="card-title">Java开发训练营h5>
            <p class="card-text">从零基础快速入门Java开发,一套课程带你掌握Java开发技术。侧重实际操作。p>
        div>
        <div class="card-footer">
            <small>打造经典课程small>
        div>
    div>
div>
body>
html>

运行效果如下：

11-3-多列卡片浮动排版(瀑布流效果)

将卡片包在类card-columns中，可以将卡片设计成浮动排版，浮动排版的顺序是从上到下、从左到右，从而实现瀑布流的效果。
示例代码如下：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>多列卡片title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<body class="container">
<h2 align="center">多列卡片浮动排版h2>
<div class="card-columns">
    <div class="card bg-primary p-3">
        <img src="1.png" class="card-img-top">
    div>
    <div class="card bg-dark p-3">
        <img src="2.png " class="card-img-top">
    div>
    <div class="card bg-info p-3">
        <img src="3.png " class="card-img-top">
    div>
    <div class="card bg-light p-3">
        <img src="4.png " class="card-img-top" >
    div>
    <div class="card bg-success p-3">
        <img src="5.png " class="card-img-top" >
    div>
    <div class="card bg-danger p-3">
        <img src="6.png " class="card-img-top" >
    div>
    <div class="card bg-secondary p-3">
        <img src="7.png" class="card-img-top">
    div>
    <div class="card bg-warning p-3">
        <img src="8.png" class="card-img-top">
    div>
div>
body>
html>

运行效果如下：

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
swagger访问路径 igotyback swagger
Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
html 中如何使用 uniapp 的部分方法某公司摸鱼前端 html uni-app 前端
示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
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前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
00. 这里整理了最全的爬虫框架（Java + Python）有一只柴犬爬虫系列爬虫 java python
目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
详解：如何设计出健壮的秒杀系统？夜空_2cd3
作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
最简单将静态网页挂载到服务器上(不用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等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
斟一小组鸡血视频和自己一起成长
http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
前端代码上传文件余生逆风飞翔前端 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
Dockerfile命令详解之 FROM 清风怎不知意容器化 java 前端 javascript
许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
《HTML 与 CSS—— 响应式设计》陈在天box html css 前端
一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
html+css网页设计旅游网站首页1个页面 html+css+js网页设计 html css 旅游
html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
spring mvc @RequestBody String类型参数 zoyation spring-mvc spring mvc
通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
ubuntu安装opencv最快的方法 Derek重名了
最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
处理标签包裹的字符串，并取出前250字符周bro 前端 javascript 开发语言
//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
h5小游戏定制开发红匣子实力推荐
随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
Vue + Express实现一个表单提交九旬大爷的梦
最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
Nginx的使用场景：构建高效、可扩展的Web架构张某布响丸辣 nginx 前端架构
Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
Enum用法不懂事的小屁孩 enum
以前的时候知道enum，但是真心不怎么用，在实际开发中，经常会用到以下代码: protected final static String XJ = "XJ"; protected final static String YHK = "YHK"; protected final static String PQ = "PQ";
【Spark九十七】RDD API之aggregateByKey bit1129 spark
1. aggregateByKey的运行机制 /** * Aggregate the values of each key, using given combine functions and a neutral "zero value". * This function can return a different result type
hive创建表是报错： Specified key was too long; max key length is 767 bytes daizj hive
今天在hive客户端创建表时报错，具体操作如下 hive> create table test2(id string); FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException(message:javax.jdo.JDODataSto
Map 与 JavaBean之间的转换周凡杨 java 自省转换反射
最近项目里需要一个工具类，它的功能是传入一个Map后可以返回一个JavaBean对象。很喜欢写这样的Java服务，首先我想到的是要通过Java 的反射去实现匿名类的方法调用，这样才可以把Map里的值set 到JavaBean里。其实这里用Java的自省会更方便，下面两个方法就是一个通过反射，一个通过自省来实现本功能。 1：JavaBean类 1 &nb
java连接ftp下载 g21121 java
有的时候需要用到java连接ftp服务器下载，上传一些操作，下面写了一个小例子。 /** ftp服务器地址 */ private String ftpHost; /** ftp服务器用户名 */ private String ftpName; /** ftp服务器密码 */ private String ftpPass; /** ftp根目录 */ private String f
web报表工具FineReport使用中遇到的常见报错及解决办法（二）老A不折腾 finereport web报表 java报表总结
抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。 1、没有返回数据集：在存储过程中的操作语句之前加上set nocount on 或者在数据集exec调用存储过程的前面加上这句。当S
linux 系统cpu 内存等信息查看墙头上一根草 cpu 内存 liunx
1 查看CPU 　　1.1 查看CPU个数　　# cat /proc/cpuinfo | grep "physical id" | uniq | wc -l 　　2 　　**uniq命令：删除重复行;wc –l命令：统计行数** 　　1.2 查看CPU核数　　# cat /proc/cpuinfo | grep "cpu cores" | u
Spring中的AOP aijuans spring AOP
Spring中的AOP Written by Tony Jiang @ 2012-1-18 （转）何为AOP AOP，面向切面编程。在不改动代码的前提下，灵活的在现有代码的执行顺序前后，添加进新规机能。来一个简单的Sample: 目标类： [java] view plain copy print ? package&nb
placeholder(HTML 5) IE 兼容插件 alxw4616 JavaScript jquery jQuery插件
placeholder 这个属性被越来越频繁的使用. 但为做HTML 5 特性IE没能实现这东西. 以下的jQuery插件就是用来在IE上实现该属性的. /** * [placeholder(HTML 5) IE 实现.IE9以下通过测试.] * v 1.0 by oTwo 2014年7月31日 11:45:29 */ $.fn.placeholder = function
Object类,值域,泛型等总结(适合有基础的人看) 百合不是茶泛型的继承和通配符变量的值域 Object类转换
java的作用域在编程的时候经常会遇到,而我经常会搞不清楚这个问题,所以在家的这几天回忆一下过去不知道的每个小知识点变量的值域; package 基础; /** * 作用域的范围 * * @author Administrator * */ public class zuoyongyu { public static vo
JDK1.5 Condition接口 bijian1013 java thread Condition java多线程
Condition 将 Object 监视器方法（wait、notify和 notifyAll）分解成截然不同的对象，以便通过将这些对象与任意 Lock 实现组合使用，为每个对象提供多个等待 set （wait-set）。其中，Lock 替代了 synchronized 方法和语句的使用，Condition 替代了 Object 监视器方法的使用。条件（也称为条件队列或条件变量）为线程提供了一
开源中国OSC源创会记录 bijian1013 hadoop spark MemSQL
一.Strata+Hadoop World（SHW）大会是全世界最大的大数据大会之一。SHW大会为各种技术提供了深度交流的机会，还会看到最领先的大数据技术、最广泛的应用场景、最有趣的用例教学以及最全面的大数据行业和趋势探讨。二.Hadoop &nbs
【Java范型七】范型消除 bit1129 java
范型是Java1.5引入的语言特性，它是编译时的一个语法现象，也就是说，对于一个类，不管是范型类还是非范型类，编译得到的字节码是一样的，差别仅在于通过范型这种语法来进行编译时的类型检查，在运行时是没有范型或者类型参数这个说法的。范型跟反射刚好相反，反射是一种运行时行为，所以编译时不能访问的变量或者方法(比如private)，在运行时通过反射是可以访问的，也就是说，可见性也是一种编译时的行为，在
【Spark九十四】spark-sql工具的使用 bit1129 spark
spark-sql是Spark bin目录下的一个可执行脚本，它的目的是通过这个脚本执行Hive的命令，即原来通过 hive>输入的指令可以通过spark-sql>输入的指令来完成。 spark-sql可以使用内置的Hive metadata-store，也可以使用已经独立安装的Hive的metadata store 关于Hive build into Spark
js做的各种倒计时 ronin47 js 倒计时
第一种：精确到秒的javascript倒计时代码 HTML代码: <form name="form1"> <div align="center" align="middle"
java-37.有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接 bylijinnan java
public class MaxCatenate { /* * Q.37 有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接， * 问这n 个字符串最多可以连成一个多长的字符串，如果出现循环，则返回错误。 */ public static void main(String[] args){
mongoDB安装开窍的石头 mongodb安装基本操作
mongoDB的安装 1:mongoDB下载 https://www.mongodb.org/downloads 2:下载mongoDB下载后解压
[开源项目]引擎的关键意义 comsci 开源项目
一个系统，最核心的东西就是引擎。。。。。而要设计和制造出引擎，最关键的是要坚持。。。。。。现在最先进的引擎技术，也是从莱特兄弟那里出现的，但是中间一直没有断过研发的
软件度量的一些方法 cuiyadll 方法
软件度量的一些方法http://cuiyingfeng.blog.51cto.com/43841/6775/在前面我们已介绍了组成软件度量的几个方面。在这里我们将先给出关于这几个方面的一个纲要介绍。在后面我们还会作进一步具体的阐述。当我们不从高层次的概念级来看软件度量及其目标的时候，我们很容易把这些活动看成是不同而且毫不相干的。我们现在希望表明他们是怎样恰如其分地嵌入我们的框架的。也就是我们度量的
XSD中的targetNameSpace解释 darrenzhu xml namespace xsd targetnamespace
参考链接: http://blog.csdn.net/colin1014/article/details/357694 xsd文件中定义了一个targetNameSpace后，其内部定义的元素，属性，类型等都属于该targetNameSpace,其自身或外部xsd文件使用这些元素，属性等都必须从定义的targetNameSpace中找：例如：以下xsd文件，就出现了该错误，即便是在一
什么是RAID0、RAID1、RAID0+1、RAID5，等磁盘阵列模式? dcj3sjt126com raid
RAID 1又称为Mirror或Mirroring，它的宗旨是最大限度的保证用户数据的可用性和可修复性。 RAID 1的操作方式是把用户写入硬盘的数据百分之百地自动复制到另外一个硬盘上。由于对存储的数据进行百分之百的备份，在所有RAID级别中，RAID 1提供最高的数据安全保障。同样，由于数据的百分之百备份，备份数据占了总存储空间的一半，因而，Mirror的磁盘空间利用率低，存储成本高。 Mir
yii2 restful web服务快速入门 dcj3sjt126com PHP yii2
快速入门 Yii 提供了一整套用来简化实现 RESTful 风格的 Web Service 服务的 API。特别是，Yii 支持以下关于 RESTful 风格的 API：支持 Active Record 类的通用API的快速原型涉及的响应格式（在默认情况下支持 JSON 和 XML) 支持可选输出字段的定制对象序列化适当的格式的数据采集和验证错误
MongoDB查询(3)——内嵌文档查询（七） eksliang MongoDB查询内嵌文档 MongoDB查询内嵌数组
MongoDB查询内嵌文档转载请出自出处：http://eksliang.iteye.com/blog/2177301 一、概述有两种方法可以查询内嵌文档：查询整个文档；针对键值对进行查询。这两种方式是不同的，下面我通过例子进行分别说明。二、查询整个文档例如:有如下文档 db.emp.insert({ &qu
android4.4从系统图库无法加载图片的问题 gundumw100 android
典型的使用场景就是要设置一个头像，头像需要从系统图库或者拍照获得，在android4.4之前，我用的代码没问题，但是今天使用android4.4的时候突然发现不灵了。baidu了一圈，终于解决了。下面是解决方案： private String[] items = new String[] { "图库","拍照" }; /* 头像名称 */
网页特效大全 jQuery等 ini JavaScript jquery css html5 ini
HTML5和CSS3知识和特效 asp.net ajax jquery实例分享一个下雪的特效 jQuery倾斜的动画导航菜单选美大赛示例你会选谁 jQuery实现HTML5时钟功能强大的滚动播放插件JQ-Slide 万圣节快乐！！！向上弹出菜单jQuery插件 htm5视差动画 jquery将列表倒转顺序推荐一个jQuery分页插件 jquery animate
swift objc_setAssociatedObject block(version1.2 xcode6.4) 啸笑天 version
import UIKit class LSObjectWrapper: NSObject { let value: ((barButton: UIButton?) -> Void)? init(value: (barButton: UIButton?) -> Void) { self.value = value
Aegis 默认的 Xfire 绑定方式，将 XML 映射为 POJO MagicMa_007 java POJO xml Aegis xfire
Aegis 是一个默认的 Xfire 绑定方式，它将 XML 映射为 POJO, 支持代码先行的开发.你开发服务类与 POJO,它为你生成 XML schema/wsdl XML 和注解映射概览默认情况下，你的 POJO 类被是基于他们的名字与命名空间被序列化。如果
js get max value in (json) Array qiaolevip 每天进步一点点学习永无止境 max 纵观千象
// Max value in Array var arr = [1,2,3,5,3,2];Math.max.apply(null, arr); // 5 // Max value in Jaon Array var arr = [{"x":"8/11/2009","y":0.026572007},{"x"
XMLhttpRequest 请求 XML,JSON ,POJO 数据 Luob. POJO json Ajax xml XMLhttpREquest
在使用XMlhttpRequest对象发送请求和响应之前，必须首先使用javaScript对象创建一个XMLHttpRquest对象。 var xmlhttp； function getXMLHttpRequest(){ if(window.ActiveXObject){ xmlhttp:new ActiveXObject("Microsoft.XMLHTTP
jquery wuai jquery
以下防止文档在完全加载之前运行Jquery代码，否则会出现试图隐藏一个不存在的元素、获得未完全加载的图像的大小等等 $(document).ready(function(){ jquery代码; }); <script type="text/javascript" src="c:/scripts/jquery-1.4.2.min.js&quo

Bootstrap的卡片组件相关知识

01-卡片介绍及常用场合

02-一个简单的卡片使用示例

03-设置卡片中的图片

03-1-设置卡片顶部的图片

03-2-设置卡片的背景图片

04-卡片列表组效果

05-设置卡片的页眉和页脚

06-设置卡片的宽度

06-1-使用网格系统控制卡片的宽度

06-2-使用宽度类控制卡片的宽度

06-3-使用CSS样式来控制卡片的宽度

07-卡片中的文本的对齐方式

08-在卡片中添加导航菜单

09-设置卡片的背景颜色

10-设置卡片的边框颜色

11-多卡片的排版

11-1-卡片组

11-2-卡片阵列

11-3-多列卡片浮动排版(瀑布流效果)

你可能感兴趣的:(Bootstrap,bootstrap,前端,html)