分类前端技术下的文章

2024-08-19

以下是一个简单的HTML页面示例，使用了爱心特效和表白信息：




<!DOCTYPE html>
<html>
<head>
    <title>520表白特效</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .heart-container {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .heart {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.6);
            animation: beat 0.7s infinite;
        }
        @keyframes beat {
            0% { transform: translate(-50%, -50%) scale(0.6) rotate(0deg); }
            50% { transform: translate(-50%, -50%) scale(0.6) rotate(360deg); }
            100% { transform: translate(-50%, -50%) scale(0.6) rotate(360deg); }
        }
        .heart:before,
        .heart:after {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            width: 50px;
            height: 80px;
            background: #ff0000;
            border-radius: 50px 50px 0 0;
            transform: translate(-50%, -100%);
            transform-origin: 50% -30px;
        }
        .heart:after {
            top: auto;
            bottom: 0;
            transform: translate(-50%, 100%);
            transform-origin: 50% 30px;
        }
    </style>
</head>
<body>
    <div class="heart-container">
        <div class="heart"></div>
    </div>
    <div style="text-align: center; margin-top: 20px;">
        她/他的名字在心上舞动，<br>
        希望你能感受到我对你的爱意。<br>
        今天是520，我爱你。
    </div>
</body>
</html>

这段代码使用了CSS3动画制作了一个简单的爱心图案，并将其放置在页面中心，同时展示了表白信息。你可以根据需要调整样式和文本信息。

System

2024-08-19

所有,html

在Vue2或者uni-app中嵌入本地HTML页面并进行互通有无通信，可以使用iframe标签进行页面嵌入，然后通过postMessage进行跨文档消息传递。

以下是在Vue2和uni-app中的实现方式：

Vue2中使用iframe嵌入本地HTML页面并互通有无：




<template>
  <div>
    <iframe ref="iframe" src="你的本地HTML页面路径" @load="onLoad"></iframe>
  </div>
</template>
 
<script>
export default {
  methods: {
    onLoad() {
      // 监听iframe加载完成后，向其发送消息
      this.$refs.iframe.contentWindow.postMessage('Hello from Vue app', '*');
    }
  }
}
</script>

在iframe加载完成后，向其发送消息。

在本地HTML页面中接收并处理消息：




<!DOCTYPE html>
<html>
<head>
  <title>Local HTML Page</title>
  <script>
    window.addEventListener('message', function(event) {
      console.log('Message received from Vue app:', event.data);
      // 对消息进行处理
      // 可以根据event.data进行相应的操作
      // 然后可以选择性的回复Vue应用
      event.source.postMessage('Hello back from local HTML', '*');
    });
  </script>
</head>
<body>
  <h1>This is a local HTML page</h1>
</body>
</html>

在uni-app中，由于其是基于WebView的，所以其中iframe的使用和Vue2中的使用方式几乎一样。

在iframe中发送消息：




<template>
  <view>
    <web-view src="你的本地HTML页面路径" @message="onMessage"></web-view>
  </view>
</template>
 
<script>
export default {
  methods: {
    onMessage(e) {
      console.log('收到消息', e.detail.data);
    }
  }
}
</script>

在本地HTML页面中接收并处理消息的方式也和在Vue2中一样。

注意：在实际使用中，为了安全，应该指定消息发送到特定的域名，而不是使用'*'。

以上就是在Vue2和uni-app中使用iframe进行页面嵌入和互通有无的方法和示例代码。

- 阅读更多 -

前端将html导出pdf文件解决分页问题

System

2024-08-19

所有,html

在前端将HTML导出为PDF文件并处理分页问题时，可以使用jsPDF库和html2canvas库。以下是一个简化的例子：

首先，确保在项目中包含了jsPDF和html2canvas库。




<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>

编写一个函数来处理PDF的生成。




function downloadPDF() {
  const element = document.body; // 或任何你想要转换为PDF的DOM元素
  html2canvas(element).then((canvas) => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jspdf.jsPDF({
      orientation: 'portrait',
      unit: 'px',
      format: [canvas.width, canvas.height]
    });
 
    const imgProps= pdf.getImageProperties(imgData);
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
    let heightLeft = pdfHeight;
 
    const pageHeight = pdf.internal.pageSize.getHeight();
    let position = 0;
 
    pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, pdfHeight);
 
    heightLeft -= pageHeight;
 
    while (heightLeft >= 0) {
      position = heightLeft - pageHeight;
      pdf.addPage();
      pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, pageHeight);
      heightLeft -= pageHeight;
    }
 
    pdf.save('download.pdf');
  });
}

在合适的时候调用downloadPDF函数，例如在按钮点击事件中：




<button onclick="downloadPDF()">下载PDF</button>

这段代码会将网页中的内容（document.body）转换为PDF，并处理分页，以便内容过长时可以分布在多个PDF页面上。html2canvas用于将HTML转换为canvas，然后jspdf将canvas转换为PDF。注意，这个例子假设了内容不会超出一个PDF页面的宽度。如果内容宽度超过页面宽度，你可能还需要处理水平分页。

System

2024-08-19

所有,html

由于提出的问题涉及的内容较广，且没有明确的问题点，我将提供一个简化的示例来说明如何在Qt中使用CMake编译CEF和QCefView。




cmake_minimum_required(VERSION 3.5)
 
project(myproject)
 
set(CMAKE_CXX_STANDARD 11)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
 
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTOUIC ON)
set(CMAKE_INCLUDE_CURRENT_DIR ON)
 
# 设置CEF的路径
set(CEF_DIR "path/to/cef/directory")
 
# 添加CEF库
add_subdirectory(${CEF_DIR})
 
# 找到Qt5库
find_package(Qt5 COMPONENTS Widgets REQUIRED)
 
# 添加自己的源代码文件
add_executable(myproject main.cpp myotherfile.cpp)
 
# 链接CEF库和Qt库
target_link_libraries(myproject ${CEF_LIBRARIES} Qt5::Widgets)

在这个CMakeLists.txt文件中，我们首先设置了项目的最低CMake版本要求，然后定义了项目名称和使用的C++标准。接下来，我们开启了Qt的自动moc和uic处理，并设置了包含当前目录，以便CMake可以找到Qt相关的资源。

然后，我们设置了CEF库的路径，并将其作为子目录添加到项目中。接着，我们使用find_package命令来找到并链接Qt5的Widgets模块，这是创建Qt应用程序所必需的。

最后，我们添加了自己的源代码文件，并使用target_link_libraries命令将CEF库和Qt5的Widgets库链接到我们的可执行文件中。

这个例子提供了一个基本框架，展示了如何在Qt项目中使用CMake来编译包含CEF（Chromium Embedded Framework）的应用程序。

- 阅读更多 -

html播放视频

System

2024-08-19

所有,html

在HTML中播放视频，可以使用<video>标签。以下是一个简单的例子：




<!DOCTYPE html>
<html>
<head>
<title>Video Example</title>
</head>
<body>
 
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
 
</body>
</html>

在这个例子中，<video>标签的controls属性添加了播放器控件，如播放、暂停和音量控制。<source>标签指定了视频文件的路径和类型，支持不同的格式以便于在不同的浏览器中播放。如果浏览器不支持<video>标签，它会显示<source>标签之间的文本。

请确保替换movie.mp4和movie.ogg为您的视频文件路径和名称。如果您有多种视频格式和编码，可以添加多个<source>标签以支持它们。

- 阅读更多 -

【HTML】如何使用html制作一个简易的表格？

System

2024-08-19

所有,html

在HTML中，可以使用<table>标签来创建一个简易的表格。表格由行<tr>组成，每行又由单元格<td>组成。下面是一个简单的例子：




<!DOCTYPE html>
<html>
<head>
    <title>简易表格</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>第一行，第一列</td>
            <td>第一行，第二列</td>
        </tr>
        <tr>
            <td>第二行，第一列</td>
            <td>第二行，第二列</td>
        </tr>
    </table>
</body>
</html>

上述代码创建了一个包含两行两列的表格，每个单元格之间有一条线分隔。border="1"属性用于添加边框，你也可以通过CSS样式来添加更复杂的样式。

- 阅读更多 -

html实现酷炫美观的可视化大屏(十种风格示例)

System

2024-08-19

所有,html

以下是一个使用HTML和CSS创建的简单示例，用于展示一个炫丽的可视化大屏。这个示例使用了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 {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .background {
    position: fixed;
    width: 100%;
    height: 100%;
    background: linear-gradient(-225deg, #2980b9, #6dd5ed);
    animation: glow 5s infinite alternate;
  }
  @keyframes glow {
    from {
      background-size: 100%;
    }
    to {
      background-size: 120%;
    }
  }
</style>
</head>
<body>
<div class="background"></div>
</body>
</html>

这段代码创建了一个全屏的元素，并应用了一个由蓝色到浅蓝色的线性渐变背景。animation 属性定义了一个名为 glow 的动画，使背景渐变可以连续无断地发光，增加了视觉活力。这是一个简单的示例，但是可以通过添加更多的元素和复杂的CSS动画来创建更加复杂和炫酷的可视化大屏。

- 阅读更多 -

CSS 3D动画【大小可开合正方体】，阿里出品

System

2024-08-19

所有,css3




/* 设置基础样式 */
.container {
  perspective: 1000px; /* 创建3D空间 */
}
 
.cube {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d; /* 设置子元素在3D空间中显示 */
  animation: rotate 5s infinite linear; /* 应用旋转动画 */
}
 
/* 定义正方体的每一个面 */
.cube div {
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: 0.8;
  transition: all 0.4s ease-in-out; /* 平滑过渡效果 */
}
 
/* 设置正方体各面的背景色 */
.cube .face1 {
  background: rgba(255, 0, 0, 0.5);
}
 
.cube .face2 {
  background: rgba(0, 255, 0, 0.5);
}
 
.cube .face3 {
  background: rgba(0, 0, 255, 0.5);
}
 
.cube .face4 {
  background: rgba(255, 255, 0, 0.5);
}
 
.cube .face5 {
  background: rgba(255, 0, 255, 0.5);
}
 
.cube .face6 {
  background: rgba(0, 255, 255, 0.5);
}
 
/* 定义旋转动画 */
@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
 
/* 设置鼠标悬浮时放大动画 */
.cube:hover {
  animation-play-state: paused;
}
 
.cube:hover div {
  transform: translateZ(50px);
}

这段代码展示了如何使用CSS 3D转换创建一个旋转的正方体动画。它包括了设置3D空间、定义每一个面的背景色、应用旋转动画以及在鼠标悬浮时放大动画的效果。这个例子可以教会开发者如何利用CSS创建复杂的交互动画效果。

- 阅读更多 -

CSS篇十六——盒子模型之边框

System

2024-08-19

所有,css3

CSS盒子模型的边框属性是由border样式定义的。你可以定义边框的粗细、样式和颜色。

以下是一些CSS代码示例，展示如何设置元素的边框：




/* 设置元素所有边的边框为1px实线，黑色 */
.element {
  border: 1px solid black;
}
 
/* 分别设置元素上下左右边的边框 */
.element {
  border-top: 1px solid red;    /* 上边框 */
  border-bottom: 2px dashed green; /* 下边框 */
  border-left: 3px dotted blue;  /* 左边框 */
  border-right: 4px double orange; /* 右边框 */
}
 
/* 使用边框图片 */
.element {
  border-image: url(border.png) 30 30 round;
}

在实际应用中，你可以根据需要选择适合的边框样式，以达到设计效果。

- 阅读更多 -

html制作花店代码,使用HTML和CSS3示例分享

System

2024-08-19

所有,css3

以下是一个使用HTML和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 {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f8f8f8;
  }
  .store {
    width: 80%;
    max-width: 1200px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .store-header {
    text-align: center;
    padding-bottom: 15px;
  }
  .store-header img {
    width: 120px;
  }
  .store-nav {
    margin-top: 20px;
    text-align: center;
  }
  .store-nav a {
    margin: 0 10px;
    text-decoration: none;
    color: #333;
    font-size: 16px;
  }
  .store-nav a.active {
    font-weight: bold;
  }
  .store-products {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .store-product {
    width: 200px;
    margin: 10px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .store-product img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  .store-product-name {
    margin-top: 10px;
    font-size: 18px;
  }
  .store-product-price {
    color: #e84a5f;
    font-weight: bold;
  }
</style>
</head>
<body>
<div class="store">
  <div class="store-header">
    <img src="logo.png" alt="花店 Logo">
    <h1>欢迎来到花店</h1>
  </div>
  <div class="store-nav">
    <a class="active" href="#">首页</a>
    <a href="#">花卉库</a>
    <a href="#">关于我们</a>
  </div>
  <div class="store-products">
    <div class="store-product">
      <img src="product1.jpg" alt="花卉图片">
      <div class="store-product-name">玫瑰花卉</div>
      <div class="store-product-price">$20.99</div>
    </div>
    <!-- 其他产品可以复制上面的div块进行展示 -->
  </div>
</div>
</body>
</html>

这个示例展示了如何使用HTML创建一个简单的花店页面布局，并使用CSS3来增强页面的视觉效果。在这个代码中，我们定义了.store容器来包含整个页面的内容，并使用Flexbox布局来创建一个响应式的布局。我们还定义了.store-header、.store-nav和.store-products等类来分别表示页面的不同部分，并且使用CSS属性如box-shadow

- 阅读更多 -