分类前端技术下的文章

全网超详细解决Uncaught ReferenceError: Vue is not defined的问题，以及dom文档的加载顺序和js ,css,html执行顺序

2024-08-19

报错解释：

Uncaught ReferenceError: Vue is not defined 表示浏览器在执行JavaScript代码时，找不到名为 Vue 的对象或变量。这通常发生在尝试使用Vue.js库但未能正确加载或者在使用之前没有正确声明Vue对象。

解决方法：

确保在使用Vue.js的脚本之前，通过 <script> 标签在HTML文档中引入了Vue.js库。例如：
```
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
```
如果你使用的是模块化打包工具（如Webpack），确保已经正确地导入了Vue包：
```
import Vue from 'vue';
```
确保没有网络问题导致Vue.js文件未能加载。
检查代码中的拼写错误，确保 Vue 的引用是正确的。
如果你的项目结构复杂，确保Vue.js文件的路径是正确的，并且没有被项目配置（如Webpack的别名配置）所影响。
如果你在使用CDN，请确保CDN的URL是可用的，并且没有过期或者被移除。
如果你是通过npm安装的Vue，请确保已经运行过 npm install 来安装所有依赖，并且在你的入口文件（如 main.js 或 app.js）中正确导入了Vue。
确保没有JavaScript错误导致脚本的加载顺序被打乱。

如果以上步骤都无法解决问题，可以进一步检查控制台的其他错误信息，查看是否有更具体的线索。

- 阅读更多 -

css不规则圆角矩形

System

2024-08-19

所有,css

CSS提供了border-radius属性来创建圆角矩形。如果你想创建一个不规则的圆角矩形，可以为border-radius属性指定不同的值，来实现每个角的不同圆角半径。

以下是一个简单的例子，展示了如何使用CSS创建一个不规则的圆角矩形：




<!DOCTYPE html>
<html>
<head>
<style>
.rectangle {
  width: 200px;
  height: 100px;
  background-color: #4CAF50;
  /* 设置四个角的圆角半径 */
  border-radius: 10px 30px 50px 70px; /* 顺序为左上角、右上角、右下角、左下角 */
}
</style>
</head>
<body>
 
<div class="rectangle"></div>
 
</body>
</html>

在这个例子中，.rectangle类定义了一个200px宽、100px高的矩形，并设置了不同的圆角半径，分别对应左上角、右上角、右下角、左下角。

System

2024-08-19

所有,css

在Python中使用Selenium定位元素时，可以使用CSS选择器来精确找到页面上的元素。CSS选择器是一种强大的工具，可以通过元素的ID、类、属性等来选择页面元素。

以下是使用CSS选择器定位元素的示例代码：




from selenium import webdriver
 
# 启动浏览器驱动
driver = webdriver.Chrome()
 
# 打开网页
driver.get("http://example.com")
 
# 使用CSS选择器定位元素
element = driver.find_element_by_css_selector("#loginForm input[type='password']")
 
# 输入密码
element.send_keys("your_password")
 
# 关闭浏览器驱动
driver.quit()

在这个例子中，我们使用了一个CSS选择器来定位一个登录表单中的密码输入框。选择器是根据元素的ID（loginForm）和属性（type='password'）来确定的。这种方法使得定位元素更加灵活和精确，特别适合于处理动态内容和复杂的页面布局。

- 阅读更多 -

css 布局之 4种 position 布局讲解

System

2024-08-19

所有,css

在CSS中，position属性用于指定元素的定位方式。以下是position属性的四种常见值及其说明：

static：这是position属性的默认值。它表示元素没有被定位，元素出现在正常的流中。
relative：相对定位。相对于其正常位置进行定位。可以通过top、right、bottom、left属性设置元素相对于其正常位置的偏移量。
absolute：绝对定位。相对于最近的非static定位的祖先元素进行定位。如果没有这样的元素，则相对于文档体(body)进行定位。
fixed：固定定位。相对于浏览器窗口进行定位，并且元素的位置不随页面滚动而变化。

实例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Position Layout Example</title>
<style>
  .static-box {
    position: static; /* 默认位置 */
    width: 100px;
    height: 100px;
    background-color: lightblue;
  }
 
  .relative-box {
    position: relative; /* 相对定位 */
    width: 100px;
    height: 100px;
    background-color: lightcoral;
    top: 50px; /* 向下移动50px */
    left: 50px; /* 向右移动50px */
  }
 
  .absolute-box {
    position: absolute; /* 绝对定位 */
    width: 100px;
    height: 100px;
    background-color: lightgreen;
    top: 20px; /* 相对于最近的祖先元素向下移动20px */
    right: 20px; /* 相对于最近的祖先元素向右移动20px */
  }
 
  .fixed-box {
    position: fixed; /* 固定定位 */
    width: 100px;
    height: 100px;
    background-color: lightgray;
    bottom: 0; /* 距离窗口底部0px */
    right: 0; /* 距离窗口右侧0px */
  }
</style>
</head>
<body>
 
<div class="static-box">Static Box</div>
<div class="relative-box">Relative Box</div>
<div class="absolute-box">Absolute Box</div>
<div class="fixed-box">Fixed Box</div>
 
</body>
</html>

在这个例子中，.static-box是默认的静态定位，.relative-box相对于其正常位置有了偏移，.absolute-box相对于最近的父容器有了偏移，而.fixed-box则是固定在浏览器窗口的底部右侧。

- 阅读更多 -

【重识 HTML + CSS(10)，前端开发技术调研

System

2024-08-19

所有,css

在HTML和CSS中，我们可以使用各种技术和工具来提升我们的开发效率和代码质量。以下是一些常见的前端开发技术和工具：

版本控制工具：Git是一种分布式版本控制系统，它可以帮助我们跟踪和管理项目中的文件变更历史。
构建工具：Webpack是一个模块打包工具，它可以分析项目中的依赖关系，并生成一个或多个bundle。
包管理工具：npm和yarn是两种流行的包管理工具，它们用于安装和管理项目依赖。
代码质量工具：ESLint、Stylelint和Prettier等工具可以帮助我们写出更加一致和无错误的代码。
状态管理库：Redux和Vuex等库可以帮助我们管理复杂应用的状态。
测试框架：Jest、Mocha和Cypress等测试工具可以帮助我们确保代码的质量。
服务端渲染：Next.js、Nuxt.js等框架可以实现服务端渲染，提高搜索引擎优化和提升应用的加载速度。
图形和图表库：D3.js、Chart.js和Google Charts等可以帮助我们创建图形和图表。
设计系统：如Material Design、Bootstrap等可以帮助我们快速设计和创建高质量的用户界面。
实用库和API：lodash、moment.js等提供了大量实用的函数和对象。

这些技术和工具可以帮助我们更高效地开发和维护前端项目。在选择使用时，我们需要根据项目需求和团队技术栈来选择合适的工具。

System

2024-08-19

所有,css




// uniapp vue3 vscode 快速开发配置示例
// 使用 pinia 进行状态管理，数据持久化和加密处理，同时集成 unocss 实现快速样式定义
 
// 1. 安装所需依赖
// 在项目根目录打开终端，运行以下命令
npm install pinia pinia-plugin-persist pinia-plugin-encryption unocss
 
// 2. 配置 `main.js` 或 `main.ts`
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
import piniaPluginEncryption from 'pinia-plugin-encryption'
import App from './App.vue'
 
// 创建 pinia 实例并添加持久化和加密插件
const pinia = createPinia()
pinia.use(piniaPluginPersist)
pinia.use(piniaPluginEncryption)
 
const app = createApp(App)
app.use(pinia)
app.mount('#app')
 
// 3. 在 `store.js` 或 `store/index.js` 中定义 store
import { defineStore } from 'pinia'
 
export const useMainStore = defineStore({
  id: 'main',
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++
    },
  },
})
 
// 4. 在组件中使用 store
// 在 `components/MyComponent.vue` 中
<template>
  <button @click="increment">{{ counter }}</button>
</template>
 
<script setup>
import { useMainStore } from '@/store'
 
const { counter, increment } = useMainStore()
</script>
 
// 使用 UnoCSS 快速定义样式
// 在 `components/MyComponent.vue` 中
<style scoped>
/* 使用 UnoCSS 写法 */
.btn {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
</style>

这个示例展示了如何在uniapp vue3项目中使用pinia进行状态管理，同时使用pinia-plugin-persist进行数据持久化存储和使用pinia-plugin-encryption进行数据加密。同时，展示了如何使用unocss来快速定义组件样式。这些配置可以极大地提升开发者的开发效率和项目质量。

- 阅读更多 -

【重识 HTML + CSS】盒子模型相关知识点

System

2024-08-19

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型示例</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            padding: 20px;
            border: 5px solid blue;
            margin: 10px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="box">盒子内容</div>
</body>
</html>

这段代码定义了一个类名为.box的CSS样式，它包括了width、height、padding、border、margin和background-color属性。在HTML中，应用了这个类的<div>元素将展现出这样的盒子模型，其实际大小将是：

内容宽度（Content width）：300px

内容高度（Content height）：200px

元素宽度（Element width）：

内容宽度 + 左右内边距 = 300px + 20px + 20px = 340px

元素高度（Element height）：

内容高度 + 上下内边距 = 200px + 20px + 20px = 240px

可视区域宽度（Visual area width）：

元素宽度 + 左右边框 = 340px + 10px + 5px = 360px

可视区域高度（Visual area height）：

元素高度 + 上下边框 = 240px + 10px + 5px = 260px

这个示例展示了如何计算和设计一个盒子模型，并且如何通过CSS控制元素的内部和外部间距，以及边框和背景色。

- 阅读更多 -

css的背景

System

2024-08-19

所有,css

CSS背景属性可以用来设置元素的背景样式。以下是一些常用的CSS背景属性：

background-color: 设置元素的背景颜色。
background-image: 设置元素的背景图片。
background-repeat: 设置背景图片是否及如何重复。
background-position: 设置背景图片的初始位置。
background-size: 设置背景图片的大小。
background-clip: 设置背景的绘制区域。
background-origin: 设置背景图片的定位区域。
background-attachment: 设置背景图片是否固定或者随着页面滚动。

示例代码：




/* 设置背景颜色为蓝色 */
div {
  background-color: blue;
}
 
/* 设置背景图片，不重复，位于左上角 */
div {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: left top;
}
 
/* 设置背景图片，覆盖整个元素，不重复，居中 */
div {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
 
/* 设置背景图片固定，不随页面滚动 */
div {
  background-image: url('image.jpg');
  background-attachment: fixed;
}

简写形式可以一次性设置多个背景属性：




/* 简写形式设置背景 */
div {
  background: #ff0000 url('image.jpg') no-repeat center fixed;
}

请根据具体需求选择合适的属性进行设置。

- 阅读更多 -

css background-color属性无效

System

2024-08-19

所有,css

解释：

background-color 属性无效可能是由于几个原因造成的：

选择器错误：可能没有正确选择到元素，或者选择器优先级不足以覆盖其他样式规则。
语法错误：background-color 属性后的值可能有语法错误，例如颜色名、十六进制颜色代码或 RGB/RGBA 值的格式不正确。
层叠问题：如果有多个样式规则应用到同一元素，并且这些规则中包含 background-color 属性，可能发生层叠问题，导致预期的颜色没有被应用。
浏览器兼容性问题：有时候，颜色值可能在某些浏览器中不被支持。

解决方法：

检查并修正选择器，确保它正确选择了元素，并且优先级足够高。
检查 background-color 属性的语法，确保使用了正确的颜色值格式。
如果存在层叠问题，可以尝试提高选择器的优先级，或者使用 !important 规则来确保颜色被应用。
检查并测试在不同的浏览器中是否存在兼容性问题，如有必要，使用兼容性更好的颜色值或者使用浏览器前缀。

示例代码：




/* 确保选择器正确 */
.selector {
  background-color: #ff0000; /* 使用十六进制颜色 */
}
 
/* 提高优先级 */
.selector!important {
  background-color: #ff0000; /* 使用 !important 提高优先级 */
}

- 阅读更多 -

CSS-flex布局

System

2024-08-19

所有,css

CSS的Flexbox（弹性盒子）布局提供了一种更灵活的方式来对容器内的项目进行排列、对齐和分配空间。以下是一些关键的CSS属性和它们的作用：

display: flex; - 这将创建一个弹性容器。
flex-direction - 定义项目的方向，可以是行（row，默认）、行反向（row-reverse）、列（column）或列反向（column-reverse）。
justify-content - 定义项目在主轴上的对齐方式，可以是flex-start（默认）、flex-end、center、space-between或space-around。
align-items - 定义项目在交叉轴上的对齐方式，可以是flex-start、flex-end、center、baseline或stretch（默认）。
flex-wrap - 定义当容器太小无法放下所有项目时是否应该换行，可以是nowrap（默认）、wrap或wrap-reverse。
flex-flow - 是flex-direction和flex-wrap的简写形式，默认为row nowrap。

下面是一个简单的Flex布局示例：

HTML:




<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:




.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 100px;
  background-color: lightblue;
}
 
.flex-item {
  width: 50px;
  height: 50px;
  background-color: coral;
  margin: 10px;
}

这个例子中，.flex-container 是一个弹性容器，它拥有三个子元素 .flex-item，这些项目在容器中水平排列，每个项目周围有间距，并且容器两端的空间分布对称。

- 阅读更多 -