1. 首页
  2. 分类
  3. css
使用Vite安装TailwindCSS
System
2024-08-07
所有,css

要在Vite项目中安装Tailwind CSS，请按照以下步骤操作：

  1. 确保你已经安装了Node.js和npm。
  2. 创建一个新的Vite项目或者打开一个现有的项目。
  3. 在终端或命令提示符中运行以下命令来安装Tailwind CSS：



npm install -D tailwindcss postcss autoprefixer
  1. 接下来，使用Tailwind CSS创建一个配置文件。在项目的根目录下创建一个tailwind.config.js文件，并添加以下内容：



// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
  1. 在tailwind.config.js文件中配置purge属性，以仅包含您实际使用的Tailwind CSS类。这可以通过检测您的HTML和JavaScript文件来自动完成，或者您可以手动指定文件。
  2. 创建或编辑你的 CSS 文件（例如index.css），并使用Tailwind CSS directives来编写样式：



/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. 在你的Vite项目的入口JavaScript文件中导入你的CSS文件，例如在main.js或index.js中：



// ./src/main.js
import './index.css';
 
// ... 你的应用逻辑
  1. 最后，你需要设置PostCSS来使用Tailwind CSS。在项目根目录创建一个postcss.config.js文件，并添加以下内容：



// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

完成以上步骤后，你就可以在Vite项目中使用Tailwind CSS 了。

- 阅读更多 -
css制作弧形背景图
System
2024-08-07
所有,css

要使用CSS创建弧形背景图，可以使用border-radius和background属性。以下是一个示例代码，它创建了一个左半圆形状的背景：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弧形背景图</title>
<style>
  .arc-shape {
    width: 200px;
    height: 200px;
    background: url('background.jpg') no-repeat center center;
    background-size: cover;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
  }
</style>
</head>
<body>
  <div class="arc-shape"></div>
</body>
</html>

在这个例子中，.arc-shape 类创建了一个宽度为200px，高度为200px的容器，并设置了背景图。border-top-right-radius 和 border-bottom-right-radius 属性创建了一个左半圆形的弧形。你可以根据需要调整width、height、border-radius的值来改变弧形的大小和弧度。

- 阅读更多 -
Selenium CSS 选择器详细讲解
System
2024-08-07
所有,css

Selenium WebDriver 使用 CSS 选择器来定位网页元素。CSS 选择器是一种强大的方式来选择特定的 HTML 元素，它们可以用来定位页面上的任何元素。

以下是一些常用的 CSS 选择器以及如何在 Selenium 中使用它们的示例：

  1. 通过 ID 选择元素：



element = driver.find_element_by_css_selector("#elementId")
  1. 通过类名选择元素：



elements = driver.find_elements_by_css_selector(".className")
  1. 通过标签名选择元素：



elements = driver.find_elements_by_css_selector("div")
  1. 通过属性选择元素：



element = driver.find_element_by_css_selector("input[name='username']")
  1. 通过子元素选择：



element = driver.find_element_by_css_selector("div > p")
  1. 通过后代选择元素（在给定的父元素内选择元素）：



element = driver.find_element_by_css_selector("form input")
  1. 通过伪类选择元素（例如选择列表中的第一个元素）：



element = driver.find_element_by_css_selector("ul li:first-child")
  1. 通过伪元素选择文本内容（例如选择某个元素的 ::before 伪元素中的内容）：



text = driver.find_element_by_css_selector("p::before").get_attribute("textContent")

注意：在使用 CSS 选择器时，确保选择器语法正确，并且元素在页面上可见且可交互。如果元素不是立即可见的，可能需要等待元素变为可点击或可交互状态。

- 阅读更多 -
【教程】hexo 更换主题后，部署在 Github Page 无 CSS 样式
System
2024-08-07
所有,css

报错问题解释：

当你更换了 Hexo 主题后，部署到 Github Page 但没有 CSS 样式显示，很可能是因为缺少了必要的样式文件或者资源文件没有正确加载。

解决方法：

  1. 确认是否正确安装了主题依赖：

    进入 Hexo 项目目录，运行 npm install 确保所有依赖都已正确安装。

  2. 检查是否有正确的样式链接：

    打开生成的 index.html 文件，查看 <head> 标签内是否有正确引用主题的 CSS 文件。

  3. 清理缓存：

    运行 hexo clean 清理 Hexo 缓存文件。

  4. 重新生成并部署：

    运行 hexo g 重新生成静态文件，然后 hexo d 重新部署到 Github Page。

  5. 检查 Github Page 设置：

    确认你的 Github Page 设置中分支选择正确（应该是 gh-pages），以及是否有权限问题导致资源无法加载。

  6. 检查是否有错误信息：

    查看浏览器控制台（Console），查找加载资源时可能出现的 404 或者其他错误信息，根据错误信息进行相应的修复。

  7. 查看主题配置文件：

    检查主题的 _config.yml 文件，确认是否有配置项需要修改以指向正确的资源路径。

如果以上步骤都无法解决问题，可以查看 Hexo 官方文档或相关主题的文档，查找是否有特定主题的部署要求，或者在相关社区寻求帮助。

- 阅读更多 -
CSS 根据子元素选择父元素，并设置父元素的样式
System
2024-08-07
所有,css

在CSS中，直接根据子元素来选择并修改其父元素的样式是不可行的，因为CSS的选择器是按照从上到下的方式进行解析的，也就是说，它只能选择当前已经确定的元素，而不能预知未来的元素。

但是，你可以通过JavaScript来实现这个功能。以下是一个简单的例子，展示了如何根据子元素的状态来改变父元素的样式：

HTML:




<div class="parent">
  <p class="child">这是一个子元素</p>
</div>

CSS:




/* 初始化父元素的样式 */
.parent {
  background-color: #f0f0f0;
}
 
/* 当父元素的某个子元素满足特定条件时，更改父元素的样式 */
.parent .child:hover + .parent {
  background-color: #blue;
}

JavaScript:




// 获取父元素
var parent = document.querySelector('.parent');
// 获取子元素
var child = document.querySelector('.child');
 
// 监听子元素的事件，并在事件发生时改变父元素的样式
child.addEventListener('mouseenter', function() {
  parent.style.backgroundColor = '#blue';
});
 
child.addEventListener('mouseleave', function() {
  parent.style.backgroundColor = '#f0f0f0';
});

在这个例子中，当鼠标悬停在子元素上时，父元素的背景色会变成蓝色，鼠标离开时，背景色会恢复为初始的灰色。这个功能是通过JavaScript动态改变父元素的样式实现的。

- 阅读更多 -
css控制div里的的字符串的显示，遇到 换行，超出div的宽度也换行
System
2024-08-07
所有,css

在CSS中，可以使用各种属性来控制div里的文本显示，例如字体、大小、颜色、对齐方式等。以下是一些常用的CSS属性，用于控制文本的显示：

  1. color：设置文本颜色。
  2. font-family：设置文本的字体。
  3. font-size：设置文本的大小。
  4. text-align：设置文本的对齐方式（左、右、中、两端对齐）。
  5. line-height：设置行间距，即行高。
  6. text-decoration：设置文本装饰（如下划线、上划线、删除线）。
  7. text-transform：控制文本的大小写（如小写、大写）。
  8. letter-spacing：设置字符之间的间距。
  9. word-spacing：设置单词之间的间距。
  10. font-weight：设置字体的粗细。

以下是一个简单的例子，展示如何使用CSS控制div里的文本：

HTML:




<div class="text-example">这是一段示例文本。</div>

CSS:




.text-example {
  color: #333333;            /* 文本颜色 */
  font-family: 'Arial', sans-serif; /* 字体 */
  font-size: 16px;            /* 字体大小 */
  text-align: center;         /* 文本居中对齐 */
  line-height: 1.5;           /* 行间距 */
  text-decoration: none;      /* 无文本装饰 */
  text-transform: uppercase;   /* 文本转换为大写 */
  letter-spacing: 2px;        /* 字符间距 */
  word-spacing: 4px;          /* 单词间距 */
  font-weight: bold;          /* 字体粗细 */
}

在这个例子中，.text-example 类应用于一个div元素，并设置了多种文本样式属性。这些属性可以根据需要进行组合和调整，以达到所需的文本显示效果。

- 阅读更多 -
聊聊 CSS 的 ::marker
System
2024-08-07
所有,css

::marker 是一个伪元素，用于选择列表项（如 <ul> 或 <ol> 中的 <li> 元素）的标记。在大多数浏览器中，标记通常是项目符号（例如圆点或数字），但在一些CSS定义的列表中，标记可能是空的或由其他内容组成。

::marker 伪元素可以用来为这些标记添加样式，而不改变列表中项目的内容。

例如，如果你想要更改无序列表的项目符号样式，可以使用以下CSS代码：




ul li::marker {
  color: blue;
  font-size: 20px;
}

如果你想要更改有序列表的项目编号样式，可以使用以下CSS代码：




ol li::marker {
  color: red;
  font-weight: bold;
}

请注意，::marker 目前的支持情况相对较新，因此请在使用时确保浏览器兼容性。

- 阅读更多 -
一文梳理总结HTML+CSS琐碎知识点 快速上手前端开发_前端开发学到的html css js知识点总结
System
2024-08-07
所有,css

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

  1. 文档类型声明(DOCTYPE)

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




<!DOCTYPE html>
<html>
...
</html>
  1. 字符集

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




<meta charset="UTF-8">
  1. 标题标签(h1-h6)

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




<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
...
<h6>这是一个标题</h6>
  1. 段落标签(p)

p标签用于定义段落。




<p>这是一个段落。</p>
  1. 链接标签(a)

a标签用于定义超链接。




<a href="https://www.example.com">访问Example网站</a>
  1. 图像标签(img)

img标签用于定义图像。




<img src="image.jpg" alt="描述文字">
  1. 列表标签

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




<ol>
  <li>第一项</li>
  <li>第二项</li>
</ol>
 
<ul>
  <li>第一项</li>
  <li>第二项</li>
</ul>
  1. 表格标签

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




<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>
  1. 表单标签

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




<form action="submit.php" method="post">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="提交">
</form>
  1. 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>
  1. CSS选择器

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




/* 选择所有的段落 */
p {
  color: green;
}
 
/* 选择class为"special"的元素 */
.special {
  font-weight: bold;
}
 
/* 选择id为"main"的元素 */
#main {
  background-color: yellow
- 阅读更多 -
CSS margin 属性和CSS 单边外边距属性
System
2024-08-07
所有,css

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（盒子模型，定位，浮动，扩展）
System
2024-08-07
所有,css

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

  1. 盒子模型(Box Model)：

    定义了元素的边框、内边距（padding）、外边距（margin）和内容区域。




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

  1. 定位(Positioning)：

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




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

  1. 浮动(Floating)：

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




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

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

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