分类前端技术下的文章

2024-08-19

以下是一个简单的HTML模板，用于创建一个动漫视频网站的首页。请注意，这只是一个基础模板，您可能需要添加更多的样式和功能来使其完整。




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动漫视频网站</title>
    <link rel="stylesheet" href="style.css">
</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><a href="/">动漫视频网站</a></h1>
        <div class="search">
            <input type="text" placeholder="搜索动漫">
            <button>搜索</button>
        </div>
    </header>
 
    <main>
        <section class="videos">
            <h2>最新动漫</h2>
            <div class="video-container">
                <!-- 视频播放器代码 -->
                <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
                <!-- 其他视频播放器 -->
            </div>
        </section>
 
        <section class="news">
            <h2>最新新闻</h2>
            <article>
                <h3><a href="#">新动漫剧集推出</a></h3>
                <p>2023年6月15日 - 某知名动漫作品的新剧集已正式发布...</p>
            </article>
            <!-- 其他新闻文章 -->
        </section>
    </main>
 
    <footer>
        <p>版权所有 © 2023 动漫视频网站</p>
    </footer>
</body>
</html>

在这个例子中，我们使用了一个简单的导航栏、搜索框和一个视频播放器。您可以将VIDEO_ID替换为您想要展示的YouTube视频ID。您还需要添加更多的视频播放器，以及新闻文章和样式来完善整个网站。

- 阅读更多 -

HTML - 请你说一下如何阻止a标签跳转

System

2024-08-19

所有,html

要阻止a标签的默认跳转行为，可以使用JavaScript添加事件监听器并在事件处理函数中阻止默认行为。以下是一个示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prevent Link Jump</title>
</head>
<body>
 
<a href="https://www.example.com" id="myLink">点击我，但不会跳转</a>
 
<script>
document.getElementById('myLink').addEventListener('click', function(event) {
    event.preventDefault();
    // 这里可以添加其他逻辑，比如打开新窗口或处理数据等
    alert('链接跳转被阻止！');
});
</script>
 
</body>
</html>

在这个例子中，当用户点击链接时，会触发注册的事件监听器。事件监听器调用event.preventDefault()方法阻止了默认的跳转行为，取而代之的是弹出一个警告框。

System

2024-08-19

所有,html

在JavaScript中，可以使用addEventListener方法为DOM元素添加事件监听器。这样当特定事件发生时，可以执行一些JavaScript代码。

以下是一个简单的例子，演示了如何为一个按钮添加点击事件监听器：




// 获取按钮元素
const myButton = document.getElementById('myButton');
 
// 为按钮添加点击事件监听器
myButton.addEventListener('click', function() {
    alert('按钮被点击了!');
});

在这个例子中，当按钮被点击时，会弹出一个警告框。

addEventListener方法接受两个参数：

事件名称：一个字符串，指定要监听的事件类型，例如'click'、'mouseover'等。
事件处理函数：当事件发生时要执行的函数。

你可以为同一个元素添加多个事件监听器，并且它们会按照被添加的顺序依次触发。如果同一个事件监听器被添加多次，它也会被多次触发。为了避免这种情况，可以使用removeEventListener方法移除不需要的监听器。

- 阅读更多 -

css修改滚动条样式

System

2024-08-19

所有,css3

在 CSS 中，可以使用 ::-webkit-scrollbar 选择器来修改滚动条的样式。以下是几种不同的实现方法：

使用 ::-webkit-scrollbar 修改滚动条的宽度、高度、颜色和背景：




/* 修改垂直滚动条 */
::-webkit-scrollbar {
  width: 10px; /* 修改宽度 */
}
 
/* 修改滚动条轨道背景色 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
 
/* 修改滚动条滑块颜色 */
::-webkit-scrollbar-thumb {
  background-color: #888;
}
 
/* 修改滚动条滑块悬停时的颜色 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

使用 ::-webkit-scrollbar 修改滚动条的样式，同时使用伪类 :hover 修改滚动条滑块悬停时的样式：




/* 修改垂直滚动条 */
::-webkit-scrollbar {
  width: 10px; /* 修改宽度 */
}
 
/* 修改滚动条轨道背景色 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
 
/* 修改滚动条滑块颜色 */
::-webkit-scrollbar-thumb {
  background-color: #888;
}
 
/* 修改滚动条滑块悬停时的颜色 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
 
/* 修改滚动条滑块移动时的颜色 */
::-webkit-scrollbar-thumb:active {
  background-color: #333;
}
 
/* 修改滚动条滑块的圆角 */
::-webkit-scrollbar-thumb {
  border-radius: 5px;
}

使用 ::-webkit-scrollbar 修改垂直滚动条的样式，并通过 ::-webkit-scrollbar-thumb 自定义滑块的样式：




/* 修改滚动条的宽度和颜色 */
::-webkit-scrollbar {
  width: 10px;
  background-color: #f1f1f1;
}
 
/* 修改滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px; /* 修改滑块圆角 */
}
 
/* 修改滚动条滑块悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

这些方法可以应用于大多数支持 WebKit 内核的浏览器，如 Chrome、Safari 等。请根据实际需求选择适合的方法进行滚动条样式的修改。

- 阅读更多 -

(已更新)2023春节倒计时新款HTML单页源码

System

2024-08-19

所有,css3




<!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 {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #2e3440;
            font-family: Arial, sans-serif;
            color: #d7dae0;
        }
        .countdown {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .timer {
            font-size: 3em;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="countdown">
        <div class="timer">
            <!-- 倒计时显示 -->
        </div>
        <button onclick="countdown()">开始倒计时</button>
    </div>
 
    <script>
        function countdown() {
            const newYear = new Date('2023-02-02T00:00:00'); // 假设为2023年春节
            const timer = document.querySelector('.timer');
 
            function updateClock() {
                const now = new Date();
                const distance = newYear - now;
 
                if (distance < 0) {
                    clearInterval(intervalId);
                    timer.innerHTML = '已经过春节！';
                    return;
                }
 
                const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);
 
                timer.innerHTML = `剩余时间: <strong>${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒</strong>`;
            }
 
            updateClock(); // 首次运行
            const intervalId = setInterval(updateClock, 1000);
        }
    </script>
</body>
</html>

这个代码实例提供了一个简单的HTML页面，其中包含了一个倒计时器。当用户点击按钮时，页面上会显示春节剩余的天数、小时、分钟和秒数。代码使用了JavaScript来计算时间差异，并通过CSS为页面元素设置样式。这个实例可以作为创建类似功能

- 阅读更多 -

CSS3浮动定位float理解及浮动高度坍塌的解决方法

System

2024-08-19

所有,css3

浮动定位float是CSS中的一个属性，用于创建浮动框，实现文本环绕效果。浮动框可以是左浮动(float: left;)或右浮动(float: right;)。当元素浮动之后，会脱离正常的文档流，从而导致父元素的高度塌陷（也称为浮动高度坍塌问题）。

解决浮动高度坍塌的方法有很多种，以下是几种常用的解决方法：

使用clearfix技术：在父元素的末尾添加一个:after伪元素，并设置clear: both;。




.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

使用overflow: auto;或overflow: hidden;：在父元素中设置这个属性可以清除内部浮动造成的影响。




.parent {
  overflow: auto;
}

使用display: flex;：在父元素中使用Flexbox布局可以避免浮动高度坍塌问题。




.parent {
  display: flex;
}

使用display: inline-block;：在子元素中使用这个属性可以避免浮动造成的高度坍塌问题。




.child {
  display: inline-block;
}

使用<br style="clear: both;">：在父元素的末尾添加这个标签，可以清除内部浮动造成的影响。




<div class="parent">
  <!-- 浮动元素 -->
  <br style="clear: both;">
</div>

选择哪种方法取决于具体情况，如果需要兼容更多的浏览器或者使用Flexbox等现代布局技术不是选择，则可能需要考虑使用clearfix技术或者overflow属性。

- 阅读更多 -

CSS3媒体查询实现不同宽度的下不同内容的展示

System

2024-08-19

所有,css3




/* 设置默认样式 */
.content {
  background-color: #f9f9f9;
  padding: 20px;
  font-size: 16px;
}
 
/* 当屏幕宽度小于或等于600px时，修改.content的样式 */
@media screen and (max-width: 600px) {
  .content {
    background-color: #ddd;
    font-size: 14px;
  }
}
 
/* 当屏幕宽度在400px到600px之间时，修改.content的样式 */
@media screen and (min-width: 400px) and (max-width: 600px) {
  .content {
    background-color: #bbb;
    padding: 10px;
  }
}
 
/* 当屏幕宽度小于400px时，修改.content的样式 */
@media screen and (max-width: 400px) {
  .content {
    background-color: #999;
    padding: 5px;
  }
}

这段代码定义了一个.content类，并使用媒体查询定义了在不同屏幕宽度下该类应用的不同样式。这是响应式设计的一个基本示例，可以根据实际需求进行扩展和应用。

- 阅读更多 -

css 改变下划线长度，伪元素模拟border-bottom

System

2024-08-19

所有,css3

在CSS中，我们可以使用伪元素来模拟border-bottom，并通过调整伪元素的宽度来改变下划线的长度。以下是一个示例：




.underline-container {
  position: relative;
  display: inline-block; /* 或者 block 根据需求 */
}
 
.underline-container::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid black; /* 设置下划线的样式 */
  width: 100%; /* 默认长度为100% */
}
 
.custom-length::after {
  width: 50%; /* 示例：设置为父容器宽度的一半 */
}

HTML部分：




<div class="underline-container">默认长度下划线</div>
<div class="underline-container custom-length">自定义长度下划线</div>

在这个例子中，.underline-container 类定义了一个容器，该容器的文本下方会有一个模拟的下划线。.underline-container::after 伪元素用来创建下划线，并且可以通过调整.custom-length::after中的width属性来改变下划线的长度。

- 阅读更多 -

H5+CSS3+JS逆向前置——HTMLtable表格标签

System

2024-08-19

所有,css3

在HTML中，<table>标签用于创建表格布局。以下是一个简单的HTML表格示例，使用了HTML、CSS和JavaScript（简称H5+CSS3+JS）：




<!DOCTYPE html>
<html>
<head>
<style>
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }
  th, td {
    padding: 5px;
    text-align: left;
  }
</style>
</head>
<body>
 
<h2>HTML Table</h2>
 
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Smith</td>
    <td>25</td>
  </tr>
</table>
 
</body>
</html>

这段代码创建了一个具有标题行和两行数据的表格。CSS用于设置表格的样式，包括边框、内边距和文本对齐方式。这个示例展示了如何使用HTML创建表格结构，并通过CSS进行样式化，这是学习Web开发的基础知识。

- 阅读更多 -

CSS打造图片翻转立体3D效果

System

2024-08-19

所有,css3

要使用CSS创建图片翻转的3D效果，你可以使用transform属性中的rotateY函数来实现Y轴的旋转，以及使用perspective和transform-style来创建3D效果。以下是一个简单的例子：

HTML:




<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="image-front.jpg" alt="Front Image">
    </div>
    <div class="back">
      <img src="image-back.jpg" alt="Back Image">
    </div>
  </div>
</div>

CSS:




.flip-container {
  perspective: 1000px; /* 创建3D效果的视距 */
}
 
.flipper {
  transition: transform 0.6s;
  transform-style: preserve-3d; /* 让子元素在3D空间中呈现 */
  position: relative;
}
 
.front, .back {
  backface-visibility: hidden; /* 隐藏翻转的背面 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
 
.front {
  z-index: 2;
}
 
.back {
  transform: rotateY(180deg); /* 翻转180度 */
  z-index: 1;
}
 
/* 鼠标悬浮时翻转 */
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}

这段代码会创建一个容器，其中包含一个带有前后两个面的元素。当鼠标悬停在容器上时，.flipper会旋转180度，显示出背面的图片。通过设置backface-visibility: hidden;，可以在翻转时隐藏不可见的背面，给用户一种看起来像是图片翻转的效果。

- 阅读更多 -