1. 首页
  2. 作者
  3. System
html内实现会员登录验证功能+登录窗口(显示更多条数)
System
2024-08-11
所有,html



<!DOCTYPE html>
<html>
<head>
    <title>会员登录</title>
    <style>
        body { font-family: Arial, sans-serif; }
        form { border: 1px solid #ccc; padding: 20px; width: 300px; margin: 50px auto; }
        input[type="text"], input[type="password"] { width: 200px; padding: 10px; margin: 10px 0; }
        input[type="submit"] { width: 210px; padding: 10px; margin: 10px 0; }
        label { display: block; margin-bottom: 10px; }
    </style>
</head>
<body>
 
<form action="/submit_your_login_form" method="post">
    <label for="username">用户名:
        <input type="text" id="username" name="username" placeholder="请输入用户名" required>
    </label>
    <label for="password">密码:
        <input type="password" id="password" name="password" placeholder="请输入密码" required>
    </label>
    <input type="submit" value="登录">
</form>
 
</body>
</html>

这个简单的HTML登录表单包含了基本的样式和输入字段，以及一个提交按钮。表单数据将通过POST方法发送到服务器的一个处理页面（这里假设为/submit_your_login_form）。在实际应用中，你需要根据自己的服务器端逻辑来修改action属性的值。此外，required属性用于确保输入字段在提交前必须被填写。

- 阅读更多 -
vue项目通过＜iframe＞嵌套静态html项目，并实现数据交互
System
2024-08-11
所有,html

在Vue项目中嵌套静态HTML项目并实现数据交互，可以通过以下步骤实现：

  1. 在Vue项目中创建一个HTML文件，并将其放在Vue项目的静态资源目录（通常是public或static）中。
  2. 在Vue组件中，使用<iframe>标签嵌入这个HTML文件。
  3. 通过postMessage API在Vue组件和嵌套的HTML页面之间发送数据。

以下是具体实现的示例代码：

Vue组件中的代码：




<template>
  <div>
    <!-- 嵌入静态HTML页面 -->
    <iframe id="static-iframe" :src="iframeSrc" @load="iframeLoaded"></iframe>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      iframeSrc: process.env.BASE_URL + 'static-page.html'
    };
  },
  methods: {
    iframeLoaded() {
      // 当iframe加载完成后发送数据
      const message = { greeting: 'Hello from Vue app!' };
      this.$refs.iframe.contentWindow.postMessage(message, '*');
    }
  }
};
</script>

静态HTML页面中的代码 (static-page.html)：




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Static Page</title>
  <script>
    // 监听从Vue应用发送来的消息
    window.addEventListener('message', function(event) {
      if (event.origin !== window.location.origin) return;
      
      const data = event.data;
      console.log('Received message:', data);
      // 处理数据...
    });
  </script>
</head>
<body>
  <h1>This is a static HTML page.</h1>
</body>
</html>

在这个例子中，Vue组件中的<iframe>标签引用了位于Vue项目静态资源目录中的静态HTML页面。一旦iframe加载完成，Vue组件通过postMessage方法向iframe内部发送消息。静态HTML页面通过监听message事件来接收和处理这些消息。

请确保在实际部署时，静态资源的路径正确，并且遵循同源策略或者正确设置postMessage的允许来源。

- 阅读更多 -
html,css背景颜色,背景图片,背景平铺,背景位置的设置
System
2024-08-11
所有,html

在HTML和CSS中，可以通过设置background属性来设置元素的背景颜色、背景图片、背景是否平铺以及背景图片的位置。

以下是一些示例代码：




<!DOCTYPE html>
<html>
<head>
<style>
/* 设置背景颜色 */
body {
  background-color: #f0f0f0;
}
 
/* 设置背景图片并平铺 */
.background-image {
  background-image: url('background.jpg');
  background-repeat: repeat; /* 平铺背景图片 */
}
 
/* 设置背景图片并指定位置 */
.background-position {
  background-image: url('background.jpg');
  background-position: right top; /* 背景图片位置在右上角 */
  background-repeat: no-repeat; /* 不平铺背景图片 */
}
</style>
</head>
<body>
 
<div class="background-image">内容区域</div>
<div class="background-position">内容区域</div>
 
</body>
</html>

在这个例子中，.background-image类设置了一个背景图片，并且该图片会在水平和垂直方向上平铺。.background-position类设置了背景图片，但是该图片只会显示一次，并且位于元素的右上角。

记得将background.jpg替换为你的实际图片文件路径。

- 阅读更多 -
原生html table固定高度并显示滚动条
System
2024-08-11
所有,html

要在HTML表格中固定高度并显示滚动条，您可以使用CSS来设置表格的高度以及父容器的高度和overflow属性。以下是一个简单的示例：

HTML:




<div class="table-container">
  <table>
    <!-- 表头和表格数据 -->
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <!-- 填充足够多的行来超过设定的高度 -->
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <!-- 更多行... -->
    </tbody>
  </table>
</div>

CSS:




.table-container {
  height: 200px; /* 设置固定高度 */
  overflow-y: auto; /* 显示垂直滚动条 */
}
 
table {
  width: 100%; /* 表格宽度 */
  border-collapse: collapse; /* 可选的表格样式 */
}
 
th, td {
  border: 1px solid #ddd; /* 可选的表格样式 */
  padding: 8px; /* 可选的表格样式 */
  text-align: left; /* 可选的表格样式 */
}

在这个例子中，.table-container 类的高度被设置为200px，如果表格的内容超出这个高度，则会显示垂直滚动条。您可以根据需要调整 .table-container 的高度。

- 阅读更多 -
简易html满天星效果
System
2024-08-11
所有,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>满天星</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
    padding: 0;
  }
 
  .star {
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    animation: twinkle 1s infinite alternate ease-in-out;
  }
 
  @keyframes twinkle {
    from { 
      transform: scale(0.5);
      opacity: 0.5;
    }
    to { 
      transform: scale(1);
      opacity: 1;
    }
  }
</style>
</head>
<body>
<div class="star"></div>
<script>
  // 动态创建多个星星
  const numStars = 100; // 可以根据需要调整星星数量
  for (let i = 0; i < numStars; i++) {
    const star = document.createElement('div');
    star.classList.add('star');
    // 随机位置
    star.style.top = `${Math.random() * 100}%`;
    document.body.appendChild(star);
  }
</script>
</body>
</html>

这段代码会创建100个星星，它们随机分布在页面上，并通过CSS动画随机闪烁，模拟出星空中的满天星光效果。你可以根据需要调整.star的样式和@keyframes twinkle动画的细节来改变星星的大小、颜色和闪烁的速度。

- 阅读更多 -
【HTML——3d粒子特效（效果+代码）】，开发一个web站点
System
2024-08-11
所有,html

以下是创建3D粒子特效的HTML和JavaScript代码示例。这个特效使用了Three.js库来创建和动画处理3D场景中的粒子。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D Particle Effect</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // 设置场景、相机和渲染器
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
 
        // 创建粒子
        const geometry = new THREE.Geometry();
        const material = new THREE.ParticleBasicMaterial({ color: 0xFFFFFF, size: 0.05 });
        for (let i = 0; i < 1000; i++) {
            const particle = new THREE.Vector3(
                Math.random() * 2 - 1,
                Math.random() * 2 - 1,
                Math.random() * 2 - 1
            );
            particle.multiplyScalar(Math.random() * 10 + 10);
            geometry.vertices.push(particle);
        }
        const system = new THREE.ParticleSystem(geometry, material);
        scene.add(system);
 
        // 创建灯光
        const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.5);
        scene.add(ambientLight);
 
        // 设置相机位置并开始渲染循环
        camera.position.z = 5;
        function animate() {
            requestAnimationFrame(animate);
            system.rotation.y += 0.001;
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>

这段代码创建了一个简单的3D粒子系统，每个粒子随机生成位置和大小，并被统一赋予白色。系统中有一个环境光源，提供基本的照明。场景、相机和渲染器被设置好后，通过requestAnimationFrame循环进行渲染，并且通过改变系统的旋转来创建动态效果。

- 阅读更多 -
在html文件中添加文字
System
2024-08-11
所有,html

在HTML文件中添加文字，你可以使用<p>标签来创建一个段落，或者使用<span>标签来在特定位置添加文本。以下是一些示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加文字示例</title>
</head>
<body>
    <p>这是一个段落。</p>
    <span>这是行内文本。</span>
</body>
</html>

在这个例子中，<p>标签用于创建一个段落，段落间会有一些空白。<span>标签用于在文档中的特定位置添加文本，通常不会引入额外的格式化。

- 阅读更多 -
使用HTML制作静态网站作业——我的校园运动会(HTML+CSS)
System
2024-08-11
所有,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>我的校园运动会</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
  }
  .header {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: white;
  }
  .content {
    padding: 20px;
  }
  .footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: white;
  }
</style>
</head>
<body>
 
<div class="header">
  <h1>我的校园运动会</h1>
</div>
 
<div class="content">
  <h2>赛事信息</h2>
  <p>2023年10月15日，我校将举行一年一度的运动会，以下是相关的赛事信息：</p>
  <ul>
    <li>主题：“激情燎原”</li>
    <li>时间：周末 Both 10:00 AM - 6:00 PM</li>
    <li>地点：学校田径场</li>
  </ul>
  <h2>报名方式</h2>
  <p>报名将通过学校官方网站进行，链接：<a href="https://www.ourschool.edu.cn/sportsday">https://www.ourschool.edu.cn/sportsday</a></p>
</div>
 
<div class="footer">
  <p>版权所有 © 我校运动会组委会 2023</p>
</div>
 
</body>
</html>

这个示例展示了如何使用HTML创建一个简单的网页结构，并使用CSS为其添加样式。在.header、.content和.footer类中定义了不同部分的样式，使页面更具专业感和可读性。

- 阅读更多 -
Java：爬虫htmlunit抓取a标签
System
2024-08-11
所有,html

以下是使用HtmlUnit库在Java中抓取a标签的示例代码：




import com.gargoylesoftware.htmlunit.WebClient;
import com.gargoylesoftware.htmlunit.html.HtmlPage;
import com.gargoylesoftware.htmlunit.html.HtmlAnchor;
 
import java.io.IOException;
import java.util.List;
 
public class HtmlUnitExample {
    public static void main(String[] args) {
        // 创建WebClient实例
        try (WebClient webClient = new WebClient()) {
            // 设置webClient属性，模拟浏览器
            webClient.getOptions().setCssEnabled(false); // 禁用CSS
            webClient.getOptions().setJavaScriptEnabled(false); // 禁用JavaScript
 
            // 获取网页
            HtmlPage page = webClient.getPage("http://example.com");
 
            // 获取所有a标签
            List<HtmlAnchor> anchors = page.getAnchors();
 
            // 遍历并打印a标签的HREF属性
            for (HtmlAnchor anchor : anchors) {
                System.out.println(anchor.getHrefAttribute());
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

确保你的项目中已经添加了HtmlUnit依赖。如果你使用Maven，可以在pom.xml中添加如下依赖：




<dependency>
    <groupId>net.sourceforge.htmlunit</groupId>
    <artifactId>htmlunit</artifactId>
    <version>2.48.0</version> <!-- 请检查最新版本 -->
</dependency>

请根据实际需要修改网页URL和HtmlUnit版本。

- 阅读更多 -
如何使用HTML制作个人网站（html网页制作）
System
2024-08-11
所有,html

创建一个简单的个人网站，你可以使用以下基本的HTML结构：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人网站标题</title>
    <style>
        /* 在这里写入CSS样式 */
    </style>
</head>
<body>
    <header>
        <nav>
            <!-- 导航链接 -->
            <ul>
                <li><a href="#">主页</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">作品</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </nav>
        <h1>个人网站标题</h1>
    </header>
 
    <section>
        <!-- 主要内容 -->
        <article>
            <h2>文章标题</h2>
            <p>这里是文章的内容。</p>
        </article>
    </section>
 
    <footer>
        <!-- 页脚信息 -->
        <p>版权信息</p>
    </footer>
</body>
</html>

在<style>标签中，你可以添加CSS来进一步美化你的网站。你可以使用外部CSS文件，只需将其链接到HTML头部：




<link rel="stylesheet" href="styles.css">

确保你的HTML文件和CSS文件位于同一目录中，或者调整href属性以正确指向你的CSS文件。

这是一个基本的网站架构，你可以根据需要添加更多的内容和样式。

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