1. 首页
  2. 分类
  3. css
Vue3组件库开发项目实战——02项目搭建（配置Eslint/Prettier/Sass/Tailwind CSS/VitePress/Vitest）
System
2024-08-23
所有,css



# 安装项目初始化需要的依赖
npm install
 
# 安装 ESLint 和相关插件
npm install eslint eslint-plugin-vue --save-dev
 
# 安装 Prettier 和相关插件
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
 
# 安装 Sass 处理器和加载器
npm install sass sass-loader --save-dev
 
# 安装 Tailwind CSS 相关依赖
npm install tailwindcss postcss autoprefixer --save-dev
 
# 安装 Vue 3 相关依赖
npm install vue@next vue-loader@next --save-dev
 
# 初始化 Tailwind CSS 配置文件
npx tailwindcss init -p
 
# 安装其他开发依赖
npm install @vue/compiler-sfc lint-staged husky --save-dev

以上命令安装了项目所需的基础库和工具，包括 ESLint、Prettier、Sass 处理器、Tailwind CSS 和 Vue 3。同时，它还初始化了 Tailwind 的配置文件，并安装了一些额外的开发依赖，如 vue-loader 用于加载 Vue 单文件组件（.vue 文件），lint-staged 用于运行 ESLint 和 Prettier 以在 git 提交之前格式化和检查代码，husky 用于在 git 提交阶段进行钩子调用。

- 阅读更多 -
【重识 HTML + CSS，html标签之列表标签
System
2024-08-23
所有,css

在HTML中，列表标签主要有三种：有序列表（<ol>）、无序列表（<ul>）和定义列表（<dl>）。

  1. 有序列表（Ordered List）：使用<ol>标签创建，列表项用<li>标签定义，列表项会自动以数字进行排序。



<ol>
  <li>苹果</li>
  <li>香蕉</li>
  <li>樱桃</li>
</ol>
  1. 无序列表（Unordered List）：使用<ul>标签创建，同样使用<li>标签定义列表项，列表项会自动以项目符号进行排序。



<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>樱桃</li>
</ul>
  1. 定义列表（Definition List）：使用<dl>标签创建，包含多个定义条目，每个条目由<dt>（定义术语）和<dd>（定义描述）组成。



<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言（Hyper Text Markup Language）</dd>
  <dt>CSS</dt>
  <dd>层叠样式表（Cascading Style Sheets）</dd>
</dl>

在CSS中，可以通过样式规则来修饰这些列表，使它们以更加美观的方式呈现。

- 阅读更多 -
CSS案例-6.浮动练习
System
2024-08-23
所有,css

以下是一个简单的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 {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  .nav li {
    float: left;
  }
  .nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  .nav li a:hover {
    background-color: #111;
  }
</style>
</head>
<body>
 
<ul class="nav">
  <li><a href="#home">首页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>
 
</body>
</html>

这段代码定义了一个简单的水平导航栏，使用了float: left;属性来让导航链接并排显示。同时，还包括了悬停链接时的背景颜色变化，为用户提供了良好的视觉反馈。这个示例是学习如何使用浮动进行基本布局的入门级练习。

- 阅读更多 -
基于 TailwindCss 的网页组件库站点 UIBak 上线说明
System
2024-08-23
所有,css

Tailwind CSS 是一个实用的、高度可定制的 CSS 框架，用于快速构建用户界面。UIBak 是一个基于 Tailwind CSS 构建的开源网站组件库，旨在为开发者和设计师提供一个简单易用的组件库，以加快网站开发过程。

在线上线说明中，通常会提供库的使用方法、安装指南、文档链接、在线演示等信息。以下是一个简单的示例，展示如何在现有的网站中引入 UIBak 组件库：

  1. 通过 CDN 引入 Tailwind CSS 和 UIBak 的 CSS 和 JavaScript 文件：



<!-- 引入 Tailwind CSS -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<!-- 引入 UIBak CSS -->
<link href="https://cdn.uibak.com/uibak.css" rel="stylesheet">
 
<!-- 引入 UIBak JavaScript -->
<script src="https://cdn.uibak.com/uibak.js"></script>
  1. 在 HTML 中使用 UIBak 组件：



<div class="uibak-button">
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Button
  </button>
</div>
  1. 确保你的 Tailwind CSS 配置文件（tailwind.config.js）中包含 UIBak 所需的 purge 指令，以避免在生产环境下包含不必要的样式：



module.exports = {
  purge: ['./index.html', './**/*.js'],
  theme: {
    // ...
  },
  variants: {},
  plugins: [],
};

以上代码展示了如何在现有的网页中引入 UIBak 组件库，并使用一个按钮组件作为示例。在实际使用中，你可以查阅 UIBak 的官方文档来了解所有可用的组件和它们的使用方法。

- 阅读更多 -
如何使用CSS和JS实现鼠标移动到图片上的时候实现图片的放大和缩小效果。
System
2024-08-23
所有,css

可以通过监听鼠标的移入（mouseenter）和移出（mouseleave）事件，在事件处理函数中改变图片的大小。以下是一个简单的实现示例：

HTML:




<div class="image-container">
  <img src="image.jpg" alt="Sample Image">
</div>

CSS:




.image-container {
  width: 200px; /* 设置容器宽度 */
  height: 200px; /* 设置容器高度 */
  overflow: hidden; /* 隐藏超出容器的部分 */
}
 
.image-container img {
  width: 100%; /* 设置图片宽度为容器宽度 */
  transition: transform 0.3s ease; /* 设置变换效果 */
}

JavaScript:




document.querySelector('.image-container').addEventListener('mouseenter', function() {
  this.querySelector('img').style.transform = 'scale(1.2)'; // 鼠标移入放大图片
});
 
document.querySelector('.image-container').addEventListener('mouseleave', function() {
  this.querySelector('img').style.transform = 'scale(1)'; // 鼠标移出恢复原大小
});

在上述代码中，.image-container 是包含图片的容器，当鼠标移入时，图片会放大 20%，移出后恢复原始大小。通过 CSS 的 transition 属性可以使得放大和缩小过程平滑。

- 阅读更多 -
css知识点总结
System
2024-08-23
所有,css

CSS（层叠样式表）是一种用来为网页添加样式的语言，可以控制网页的布局、颜色、字体大小等多种属性。以下是一些常见的CSS知识点和它们的简单用法：

  1. 字体和文本样式：



/* 字体大小 */
p {
  font-size: 16px;
}
 
/* 字体加粗 */
strong {
  font-weight: bold;
}
 
/* 文本颜色 */
p {
  color: red;
}
 
/* 文本对齐 */
p {
  text-align: center;
}
  1. 背景和边框样式：



/* 背景颜色 */
body {
  background-color: #f3f3f3;
}
 
/* 边框宽度和样式 */
div {
  border: 1px solid black;
}
 
/* 圆角边框 */
div {
  border-radius: 5px;
}
 
/* 背景图片 */
body {
  background-image: url('background.jpg');
}
  1. 布局和浮动：



/* 宽度和高度 */
div {
  width: 100px;
  height: 100px;
}
 
/* 外边距和内边距 */
p {
  margin: 10px;
  padding: 20px;
}
 
/* 浮动（左侧浮动） */
img {
  float: left;
}
  1. 盒模型和定位：



/* 盒模型：内容、边框、内边距、外边距 */
div {
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid black;
  margin: 5px;
}
 
/* 绝对定位 */
div {
  position: absolute;
  top: 10px;
  left: 10px;
}
 
/* 相对定位 */
div {
  position: relative;
  top: 5px;
}
  1. 伪类和伪元素：



/* 链接伪类 */
a:link {
  color: blue;
}
a:hover {
  color: red;
}
 
/* 首字下沉点 */
p::first-letter {
  font-size: 200%;
}
 
/* 伪元素（插入内容） */
p::before {
  content: '前缀';
}
  1. CSS3特效和动画：



/* 阴影效果 */
div {
  box-shadow: 5px 5px 10px #888888;
}
 
/* 圆形图片 */
img {
  border-radius: 50%;
}
 
/* CSS3 动画 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: example;
  animation-duration: 4s;
}

CSS是网页设计的核心技术之一，上面的例子涵盖了CSS的基础知识点。在实际开发中，CSS可以用于创建复杂的布局和动画，以及响应式设计，以适应不同的屏幕尺寸。

- 阅读更多 -
css中元素的显示与隐藏，2024年最新去阿里面试hr,会问到的问题
System
2024-08-23
所有,css

在CSS中，可以使用display属性或visibility属性来控制元素的显示与隐藏。

  1. display属性：

    • display: none;：元素不显示，并且从文档流中移除。
    • display: block;：元素作为块级元素显示。
    • display: inline;：元素作为内联元素显示。
    • display: flex;：元素使用弹性布局模型显示。

  2. visibility属性：

    • visibility: hidden;：元素不可见，但仍然占据原来的空间。
    • visibility: visible;：元素可见。

示例代码：




/* 使用display属性 */
.hide-display {
  display: none; /* 元素被隐藏 */
}
 
.show-display {
  display: block; /* 或者使用 'inline'、'flex' 等，根据需要显示 */
}
 
/* 使用visibility属性 */
.hide-visibility {
  visibility: hidden; /* 元素隐藏，但仍占据空间 */
}
 
.show-visibility {
  visibility: visible; /* 元素可见 */
}

在JavaScript中，可以通过修改元素的style属性来切换这些显示状态：




// 使用display属性
document.getElementById('myElement').style.display = 'none'; // 隐藏元素
document.getElementById('myElement').style.display = 'block'; // 显示元素
 
// 使用visibility属性
document.getElementById('myElement').style.visibility = 'hidden'; // 隐藏元素但保留空间
document.getElementById('myElement').style.visibility = 'visible'; // 显示元素
- 阅读更多 -
【CSS基础】10.过度动画transition和动画animation
System
2024-08-23
所有,css

过度动画（transition）和动画（animation）是CSS3中用于创建视觉效果的两种机制。

过度动画（transition）：

当一个属性改变时，通过指定的时长平滑地过渡到新的样式。




/* 应用于选择器的过度动画 */
.element {
  transition: property duration timing-function delay;
}
 
/* 示例 */
.element {
  transition: width 2s ease-in-out 0.5s;
}

动画（animation）：

通过指定的关键帧序列来创建更复杂的动画。




/* 定义动画 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
/* 应用动画到选择器 */
.element {
  animation: name duration timing-function delay iteration-count direction fill-mode;
}
 
/* 示例 */
.element {
  animation: example 5s infinite alternate;
}

两者的主要区别在于控制权的细粒度和复杂度：过度动画通常用于简单的状态变化，而动画可以创建更复杂、多阶段的动画序列。

- 阅读更多 -
VS-Code-HTML-CSS-JS配置
System
2024-08-23
所有,css

为了在Visual Studio Code中配置HTML、CSS和JavaScript，你需要确保已经安装了相应的扩展：

  1. 打开Visual Studio Code。

  2. 确保你已经安装了以下扩展：

    • vscode-icons：为文件和文件夹添加图标。
    • HTML CSS Support：提供CSS自动完成的支持。
    • Debugger for Chrome：让你在VS Code中调试JavaScript代码。
    • Auto Close Tag：自动闭合HTML标签。
    • Auto Rename Tag：自动重命名HTML标签。
    • Path Intellisense：自动完成文件路径。
    • JavaScript (ES6) code snippets：ES6语法的代码段。
    • Node.js Modules IntelliSense：Node.js模块的自动完成。
  3. 安装完扩展后，你可以通过编写HTML文件，并在<head>标签中链接CSS文件，或者直接在HTML文件中使用<style>标签来编写CSS。
  4. 对于JavaScript，你可以在HTML文件中使用<script>标签，或者创建一个单独的.js文件，并在HTML文件中引入。

下面是一个简单的HTML、CSS和JavaScript配置示例：




<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #f7f7f7;
            color: #333;
            font-family: 'Open Sans', sans-serif;
        }
        .highlight {
            background-color: #d9534f;
            color: white;
            padding: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="highlight">Hello, World!</div>
    <script>
        // JavaScript code here
        document.querySelector('.highlight').textContent = 'Hello, VS Code!';
    </script>
</body>
</html>

在Visual Studio Code中，你可以按下Ctrl+S保存文件，然后在浏览器中打开以查看效果。如果你想要进行调试，可以在launch.json文件中设置一个断点，然后通过Debugger for Chrome开始调试。

- 阅读更多 -
Vue进阶（幺肆贰）：CSS-静态定位，相对定位，绝对定位
System
2024-08-23
所有,css



<template>
  <div class="container">
    <div class="box static">静态定位</div>
    <div class="box relative">相对定位</div>
    <div class="box absolute">绝对定位</div>
  </div>
</template>
 
<style scoped>
.container {
  position: relative;
  height: 200px;
  border: 2px solid #000;
}
 
.box {
  width: 100px;
  height: 100px;
  margin: 10px;
}
 
.static {
  background-color: lightblue;
}
 
.relative {
  position: relative;
  top: 40px;
  left: 40px;
  background-color: lightcoral;
}
 
.absolute {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: lightgreen;
}
</style>

这个代码实例展示了如何在Vue组件中使用CSS定位。.container 设置为 position: relative; 以建立一个定位上下文。.static 类使用默认的静态定位。.relative 类使用 position: relative; 并通过 top 和 left 属性进行相对定位。.absolute 类使用 position: absolute; 并通过 top 和 right 属性进行绝对定位。这些属性值都是相对于包含它们的 .container 元素的边缘。

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