1. 首页
  2. 作者
  3. System
html 简单的网页横向滚动
System
2024-08-09
所有,html

要创建一个简单的HTML横向滚动页面，您可以使用<marquee>标签或CSS来实现视觉滚动效果。但请注意，<marquee>标签是一个非标准特性，已被W3C宣布弃用。

以下是使用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>
  .scroll-container {
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
  }
  .scroll-content {
    display: inline-block;
    animation: scroll-left 10s linear infinite;
  }
  @keyframes scroll-left {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
  }
</style>
</head>
<body>
 
<div class="scroll-container">
  <div class="scroll-content">
    这是一段将会滚动的文本内容。这是一段将会滚动的文本内容。
  </div>
</div>
 
</body>
</html>

在这个例子中，.scroll-container 创建了一个滚动容器，.scroll-content 是需要滚动的内容。CSS @keyframes 规则定义了一个名为 scroll-left 的动画，使得内容从右向左滚动。您可以根据需要调整动画的时长（现在设置为10秒）和滚动速率。

- 阅读更多 -
结合html与Echarts绘制饼状图
System
2024-08-09
所有,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;
        option = {
            title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: 1048, name: '搜索引擎'},
                        {value: 735, name: '直接访问'},
                        {value: 580, name: '邮件营销'},
                        {value: 484, name: '联盟广告'},
                        {value: 300, name: '视频广告'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    </script>
</body>
</html>

这段代码创建了一个简单的饼状图，使用ECharts库来渲染图表。图表的配置项包括标题、工具提示、图例和系列数据（饼图的数据）。这个例子展示了如何将ECharts集成到一个HTML页面中，并设置了基本的图表选项。

- 阅读更多 -
vue3+vite项目在html中输出环境变量
System
2024-08-09
所有,html

在Vue 3 + Vite项目中，你可以通过import.meta.env对象来访问环境变量。环境变量通常定义在.env文件中，并且可以有多个文件，比如.env.local、.env.development.local等。

首先，在项目根目录下创建.env文件，并添加你的环境变量：




# .env
VUE_APP_API_URL=https://api.example.com

然后，在Vue组件中，你可以使用import.meta.env来访问这些变量：




<template>
  <div>
    API URL: {{ apiUrl }}
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
 
const apiUrl = ref(import.meta.env.VUE_APP_API_URL);
 
onMounted(() => {
  console.log(apiUrl.value); // 将会输出 "https://api.example.com"
});
</script>

请确保你的环境变量名以VUE_APP_开头，这是Vite默认识别的环境变量前缀。在你的Vite配置或者Vue项目中，这个前缀是可以更改的，但是出于简洁性和常规使用情况，推荐使用默认的VUE_APP_前缀。

- 阅读更多 -
html好看的登录界面2（十四种风格登录源码）_html登录页面
System
2024-08-09
所有,html

以下是一个使用HTML和CSS创建的简单而又好看的登录界面示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style>
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
  }
  .login-container {
    width: 100%;
    margin: 0 auto;
    margin-top: 100px;
    max-width: 500px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
  }
  .login-container h2 {
    text-align: center;
    margin-bottom: 20px;
  }
  .login-container input[type="text"],
  .login-container input[type="password"] {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 3px;
  }
  .login-container input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
  }
  .login-container input[type="submit"]:hover {
    background-color: #4cae4c;
  }
  .login-container a {
    text-decoration: none;
    color: #5cb85c;
    display: block;
    text-align: center;
    margin-top: 20px;
  }
</style>
</head>
<body>
 
<div class="login-container">
  <h2>Login to Your Account</h2>
  <form action="">
    <input type="text" placeholder="Username" required>
    <input type="password" placeholder="Password" required>
    <input type="submit" value="Login">
  </form>
  <a href="#">Forgot Password?</a>
</div>
 
</body>
</html>

这个示例使用了简单的HTML结构和CSS样式来创建一个现代化的登录界面。它有一个居中的登录容器，包含一个标题、输入框、提交按钮和一个忘记密码的链接。这个界面简洁而又美观，适合用在个人项目或者小型网站上。

- 阅读更多 -
“治疗“xss攻击的“特效药“:DOMPurify，让HTML更安全
System
2024-08-09
所有,html

DOMPurify是一个用于消除不安全的输入的JavaScript库，它可以帮助你防止XSS攻击。以下是如何使用DOMPurify的示例代码：

首先，你需要安装DOMPurify库：




npm install dompurify

然后，你可以在你的JavaScript代码中引入并使用DOMPurify：




const { DOMPurify } = require('dompurify');
 
// 假设你有一些不安全的HTML内容
let unsafeHtml = '<script>alert("XSS")</script>这是安全的文本';
 
// 使用DOMPurify来消除不安全的部分
let safeHtml = DOMPurify.sanitize(unsafeHtml);
 
// 输出结果，你会看到<script>标签被消除了
console.log(safeHtml); // 输出: "这是安全的文本"

DOMPurify不仅仅可以消除不安全的标签，还可以移除标签属性，例如onclick、onerror等事件处理属性，以及style、class等，从而有效地提升你的网站或应用的安全性。

- 阅读更多 -
前端 CSS 经典：grid 栅格布局
System
2024-08-09
所有,css

CSS Grid 是一种二维布局系统，它将网页划分成一个个网格，可以更好地对网页进行布局。以下是一个使用 CSS Grid 创建的简单的三列布局的示例：




.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列布局，每列占据1/3 */
  grid-gap: 10px; /* 网格间隙 */
  padding: 10px; /* 容器内边距 */
}
 
.item {
  background-color: #f2f2f2; /* 每个项目的背景颜色 */
  padding: 20px; /* 每个项目的内边距 */
  text-align: center; /* 文本居中 */
}



<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

这个例子创建了一个具有3列的网格布局，每个网格项都有相同的宽度，并且它们将填充整个容器。grid-template-columns: repeat(3, 1fr); 表示网格布局将被划分成三个相等宽度的列，每个列占据1/3的可用空间。1fr 表示每个网格轨道的固定尺寸是相等的。

- 阅读更多 -
flex 布局设置最后一个元素靠右 margin-left: auto
System
2024-08-09
所有,css3

在Flex布局中，如果你想要让最后一个子元素靠右，可以不使用margin-left: auto，而是使用margin-left: auto配合margin-top: auto来对齐到容器的右上角。如果你只是想要让最后一个子元素靠右并且在垂直方向上紧跟其前面的元素，你可以使用justify-content: flex-end来达到这个效果。

以下是一个简单的Flex布局示例，其中最后一个子元素将显示在容器的右侧：




<style>
  .flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end; /* 这会使子元素靠右 */
  }
 
  .flex-item {
    margin: 5px; /* 为了清楚地展示边距，这里添加了margin */
  }
</style>
 
<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <div class="flex-item">Item 4</div>
  <!-- 最后一个元素将靠右显示 -->
  <div class="flex-item">Item 5</div>
</div>

在这个例子中，.flex-container是一个Flex容器，它通过设置justify-content: flex-end来确保最后一个子元素即Item 5将显示在容器的右侧。其他元素将根据容器的布局排列，最后一个元素靠右。

- 阅读更多 -
使用CSS伪元素制作动感超酷的hover动画
System
2024-08-09
所有,css3

以下是一个使用CSS伪元素制作动感Hover动画的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Effect</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background: #3498db;
    margin: 50px;
    position: relative;
    overflow: hidden;
  }
 
  .box:hover:before {
    filter: blur(5px);
    transform: scale(1.2);
  }
 
  .box:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out;
  }
</style>
</head>
<body>
 
<div class="box"></div>
 
</body>
</html>

这段代码定义了一个.box类，它在悬停时会通过:before伪元素生成一个模糊效果，并且通过缩放来增加动感。悬停时的效果通过CSS过渡(transition)实现平滑的动画效果。

- 阅读更多 -
js 小技巧 （ 根据不同的状态生成不同的颜色和状态 ）
System
2024-08-09
所有,css3

这个问题的解决方案取决于状态和颜色的具体规则。假设有一个简单的状态机制，我们可以使用一个对象来映射状态到颜色，然后通过一个函数来生成颜色。以下是一个示例代码：




// 状态颜色映射对象
const stateToColorMap = {
  'active': 'green',
  'inactive': 'red',
  'pending': 'yellow'
};
 
// 根据状态获取颜色的函数
function getColorByState(state) {
  return stateToColorMap[state] || 'black'; // 默认颜色
}
 
// 示例使用
const activeColor = getColorByState('active'); // 返回 'green'
const pendingColor = getColorByState('pending'); // 返回 'yellow'
const unknownStateColor = getColorByState('unknown'); // 返回 'black'

在这个例子中，stateToColorMap 定义了不同状态对应的颜色。getColorByState 函数接受一个状态作为参数，查询映射对象，并返回对应的颜色。如果状态未在映射中定义，则返回默认颜色black。

- 阅读更多 -
css踩坑记录——css控制强制打印背景
System
2024-08-09
所有,css3

在CSS中，可以使用@media print规则来控制打印时的样式，包括是否显示背景图片和颜色。




@media print {
  body, p, div, ul, li {
    color: #000 !important; /* 确保打印时文本是黑色 */
    background: none !important; /* 移除背景 */
    box-shadow: none !important; /* 移除阴影 */
  }
  
  a, a:visited {
    text-decoration: none !important; /* 移除下划线 */
    color: #000 !important; /* 确保链接是黑色 */
  }
  
  img {
    display: none !important; /* 移除图片 */
  }
}

这段代码将打印样式中的文本颜色设置为黑色，移除所有元素的背景，并且移除图片和超链接的装饰。在打印时，通常不需要背景图片和一些视觉装饰，以保证打印清晰和不影响阅读。

- 阅读更多 -
Copyright © 2026 Tech Blog
All Right Reserved | 京ICP备19053165号