分类前端技术下的文章

2024-08-15

CSS 选择器是用来选择你想要样式化的元素的模式。下面是一些常见的 CSS 选择器：

类选择器（Class Selector）: 用于选择具有指定类的元素。




.my-class {
  color: red;
}

ID 选择器（ID Selector）: 用于选择具有指定 ID 的单个元素。




#my-id {
  color: blue;
}

元素选择器（Element Selector）: 用于选择指定类型的元素。




p {
  font-size: 16px;
}

属性选择器（Attribute Selector）: 用于选择包含指定属性的元素。




input[type="text"] {
  background-color: yellow;
}

伪类选择器（Pseudo-class Selector）: 用于选择处于特定状态的元素。




a:hover {
  text-decoration: underline;
}

伪元素选择器（Pseudo-element Selector）: 用于选择元素的一部分（如第一个字母或元素内容的开始/结束）。




p::first-letter {
  font-size: 200%;
}

子代选择器（Child Selector）: 用于选择指定父元素的直接子元素。




div > p {
  color: green;
}

相邻选择器（Adjacent Sibling Selector）: 用于选择紧跟在另一个元素后的元素。




h1 + p {
  margin-top: 0;
}

后代选择器（Descendant Selector）: 用于选择指定父元素的后代（不仅限于直接子元素）。




div p {
  color: purple;
}

通配选择器（Universal Selector）: 选择页面上的所有元素。




* {
  margin: 0;
  padding: 0;
}

群组选择器（Grouping Selector）: 将选择器组合在一起，选择匹配任一选择器的元素。




h1, h2, h3 {
  font-family: Arial, sans-serif;
}

这些是 CSS 选择器的基础知识。CSS 还有更高级的选择器，如伪元素选择器、标签选择器、伪类函数选择器等。

- 阅读更多 -

HTML&CSS中的树形结构图

System

2024-08-15

所有,css

在HTML和CSS中创建一个树形结构图，可以使用无序列表 <ul> 和列表项 <li> 来表示节点，然后通过CSS来进行样式化。以下是一个简单的示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tree View</title>
<style>
  ul.tree,
  ul.tree ul {
    list-style-type: none;
  }
  ul.tree li {
    position: relative;
    margin-left: 20px;
    padding-left: 20px;
  }
  ul.tree li:before {
    content: '';
    position: absolute;
    top: 0;
    left: -20px;
    bottom: 50%;
    width: 20px;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
  }
  ul.tree li:after {
    content: '';
    position: absolute;
    top: 50%;
    left: -20px;
    bottom: 0;
    width: 20px;
    border-left: 1px solid #000;
  }
  ul.tree li:last-child:after {
    border-left: none;
  }
</style>
</head>
<body>
<ul class="tree">
  <li>Root Node
    <ul>
      <li>Child Node 1</li>
      <li>Child Node 2
        <ul>
          <li>Grandchild Node 1</li>
          <li>Grandchild Node 2</li>
        </ul>
      </li>
      <li>Child Node 3</li>
    </ul>
  </li>
</ul>
</body>
</html>

这段代码创建了一个简单的树形结构图，你可以根据需要添加更多的层级和节点。使用CSS伪元素 :before 和 :after 来创建节点之间的连接线。

- 阅读更多 -

web前端开发之CSS笔录

System

2024-08-15

所有,css

CSS是一种用于网页样式设计的语言，以下是一些常用的CSS样式和布局技巧的示例：

设置元素的宽度和高度：




div {
  width: 300px;
  height: 200px;
}

设置背景颜色：




div {
  background-color: #ff0000; /* 红色 */
}

设置文本颜色：




p {
  color: #0000ff; /* 蓝色 */
}

设置文本对齐方式：




p {
  text-align: center;
}

设置边框：




div {
  border: 1px solid #000000; /* 黑色实线边框 */
}

设置元素的边距：




div {
  margin: 10px;
}

设置元素的内边距：




div {
  padding: 20px;
}

浮动元素：




div {
  float: left; /* 左浮动 */
}

使用flexbox布局：




.container {
  display: flex; /* 启用flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

隐藏元素：




div {
  display: none; /* 元素不显示 */
}

这些是CSS中常用的样式和布局技巧，可以根据需要进行组合和修改以创建复杂的网页样式。

- 阅读更多 -

CSS：空间转换常见案例

System

2024-08-15

所有,css

在CSS中，进行空间转换的常见方法是使用transform属性。以下是一些常见的空间转换案例及其代码实现：

旋转（rotate）:




.rotate-30 {
  transform: rotate(30deg);
}

缩放（scale）:




.scale-2 {
  transform: scale(2);
}

平移（translate）:




.move-right-100 {
  transform: translateX(100px);
}
 
.move-down-50 {
  transform: translateY(50px);
}

倾斜（skew）:




.skew-45 {
  transform: skewX(45deg);
}

使用这些转换，可以创建动态的界面效果，如旋转加载器、滑动内容显示等。在HTML中应用这些类时，元素将会以这些转换的效果显示。

- 阅读更多 -

Vue中使用Tailwind css

System

2024-08-15

所有,css

要在Vue项目中使用Tailwind CSS，你需要按照以下步骤操作：

安装Tailwind CSS npm包：




npm install -D tailwindcss postcss autoprefixer

使用Tailwind CSS CLI工具创建配置文件：




npx tailwindcss init -p

在tailwind.config.js文件中配置Tailwind CSS。
在你的Vue项目中的main.js或App.vue中引入Tailwind CSS。
在postcss.config.js中配置PostCSS以使用Tailwind CSS。
在Vue组件中使用Tailwind CSS类。

以下是一个简单的例子：

安装Tailwind CSS：




npm install -D tailwindcss postcss autoprefixer

初始化Tailwind：




npx tailwindcss init -p

在src/App.vue中引入Tailwind CSS并使用它：




<template>
  <div class="text-center text-blue-500">
    Hello, Tailwind!
  </div>
</template>
 
<script>
export default {
  // ...
};
</script>

在postcss.config.js中配置PostCSS：




module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

在tailwind.config.js中配置Tailwind（如果已经创建了这个文件）。
最后，确保你的Vue组件的样式部分被正确处理，例如在vue.config.js中配置：




module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
        ],
      },
    },
  },
};

完成这些步骤后，你应该能够在Vue项目中使用Tailwind CSS。记得在你的HTML模板或Vue组件中使用Tailwind CSS提供的实用程序类来设置样式。

- 阅读更多 -

如何使用CSS构建一个瀑布流布局

System

2024-08-15

所有,css

要使用CSS构建一个瀑布流布局，您可以使用CSS的column属性或者使用flexbox布局。以下是两种方法的示例代码：

方法1：使用CSS Columns

HTML:




<div class="waterfall">
  <div class="waterfall-item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="waterfall-item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <!-- 更多 .waterfall-item -->
</div>

CSS:




.waterfall {
  column-count: 3;
  column-gap: 1em;
}
 
.waterfall-item {
  break-inside: avoid;
  margin-bottom: 1em;
}
 
.waterfall-item img {
  width: 100%;
  height: auto;
  display: block;
}

方法2：使用CSS Flexbox

HTML:




<div class="waterfall">
  <div class="waterfall-item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="waterfall-item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <!-- 更多 .waterfall-item -->
</div>

CSS:




.waterfall {
  display: flex;
  flex-wrap: wrap;
}
 
.waterfall-item {
  flex: 1;
  flex-basis: 100%;
  margin-bottom: 1em;
  margin-right: 1em;
}
 
.waterfall-item:nth-child(3n) {
  margin-right: 0;
}
 
.waterfall-item img {
  width: 100%;
  height: auto;
  display: block;
}

两种方法均可以创建一个瀑布流布局，使得图片按列排列，并且自动流动到下一行。您可以根据实际情况选择其中一种方法实现您的需求。

- 阅读更多 -

Vue自定义组件中使用CSS变量设置样式？

System

2024-08-15

所有,css

在Vue中，可以通过CSS-in-JS库如styled-components或emotion来使用CSS变量（CSS Custom Properties）。以下是一个使用styled-components的例子：

首先安装styled-components：




npm install styled-components

然后在Vue文件中使用：




// 引入 styled-components
import styled from 'styled-components';
 
// 创建一个带样式的组件
const StyledDiv = styled.div`
  --main-bg-color: ${props => props.theme.bgColor};
  --main-text-color: ${props => props.theme.textColor};
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
`;
 
// 设置主题
const theme = {
  bgColor: 'lightblue',
  textColor: 'white',
};
 
export default {
  data() {
    return {
      // 其他数据...
    };
  },
  // 在Vue组件中使用
  components: {
    StyledDiv
  }
}

在模板中使用：




<template>
  <StyledDiv>这是一个带有样式的div元素</StyledDiv>
</template>

在这个例子中，我们创建了一个StyledDiv组件，并通过props.theme设置了自定义的背景颜色和文本颜色。在模板中，直接使用StyledDiv就可以展现出相应的样式。

- 阅读更多 -

CSS技巧专栏：一日一例 1.纯CSS实现会讨好的热情按钮特效

System

2024-08-15

所有,css




/* 热情按钮样式 */
.btn-passion {
    display: inline-block;
    text-decoration: none;
    color: #FFF;
    background-color: #E85E6B;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
 
/* 按钮悬停状态 */
.btn-passion:hover {
    background-color: #D9394D;
}
 
/* 按钮活跃状态 */
.btn-passion:active {
    background-color: #D9394D;
    box-shadow: 0 5px #888888;
    transform: translateY(4px);
}
 
/* 按钮禁用状态 */
.btn-passion.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

这段代码展示了如何使用CSS创建一个热情按钮，包括正常状态、悬停状态、激活状态和禁用状态的样式。通过使用CSS的类选择器和伪类，可以为按钮的不同状态定义不同的视觉效果，增强了用户界面的交互感。

- 阅读更多 -

CSS中去掉li前面的圆点方法

System

2024-08-15

所有,css

在CSS中，可以通过设置list-style-type属性为none来去掉<li>元素前面的圆点。这样可以移除有序列表或无序列表的项目符号。

下面是一个简单的例子：




ul {
  list-style-type: none; /* 移除无序列表的项目符号 */
}
 
ol {
  list-style-type: none; /* 移除有序列表的项目符号 */
}

或者可以直接在HTML元素上使用内联样式：




<ul style="list-style-type: none;">
  <li>列表项1</li>
  <li>列表项2</li>
  <!-- 更多列表项 -->
</ul>
 
<ol style="list-style-type: none;">
  <li>列表项1</li>
  <li>列表项2</li>
  <!-- 更多列表项 -->
</ol>

这样就能确保列表项前面没有任何符号。

- 阅读更多 -

笔记：模拟网页操作之定位元素CSS，建议收藏模仿学习

System

2024-08-15

所有,css

在Python中，使用Selenium模拟网页操作时，可以通过定位元素的CSS属性来找到和操作这些元素。以下是一个使用Selenium和Python定位元素CSS属性的示例：




from selenium import webdriver
from selenium.webdriver.common.by import By
 
# 启动浏览器驱动
driver = webdriver.Chrome()
 
# 打开网页
driver.get("http://example.com")
 
# 通过CSS选择器定位元素
element = driver.find_element(By.CSS_SELECTOR, 'input[type="submit"]')
 
# 对定位到的元素进行操作，例如点击
element.click()
 
# 关闭浏览器驱动
driver.quit()

在这个例子中，我们使用了CSS选择器input[type="submit"]来定位类型为"submit"的输入框，并对其执行了点击操作。CSS选择器是一种强大的定位工具，可以通过ID、类、属性、层级选择器等多种方式精确定位页面元素。

- 阅读更多 -