分类 css 下的文章

2024-08-15

CSS定位机制允许你对元素进行定位，这里有几种方法：

静态定位（static）
相对定位（relative）
绝对定位（absolute）
固定定位（fixed）
粘性定位（sticky）

下面是每种定位方法的示例代码：

静态定位（static）：这是所有元素的默认定位方式，即没有定位。




div {
  position: static;
  left: 0;
  top: 0;
}

相对定位（relative）：相对于其正常位置进行定位。




div {
  position: relative;
  left: 50px;
  top: 20px;
}

绝对定位（absolute）：相对于最近的非static定位的祖先元素进行定位。




div {
  position: absolute;
  left: 100px;
  top: 50px;
}

固定定位（fixed）：相对于浏览器窗口进行定位。




div {
  position: fixed;
  right: 0;
  bottom: 0;
}

粘性定位（sticky）：基于用户的滚动位置相对定位。




div {
  position: sticky;
  top: 0;
}

注意：定位的使用需要谨慎，因为它可能会影响页面的其他部分，尤其是在使用绝对定位时。

- 阅读更多 -

Vue3 关于scss预编译中:deep 其中的deep如何理解

System

2024-08-15

所有,css

在Vue 3中，当你想要在组件内部深度选择一个嵌套组件的CSS样式时，你可以使用:deep选择器。:deep选择器允许你穿透组件边界，选择并修改子组件的样式。

:deep选择器的使用方法如下：




/* 在父组件的style标签中 */
:deep(.child-component-selector) {
  /* 样式规则 */
}

这里.child-component-selector是子组件的一个选择器，:deep(.child-component-selector)选择器会选中子组件内所有匹配.child-component-selector的元素，并应用里面的样式规则。

举个例子，如果你有一个子组件<BaseButton>，并且想要在父组件中覆盖其样式：




<template>
  <BaseButton class="my-button" />
</template>
 
<style>
:deep(.base-button) {
  color: red;
}
</style>

在这个例子中，:deep(.base-button)选择器会选中<BaseButton>组件内所有.base-button的元素，并将文字颜色设置为红色。

请注意，:deep选择器在单文件组件（.vue文件）的<style>标签中使用，并且它只能用于单个组件的样式中，不能在全局样式文件中使用。

- 阅读更多 -

CSS入门基础（样式，css文件，精心整理

System

2024-08-15

所有,css

CSS是一种用于描述网页样式的语言，可以使网页的内容更加美观。以下是一些关于CSS的基本概念和使用方法：

内联样式：
内联样式是在HTML元素的style属性中直接写CSS代码。这种方法直接且简单，但是不利于后期的维护和修改。




<p style="color:blue;">这是一个蓝色的段落。</p>

内部样式表：
内部样式表是在HTML文档的<head>标签中使用<style>标签来写CSS代码。这种方法可以使样式和HTML分开，但是只对所在的HTML页面有效。




<head>
    <style>
        p { color: red; }
    </style>
</head>
<body>
    <p>这是一个红色的段落。</p>
</body>

外部样式表：
外部样式表是将CSS代码写在单独的.css文件中，然后在HTML文档的<head>标签中使用<link>标签来引用这个CSS文件。这种方法可以使样式和HTML分开，并且可以在多个HTML页面中共享，是最推荐的使用方式。




<!-- 在<head>中链接外部CSS文件 -->
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>




/* styles.css文件 */
p {
    color: green;
}

CSS选择器：
CSS选择器用于选择需要应用样式的HTML元素。常用的选择器有标签选择器、类选择器、ID选择器和属性选择器等。




/* 标签选择器 */
p {
    color: orange;
}
 
/* 类选择器，使用.开头 */
.center {
    text-align: center;
}
 
/* ID选择器，使用#开头 */
#title {
    font-size: 24px;
}
 
/* 属性选择器 */
input[type="text"] {
    background-color: yellow;
}

CSS的层叠性和优先级：
当多个选择器选中同一个元素，并且都指定了相同的属性时，CSS的层叠性会决定哪个选择器的样式会被应用。优先级高的选择器会覆盖优先级低的选择器。

优先级顺序：内联样式 > 内部样式表和外部样式表（就近原则）。ID选择器 > 类选择器 > 标签选择器。

CSS的盒模型：
CSS的盒模型包括内容区域（content）、填充区域（padding）、边框区域（border）、和外边距区域（margin）。




div {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

CSS的Flexbox布局：
Flexbox布局提供了一种更灵活的方式来布置容器内的项目，适用于移动端开发。




.container {
    display: flex; /* 使用Flex布局 */
    flex-direction: row; /* 设置主轴方向 */
}
 
.item {
    flex: 1; /* 使所有子项等分父容器 */
}

CSS的Grid布局：
Grid布局是一个基于网格的二维布局系统，非常适合创建复杂的布局。




.container {
    display: grid; /* 使

- 阅读更多 -

HTML_CSS学习：CSS的编写位置

System

2024-08-15

所有,css

CSS可以通过以下几种方式编写：

内联样式：直接在HTML元素的style属性中编写CSS代码。
内部样式表：在HTML文档的<head>部分，使用<style>标签包含CSS代码。
外部样式表：创建一个单独的CSS文件，并通过HTML的<link>标签引入。

示例代码：

内联样式：




<p style="color: red;">这是一个红色文本。</p>

内部样式表：




<head>
  <style>
    p { color: blue; }
  </style>
</head>
<body>
  <p>这是一个蓝色文本。</p>
</body>

外部样式表：




<!-- 在<head>部分引入外部CSS文件 -->
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

styles.css 文件内容：




p {
  color: green;
}

在实际开发中，为了维护方便和分离关注点，通常推荐使用外部样式表。

- 阅读更多 -

CSS淘宝轮播图

System

2024-08-15

所有,css

要实现一个类似淘宝的轮播图效果，你可以使用HTML、CSS和JavaScript。以下是一个简单的例子，使用了基本的CSS和JavaScript来创建一个轮播图。

HTML:




<div class="carousel">
  <div class="carousel-images">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <button class="carousel-button-left">←</button>
  <button class="carousel-button-right">→</button>
</div>

CSS:




.carousel {
  position: relative;
  width: 300px; /* 设置轮播图的宽度 */
  height: 200px; /* 设置轮播图的高度 */
  overflow: hidden;
}
 
.carousel-images {
  width: 300%; /* 图片容器宽度是轮播图宽度的3倍 */
  height: 200px;
  display: flex;
}
 
.carousel-images img {
  width: 100%;
  height: 100%;
  display: block;
  flex-shrink: 0;
}
 
.carousel-button-left, .carousel-button-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.3);
  color: white;
  cursor: pointer;
}
 
.carousel-button-left {
  left: 10px; /* 按钮距离左侧的距离 */
}
 
.carousel-button-right {
  right: 10px; /* 按钮距离右侧的距离 */
}

JavaScript:




document.addEventListener('DOMContentLoaded', function() {
  var currentIndex = 0;
  var images = document.querySelectorAll('.carousel-images img');
  var buttonLeft = document.querySelector('.carousel-button-left');
  var buttonRight = document.querySelector('.carousel-button-right');
 
  function showImage(index) {
    images.forEach(img => img.style.opacity = 0);
    images[index].style.opacity = 1;
  }
 
  buttonRight.addEventListener('click', function() {
    currentIndex = (currentIndex + 1) % images.length;
    showImage(currentIndex);
  });
 
  buttonLeft.addEventListener('click', function() {
    currentIndex = (currentIndex + images.length - 1) % images.length;
    showImage(currentIndex);
  });
 
  showImage(currentIndex); // 初始显示第一张图片
});

这个例子中的轮播图具有基本的左右切换功能。你可以根据需要添加自动播放、指示点等功能和样式。

- 阅读更多 -

CSS 选择器知识点总结

System

2024-08-15

所有,css

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提供的实用程序类来设置样式。

- 阅读更多 -