分类所有下的文章

web前端登陆注册界面（html+css+js）

2024-08-07

以下是一个简单的Web前端登录注册界面的示例代码，包括HTML、CSS和JavaScript。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login & Register Form</title>
<style>
    body { font-family: Arial, sans-serif; }
    .form-container { max-width: 300px; margin: 50px auto; }
    form { display: flex; flex-direction: column; }
    form label { margin-bottom: 10px; }
    form input[type="text"], form input[type="password"] { margin-bottom: 10px; }
    form button { margin-top: 10px; }
</style>
</head>
<body>
 
<div class="form-container">
    <h2>Login</h2>
    <form id="loginForm">
        <label for="loginUsername">Username:</label>
        <input type="text" id="loginUsername" required>
        <label for="loginPassword">Password:</label>
        <input type="password" id="loginPassword" required>
        <button type="submit">Login</button>
    </form>
</div>
 
<div class="form-container">
    <h2>Register</h2>
    <form id="registerForm">
        <label for="registerUsername">Username:</label>
        <input type="text" id="registerUsername" required>
        <label for="registerEmail">Email:</label>
        <input type="text" id="registerEmail" required>
        <label for="registerPassword">Password:</label>
        <input type="password" id="registerPassword" required>
        <button type="submit">Register</button>
    </form>
</div>
 
<script>
    // Login form submission handler
    document.getElementById('loginForm').addEventListener('submit', function(event) {
        event.preventDefault();
        var username = document.getElementById('loginUsername').value;
        var password = document.getElementById('loginPassword').value;
        // Here, you would send the login data to the server for verification
        console.log('Login submitted:', username, password);
    });
 
    // Register form submission handler
    document.getElementById('registerForm').addEventListener('submit', function(event) {
        event.preventDefault();
        var username = document.getElementById('registerUsername').value;
        var ema

CSS3 新增属性：背景

2024-08-07

CSS3中的背景相关属性包括：background-size, background-origin, background-clip。

background-size: 用于指定背景图片的尺寸，可以设置为具体的宽高值，或者使用百分比，还可以设置为cover和contain。




/* 指定背景图片的大小 */
div {
  background-image: url('image.jpg');
  background-size: 100px 150px; /* 宽度100px，高度150px */
}
 
/* 使用百分比 */
div {
  background-size: 50% 75%;
}
 
/* 保持图片的宽高比，缩放图片直到背景图片完全覆盖元素 */
div {
  background-size: cover;
}
 
/* 保持图片的宽高比，缩放图片直到内容完全可见 */
div {
  background-size: contain;
}

background-origin: 用于设置背景图片的定位区域，可以设置为border-box, padding-box, 或 content-box。




/* 背景图片定位于元素的边框框以内*/
div {
  background-origin: border-box;
}
 
/* 背景图片定位于元素的内边距框以内*/
div {
  background-origin: padding-box;
}
 
/* 背景图片定位于元素的内容框以内*/
div {
  background-origin: content-box;
}

background-clip: 用于设置背景的裁剪区域，同样可以设置为border-box, padding-box, 或 content-box。




/* 背景裁剪于元素的边框框以内*/
div {
  background-clip: border-box;
}
 
/* 背景裁剪于元素的内边距框以内*/
div {
  background-clip: padding-box;
}
 
/* 背景裁剪于元素的内容框以内*/
div {
  background-clip: content-box;
}

以上是CSS3中关于背景的三个新属性，它们可以用来实现更为复杂和灵活的背景样式。

HTML5 和 CSS3 迁移即时入门

2024-08-07

HTML5 和 CSS3 是当前网页设计和开发的主要技术。以下是一个简单的 HTML5 文档示例，它展示了如何使用 HTML5 的一些新特性，比如 <header>、<nav>、<section> 和 <footer> 等语义化标签。CSS3 则用于添加视觉效果和布局，比如圆角、阴影和渐变。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 和 CSS3 示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        header {
            background-color: #f7f7f7;
            padding: 1em;
            border-bottom: 1px solid #ddd;
            box-shadow: 0 1px 5px #ccc;
            border-radius: 10px;
        }
        nav {
            margin: 1em 0;
            text-align: center;
        }
        section {
            padding: 1em;
            background-color: #f9f9f9;
            border-radius: 10px;
            box-shadow: 0 1px 5px #ccc;
            margin-bottom: 1em;
        }
        footer {
            background-color: #f7f7f7;
            padding: 1em;
            border-top: 1px solid #ddd;
            box-shadow: 0 -1px 5px #ccc;
            border-radius: 10px;
        }
        .gradient {
            background: linear-gradient(to bottom, #ffcc00, #ff6600);
        }
    </style>
</head>
<body>
    <header>
        <h1>我的网站</h1>
    </header>
    <nav>
        <a href="#">主页</a> |
        <a href="#">关于</a> |
        <a href="#">联系</a>
    </nav>
    <section class="gradient">
        <h2>最新文章</h2>
        <p>这里是一篇文章的内容。</p>
    </section>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
</body>
</html>

这个示例展示了如何结合使用 HTML5 和 CSS3 创建一个简单的网页布局。通过使用这些技术，开发者可以更容易地创建现代化的网站，同时也为未来的网页设计和开发奠定基础。

Vue之移动端viewport-vw适配

2024-08-07




// 在main.js或者入口文件中添加以下代码
// 设置rem基准值
function setRem() {
  // 获取设备宽度
  const deviceWidth = document.documentElement.clientWidth || window.innerWidth;
  // 根据设备宽度，调整html的font-size
  document.documentElement.style.fontSize = (deviceWidth / 1920) * 100 + 'px';
}
// 初始化设置
setRem();
// 监听窗口大小变化，重新设置rem基准值
window.onresize = function() {
  setRem();
};

这段代码会在页面初始化时设置基准字体大小，并且在窗口大小发生变化时重新计算并设置基准字体大小。这样就可以实现移动端的viewport-vw适配。在使用时，只需要在样式中使用rem单位来设置元素的尺寸，1rem将等于设备宽度的1/100。

2024-08-07

在前端开发中，HTML和CSS是两个最基本和重要的知识点。HTML用于定义网页的结构，CSS用于定义网页的样式。

文档类型声明(DOCTYPE)

DOCTYPE是用来告知浏览器当前网页使用的HTML版本。通常位于HTML文档的第一行。




<!DOCTYPE html>
<html>
...
</html>

字符集

字符集用来指定HTML文档应该使用哪个字符集编码。




<meta charset="UTF-8">

标题标签(h1-h6)

h1-h6标签用于定义标题，h1为最高级别，h6为最低级别。




<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
...
<h6>这是一个标题</h6>

段落标签(p)

p标签用于定义段落。




<p>这是一个段落。</p>

链接标签(a)

a标签用于定义超链接。




<a href="https://www.example.com">访问Example网站</a>

图像标签(img)

img标签用于定义图像。




<img src="image.jpg" alt="描述文字">

列表标签

有序列表使用ol标签，无序列表使用ul标签，列表项使用li标签。




<ol>
  <li>第一项</li>
  <li>第二项</li>
</ol>
 
<ul>
  <li>第一项</li>
  <li>第二项</li>
</ul>

表格标签

table标签用于定义表格，tr标签用于定义行，td标签用于定义单元格。




<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

表单标签

form标签用于定义表单，input标签用于定义表单项。




<form action="submit.php" method="post">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="提交">
</form>

CSS样式

CSS用于定义网页的样式，可以通过内联样式、内部样式表和外部样式表三种方式来应用样式。




<!-- 内联样式 -->
<p style="color: blue;">这是一个蓝色的段落。</p>
 
<!-- 内部样式表 -->
<head>
  <style>
    p { color: red; }
  </style>
</head>
 
<!-- 外部样式表 -->
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

CSS选择器

CSS选择器用于选择网页中的元素，可以选择元素本身，类，ID或者其他属性。




/* 选择所有的段落 */
p {
  color: green;
}
 
/* 选择class为"special"的元素 */
.special {
  font-weight: bold;
}
 
/* 选择id为"main"的元素 */
#main {
  background-color: yellow

CSS margin 属性和CSS 单边外边距属性

2024-08-07

CSS 的 margin 属性用于设置元素的外边距，它可以影响一个元素的边界框到其父元素或者兄弟元素之间的距离。margin 属性可以有一到四个值，表示元素的上、右、下、左外边距，顺时针方向。

CSS 的单边外边距属性可以单独设置元素的一侧外边距，它们是：

margin-top：设置元素的上外边距。
margin-right：设置元素的右外边距。
margin-bottom：设置元素的下外边距。
margin-left：设置元素的左外边距。

实例代码：




/* 设置四个方向的外边距 */
.box {
  margin: 10px 20px 30px 40px;
}
 
/* 设置单边外边距 */
.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}
 
/* 使用 margin 属性简写 */
.box {
  margin: 10px 20px; /* 上下、左右外边距分别为10px和20px */
}
 
/* 使用 margin 属性简写 */
.box {
  margin: 10px 20px 30px; /* 上外边距10px，左右外边距20px，下外边距30px */
}
 
/* 设置元素的所有四个外边距相同 */
.box {
  margin: 10px; /* 所有四个方向外边距都是10px */
}

在实际应用中，可以根据需要选择使用 margin 属性的简写形式或单独设置元素的某一侧外边距。

CSS（盒子模型，定位，浮动，扩展）

2024-08-07

CSS盒子模型、定位和浮动是前端开发中的重要概念，以下是对应的简要解释和示例代码：

盒子模型(Box Model)：
定义了元素的边框、内边距（padding）、外边距（margin）和内容区域。




.box {
  width: 300px; /* 内容宽度 */
  padding: 20px; /* 内边距 */
  border: 5px solid blue; /* 边框 */
  margin: 10px; /* 外边距 */
}

定位(Positioning)：
CSS提供了相对定位、绝对定位和固定定位三种方式。




/* 相对定位 */
.relative {
  position: relative;
  top: 10px;
  left: 20px;
}
 
/* 绝对定位 */
.absolute {
  position: absolute;
  top: 50px;
  right: 30px;
}
 
/* 固定定位 */
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
}

浮动(Floating)：
可以使元素向左或向右浮动，影响周围元素的布局。




/* 向左浮动 */
.float-left {
  float: left;
  margin-right: 10px;
}
 
/* 向右浮动 */
.float-right {
  float: right;
  margin-left: 10px;
}
 
/* 清除浮动 */
.clearfix {
  clear: both;
}

以上代码展示了如何使用CSS进行盒子模型的设置、元素的定位以及元素的浮动操作，是前端开发中的基础知识。

vue实现点击复制功能

2024-08-07

所有,vue.js

在Vue中实现点击复制的功能，可以使用第三方库vue-clipboard2或者vue-clipboard3。以下是使用vue-clipboard3的示例代码：

首先安装vue-clipboard3：




npm install vue-clipboard3 --save

在Vue组件中使用：




<template>
  <button v-clipboard="copyContent" @success="onCopySuccess">复制</button>
</template>
 
<script>
import { defineComponent, ref } from 'vue';
import { useClipboard } from 'vue-clipboard3';
 
export default defineComponent({
  setup() {
    const copyContent = ref('要复制的文本内容');
    const { isSupported, copy } = useClipboard();
 
    const onCopySuccess = () => {
      alert('复制成功');
    };
 
    return {
      copyContent,
      onCopySuccess,
      isSupported,
      copy
    };
  }
});
</script>

在这个示例中，v-clipboard 指令用于绑定要复制的内容，@success 事件处理函数在复制成功时被调用。isSupported 函数用于检查浏览器是否支持剪贴板API，copy 函数用于执行复制操作。

CSS高级知识点

2024-08-07

CSS的高级特性可以包括布局技术、动画、响应式设计、媒体查询等。以下是一些CSS的高级技巧：

布局技术：

使用Flexbox进行布局：




.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用Grid布局：




.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

动画：

创建简单的动画：




@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
.animatedBox {
  animation-name: example;
  animation-duration: 4s;
}

响应式设计：

使用媒体查询进行响应式设计：




/* 标准样式 */
.sidebar {
  width: 200px;
  height: 500px;
}
 
/* 屏幕宽度小于768px时 */
@media screen and (max-width: 768px) {
  .sidebar {
    width: 100%;
    height: auto;
  }
}

其他高级特性：

使用CSS变量（也称为CSS自定义属性）：




:root {
  --main-bg-color: coral;
}
 
.main {
  background-color: var(--main-bg-color);
}

使用伪元素：




.element::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background-color: green;
}

使用Z-index调整层叠顺序：




.firstElement {
  z-index: 1;
}
 
.secondElement {
  z-index: 2;
}

这些是CSS中一些高级技巧的简单示例。实际应用中，可能需要根据具体设计需求和布局结构来使用这些技术。