分类前端技术下的文章

2024-08-17

在HTML中使用Vue 3，你需要引入Vue的CDN链接，并在HTML文件中编写Vue代码。以下是一个简单的HTML示例，展示了如何使用Vue 3：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 Example</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
      {{ message }}
    </div>
 
    <script>
      Vue.createApp({
        data() {
          return {
            message: 'Hello Vue 3!'
          }
        }
      }).mount('#app');
    </script>
</body>
</html>

在这个例子中，我们通过script标签引入了Vue 3的CDN链接。然后，我们创建了一个新的Vue应用程序，并将其挂载到页面上ID为app的元素上。在{{ message }}中，我们使用了Vue的插值表达式来显示数据属性message的值。当页面加载时，"Hello Vue 3!"将显示在相应的位置。

2024-08-17

在HTML中，可以通过设置<textarea>或<input type="text">的resize属性为vertical或horizontal或both来禁止用户手动调整文本域的大小。但是，这种方法并不是所有浏览器都支持。

一个更通用的方法是通过CSS来隐藏滚动条，并设置固定的高度和宽度。这样用户就无法通过拖动滚动条来改变文本域的大小。

以下是一个示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>禁止拖动文本域</title>
<style>
    /* 针对textarea的样式 */
    textarea {
        width: 300px;        /* 设置固定宽度 */
        height: 100px;       /* 设置固定高度 */
        resize: none;        /* 禁止用户调整大小 */
        overflow: hidden;    /* 隐藏滚动条 */
    }
</style>
</head>
<body>
<textarea rows="4" cols="50">这是一个不能手动拖动的文本域。</textarea>
</body>
</html>

在这个示例中，textarea的resize属性被设置为none，这禁止用户通过拖动文本域的右下角来调整其大小。同时，overflow属性被设置为hidden，这隐藏了滚动条，使得用户不能通过滚动来查看不在视图中的文本。通过固定width和height，文本域的大小也被固定住了。

- 阅读更多 -

Html —— 表白弹幕特效（效果，已开源

System

2024-08-17

所有,html

在HTML中创建一个表白弹幕特效，可以使用JavaScript和CSS来实现。以下是一个简单的实现示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Secret Message</title>
<style>
  #loveMessage {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    z-index: 1000;
    opacity: 0;
    transition: all 0.5s ease;
  }
  #loveMessage.active {
    opacity: 1;
  }
</style>
</head>
<body>
 
<div id="loveMessage">
  他/她喜欢你！
</div>
 
<script>
  // 设置一个随机的几率来显示弹幕，例如50%
  const showProbability = 0.5;
  const loveMessage = document.getElementById('loveMessage');
 
  // 显示弹幕的函数
  function showLoveMessage() {
    loveMessage.classList.add('active');
    // 延迟关闭弹幕，可以根据需要调整时间
    setTimeout(() => loveMessage.classList.remove('active'), 5000);
  }
 
  // 判断是否显示弹幕
  if (Math.random() < showProbability) {
    showLoveMessage();
  }
</script>
 
</body>
</html>

这段代码实现了一个随机弹幕，当页面加载时，如果随机数小于设定的显示概率，则弹幕会随机显示。弹幕会在一段时间后自动消失。CSS用于制作弹幕的样式，JavaScript用于控制弹幕的显示和隐藏。弹幕的内容和显示概率可以根据需要进行自定义。

html写一个登录注册页面

2024-08-17

😩抱歉，出了点小问题，请稍后重试

数据可视化-ECharts Html项目实战

System

2024-08-17

所有,html




<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
 
        function renderChart(option) {
            myChart.setOption(option, true);
        }
 
        app.init = function () {
            option = {
                // ECharts 图表配置项
                series: [
                    {
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: [
                            {value: 335, name: '直达'},
                            {value: 310, name: '邮件营销'},
                            {value: 234, name: '联盟广告'},
                            {value: 135, name: '视频广告'},
                            {value: 1548, name: '搜索引擎'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            renderChart(option);
        };
 
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
</body>
</html>

这段代码创建了一个简单的饼图，使用了ECharts的基础配置项来展示数据。在实际项目中，你可以根据需要调整图表类型、数据和配置项来满足不同的可视化需求。

- 阅读更多 -

HTML跳动的爱心

System

2024-08-17

所有,html

要创建HTML跳动的爱心，可以使用CSS3动画来实现。以下是一个简单的示例：

HTML:




<div class="heart">
  <div class="top"></div>
  <div class="bottom"></div>
</div>

CSS:




.heart {
  position: relative;
  width: 100px;
  height: 100px;
  background: red;
  animation: beat 0.8s infinite;
}
 
.heart .top {
  position: absolute;
  top: 0;
  left: 50px;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
}
 
.heart .bottom {
  position: absolute;
  bottom: 0;
  left: 50px;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 0 0 50px 50px;
}
 
@keyframes beat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

这段代码定义了一个心形结构，使用CSS动画@keyframes beat来实现跳动效果。通过调整transform: scale(1.1)的比例，可以使心跳动的更大。

- 阅读更多 -

测开：前端基础-css页面布局-定位

System

2024-08-17

所有,css3

在CSS中，页面布局常常涉及到元素的定位问题。CSS提供了几种定位机制，包括静态定位（Static Positioning）、相对定位（Relative Positioning）、绝对定位（Absolute Positioning）、固定定位（Fixed Positioning）和粘性定位（Sticky Positioning）。

以下是一个使用绝对定位来创建复杂布局的例子：

HTML:




<div class="container">
  <div class="header">Header</div>
  <div class="content">
    <div class="sidebar">Sidebar</div>
    <div class="main-content">Main Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

CSS:




.container {
  min-height: 100vh;
  position: relative;
}
 
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #333;
  color: white;
  z-index: 10;
}
 
.content {
  position: absolute;
  top: 60px;
  bottom: 40px;
  left: 0;
  width: 100%;
  overflow: hidden;
}
 
.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: #555;
}
 
.main-content {
  position: absolute;
  top: 0;
  left: 200px;
  width: calc(100% - 200px);
  height: 100%;
  background-color: #aaa;
}
 
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: #333;
  color: white;
  z-index: 10;
}

在这个例子中，我们使用了绝对定位来固定各个元素在页面中的位置。.container 设置了 position: relative; 以便作为绝对定位的参照点。.header 和 .footer 被固定在顶部和底部，而 .content 被设置为从顶部的60px开始，从底部的40px结束，从而为 .sidebar 和 .main-content 提供了空间。.sidebar 占据了左侧的200px宽度，.main-content 则占据了剩余的空间。

- 阅读更多 -

css 样式实战

System

2024-08-17

所有,css3

在这个实战中，我们将创建一个简单的网页，其中包含一个标题和一个图片列表，并且应用了一些CSS样式来增强用户体验。

HTML部分 (index.html):




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实战：CSS样式</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>欢迎来到我的网站</h1>
    </header>
    <section>
        <h2>图片列表</h2>
        <ul class="image-list">
            <li><img src="image1.jpg" alt="图片1"></li>
            <li><img src="image2.jpg" alt="图片2"></li>
            <li><img src="image3.jpg" alt="图片3"></li>
        </ul>
    </section>
</body>
</html>

CSS部分 (styles.css):




/* 全局样式 */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
    color: #333;
    margin: 0;
    padding: 0;
}
 
/* 标题样式 */
h1, h2 {
    margin: 10px 0;
    padding: 10px;
    color: #555;
    text-align: center;
    background-color: #eee;
    border-radius: 5px;
}
 
/* 图片列表样式 */
.image-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
 
.image-list li {
    float: left;
    margin-right: 10px;
}
 
.image-list img {
    display: block;
    width: 150px;
    height: 150px;
    object-fit: cover;
}
 
/* 清除浮动 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

在这个例子中，我们定义了全局的字体和背景颜色，为标题和图片列表创建了统一的边距和填充，并且使用了float属性来创建图片列表的水平布局。最后，我们使用了一个伪元素来清除浮动，确保图片能够正确地在列表中排列。这个简单的实例展示了如何使用CSS来增强一个静态网页的外观，而不需要使用JavaScript。

- 阅读更多 -

flex布局列表页（一行内容比较多，长度比较长）

System

2024-08-17

所有,css3

要创建一个使用Flex布局的列表页，并且每行的内容较多且长度较长，可以使用CSS Flexbox布局。以下是一个简单的HTML和CSS示例，演示了如何实现这一布局。

HTML:




<div class="list-container">
  <div class="list-item">内容1</div>
  <div class="list-item">内容2</div>
  <div class="list-item">内容3</div>
  <!-- 更多列表项 -->
</div>

CSS:




.list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;
}
 
.list-item {
  flex: 0 0 48%; /* 每个项目占据的宽度为父容器宽度的48%，足够多内容可以放下 */
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}
 
/* 可以添加一些样式以美化列表项 */
.list-item:nth-child(even) {
  background-color: #f0f0f0;
}

这个布局允许列表项以每行两个的形式自动换行，列表项的宽度设置为容器宽度的48%，这样每行可以放下至少两个这样宽度的列表项，而且列表项之间有空间分隔。如果需要，可以进一步调整.list-item的flex属性来改变每个项目的宽度比例。

- 阅读更多 -

【css】使用Animate.css

System

2024-08-17

所有,css3

Animate.css 是一个以 CSS3 动画制作的库，它提供了很多预设的动画效果，可以直接应用到网页元素上。要使用 Animate.css，首先需要在 HTML 中引入该库，然后给需要应用动画的元素添加一个或多个类。

以下是一个简单的例子，展示如何使用 Animate.css 中的一个动画：

首先，在 HTML 中引入 Animate.css 文件：




<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

接着，在 HTML 中给元素添加 animated 类和一个动画名称类（例如 bounce）：




<div class="animated bounce">这是一个会抖动的盒子</div>

animated 类是 Animate.css 中必需的，用于触发动画。动画名称类是你想要应用的动画效果的名称，比如 bounce、fadeIn 等。

如果你想要动画只播放一次，可以添加 infinite 类，或者使用 CSS 的 animation-iteration-count 属性：




<div class="animated bounce infinite">这是一个会无限次抖动的盒子</div>

如果你想要动画在某个时刻开始和结束，可以使用 animation-duration 和 animation-fill-mode 属性：




<div style="animation-duration: 2s; animation-fill-mode: forwards;" class="animated bounce">这是一个在2秒内播放一次的抖动动画盒子</div>

以上代码展示了如何使用 Animate.css 中的一个动画。你可以在 Animate.css 的官方文档中查看更多预定义的动画效果，并按照上述方法应用到你的网页中。

- 阅读更多 -