1. 首页
  2. 分类
  3. css
HTML--CSS--边框、列表、表格样式
System
2024-08-08
所有,css



<!DOCTYPE html>
<html>
<head>
  <style>
    /* 设置边框样式 */
    .border-style {
      border: 2px solid #000000; /* 2px宽的实线黑色边框 */
      padding: 10px; /* 内边距 */
      margin: 20px; /* 外边距 */
    }
 
    /* 设置列表样式 */
    .list-style {
      list-style-type: square; /* 列表项前的标记为方块 */
      padding-left: 20px; /* 左内边距 */
    }
 
    /* 设置表格样式 */
    .table-style {
      width: 100%; /* 表格宽度 */
      border-collapse: collapse; /* 边框合并 */
      text-align: left; /* 文本对齐方式 */
    }
    .table-style th, .table-style td {
      border: 1px solid #dddddd; /* 单元格边框 */
      padding: 8px; /* 单元格内边距 */
    }
    .table-style tr:nth-child(even) {
      background-color: #f2f2f2; /* 偶数行背景色 */
    }
  </style>
</head>
<body>
 
<div class="border-style">
  这是带有边框的div元素。
</div>
 
<ul class="list-style">
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>
 
<table class="table-style">
  <tr>
    <th>表头 1</th>
    <th>表头 2</th>
  </tr>
  <tr>
    <td>单元格 1</td>
    <td>单元格 2</td>
  </tr>
  <tr>
    <td>单元格 3</td>
    <td>单元格 4</td>
  </tr>
</table>
 
</body>
</html>

这段代码展示了如何使用CSS为HTML元素添加边框、列表和表格样式。.border-style类用于设置一个带有边框的div元素，.list-style类用于设置列表项前的标记以及左侧内边距，而.table-style和相关子选择器则用于创建一个具有合并边框和偶数行背景色的表格。

- 阅读更多 -
CSS 之 table 表格布局
System
2024-08-08
所有,css

在CSS中，可以使用多种方法来设计和布局表格。以下是一些常用的技巧和示例代码：

  1. 基础表格样式：



table {
  width: 100%;
  border-collapse: collapse; /* 去掉单元格之间的距离 */
}
 
th, td {
  border: 1px solid #ddd; /* 设置单元格边框 */
  padding: 8px; /* 设置单元格内边距 */
  text-align: left; /* 设置文本对齐方式 */
}
 
th {
  background-color: #f2f2f2; /* 设置表头背景色 */
}
  1. 隐藏表格边框：



table, th, td {
  border: none;
}
  1. 设置表格单元格的背景色和文字颜色：



td {
  background-color: #f9f9f9;
  color: #333;
}
  1. 使用伪类:hover添加鼠标悬停效果：



table tr:hover {
  background-color: #f5f5f5;
}
  1. 设置表格的宽度和高度：



table {
  width: 500px; /* 设置表格宽度 */
}
 
th, td {
  height: 50px; /* 设置单元格高度 */
}
  1. 隐藏某些单元格：



td.hidden {
  display: none;
}
  1. 设置表格的文字大小：



table {
  font-size: 14px; /* 设置表格文字大小 */
}

这些是表格布局的基础技巧，可以根据具体需求进行扩展和调整。

- 阅读更多 -
CSS的多媒体嵌入
System
2024-08-08
所有,css

CSS多媒体嵌入是一种将CSS样式应用于HTML文档中的多媒体内容（如视频和音频）的方法。这可以通过使用HTML的<style>标签或外部CSS文件来实现。

以下是一个简单的示例，展示了如何在HTML文档中嵌入CSS来控制视频的样式：




<!DOCTYPE html>
<html>
<head>
<style>
  /* 针对所有视频元素 */
  video {
    width: 100%;
    height: auto;
  }
 
  /* 针对特定类名的视频元素 */
  .responsive-video {
    width: 100%;
    height: auto;
    display: block;
  }
</style>
</head>
<body>
 
<!-- 应用全局样式 -->
<video controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
 
<!-- 应用特定类名的样式 -->
<video class="responsive-video" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
 
</body>
</html>

在这个例子中，我们定义了两种类型的视频样式：一种是全局的（不带类名），适用于所有视频元素；另一种是针对具有特定类名的视频（.responsive-video），并设置了其为响应式（宽度为100%，高度自动）。这样，你就可以根据需要为多媒体内容添加样式。

- 阅读更多 -
css 100vw、100vh出现滚动条怎么解决
System
2024-08-08
所有,css

CSS中的100vw和100vh分别代表了视口的宽度和高度，单位是视口宽度和高度的100%。如果你发现使用这两个值时出现滚动条，可能是因为你的内容超出了容器的大小。

解决方法：

  1. 检查内容：确保你的内容没有超过100vw或100vh的尺寸。
  2. 设置overflow：可以通过设置overflow: hidden;来隐藏滚动条，如果你不希望内容被隐藏。
  3. 使用calc()：如果你需要内边距或边框，并且希望内容不超出视口，可以使用calc()函数来计算正确的宽度和高度。例如，width: calc(100vw - padding - border);。
  4. 使用box-sizing：确保使用box-sizing: border-box;，这样内边距和边框不会导致元素超出设置的宽度和高度。
  5. 使用min-width/min-height：如果你希望内容至少有一定的大小，即使在小屏幕上也不会太小，可以设置min-width: 100vw和min-height: 100vh。

示例代码：




.element {
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* 如果不希望出现滚动条 */
  box-sizing: border-box; /* 防止padding和border导致超出 */
  min-width: 100vw; /* 确保至少有一定大小 */
  min-height: 100vh; /* 确保至少有一定大小 */
}

确保在实际应用中根据你的布局和设计选择合适的方法。

- 阅读更多 -
CSS设置超出范围滚动条和滚动条样式
System
2024-08-08
所有,css

在CSS中，可以使用overflow属性来控制内容超出容器范围时的滚动条行为，使用scrollbar-color属性（仅在WebKit/Blink引擎中有效）来控制滚动条的样式。

以下是一个示例，展示如何设置元素的滚动条：




/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 12px; /* 设置滚动条的宽度 */
}
 
/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 设置轨道的背景颜色 */
}
 
/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background: #888; /* 设置滑块的背景颜色 */
}
 
/* 滚动条的滑块：当鼠标悬停时 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 设置悬停时滑块的背景颜色 */
}
 
/* 设置元素的滚动条行为 */
.scrollable-content {
  overflow-y: scroll; /* 垂直滚动条 */
  scrollbar-color: #888 #f1f1f1; /* 滚动条的颜色，先是滑块颜色，然后是轨道颜色 */
}

在HTML中，你可以这样使用这个类：




<div class="scrollable-content">
  <!-- 这里是可以滚动的内容 -->
</div>

请注意，::-webkit-scrollbar等伪元素仅在使用WebKit/Blink引擎的浏览器中有效，例如Chrome、Edge等。Firefox和其他浏览器可能需要不同的方法来自定义滚动条样式。

- 阅读更多 -
CSS的标准文档流
System
2024-08-08
所有,css

CSS的标准文档流是指浏览器在没有定位的情况下如何布局元素。它遵循一些基本规则：

  1. 块级元素会在页面上自上而下排列。
  2. 块级元素会自动填充其父元素的宽度。
  3. 行内元素会在页面上自左而右排列。
  4. 行内元素的宽度由内容决定。
  5. 块级元素和行内元素都会被其他元素的边距（margin）影响，但不会与其他元素的内边距（padding）或边框（border）重叠。

CSS中的定位机制允许改变这种标准文档流的行为，主要有三种方式：浮动（float）、绝对定位（position: absolute）和相对定位（position: relative）。

例子：




/* 标准文档流中的块级元素 */
.block-element {
  width: 100%; /* 默认情况下，块级元素会占满父元素的宽度 */
}
 
/* 使用浮动改变文档流 */
.floated-element {
  float: left; /* 元素会浮动到其父元素的左侧，其他元素会围绕它排列 */
}
 
/* 使用绝对定位脱离文档流 */
.absolute-element {
  position: absolute; /* 元素将相对于最近的已定位的祖先元素定位，脱离标准文档流 */
  top: 10px;
  left: 10px;
}
 
/* 使用相对定位影响文档流，但不脱离文档流 */
.relative-element {
  position: relative; /* 元素将相对于其正常位置定位，但不会影响其他元素的布局 */
  top: 10px;
  left: 10px;
}

在实际应用中，定位机制允许创建复杂的布局，但需要注意的是，脱离标准文档流的元素会影响周围元素的布局，因此需要额外的布局调整来确保整体页面的稳定性。

- 阅读更多 -
【CSS】【z-index】如何实现两个子组件在对方父组件之上
System
2024-08-08
所有,css

在CSS中，z-index属性主要用于控制重叠元素的堆叠顺序。z-index值大的元素将位于值小的元素之上。但是要注意，z-index只能在定位元素上生效，也就是说，元素必须是relative、absolute、fixed或sticky定位。

如果你想要实现两个子元素在它们各自父元素的上方，你可以设置每个子元素的z-index值大于它们对应父元素的z-index值。

假设父元素的z-index是0，子元素1和子元素2的z-index分别设置为1和2，则子元素2将覆盖子元素1。

示例代码：




<div class="parent1">
  <div class="child1">子元素1</div>
</div>
<div class="parent2">
  <div class="child2">子元素2</div>
</div>



.parent1, .parent2 {
  position: relative; /* 定位属性 */
  z-index: 0; /* 父元素的z-index */
}
 
.child1, .child2 {
  position: absolute; /* 定位属性 */
}
 
.child1 {
  z-index: 1; /* 子元素1的z-index */
}
 
.child2 {
  z-index: 2; /* 子元素2的z-index */
}

在这个例子中，.child2将覆盖.child1，因为.child2的z-index值更大。

- 阅读更多 -
CSS学习笔记（flex 伸缩布局 ），从零开始学数据结构和算法
System
2024-08-08
所有,css



/* 设置一个容器使用伸缩布局 */
.container {
  display: flex; /* 设置为伸缩容器 */
  flex-direction: row; /* 默认值，子元素在主轴（水平）排列 */
  justify-content: flex-start; /* 子元素向主轴起始方向对齐 */
  align-items: center; /* 子元素在交叉轴上居中对齐 */
  height: 100px; /* 容器高度 */
  background-color: lightblue; /* 容器背景色 */
}
 
/* 设置子元素 */
.item {
  margin: 10px; /* 子元素间隔 */
  padding: 10px; /* 子元素内填充 */
  background-color: salmon; /* 子元素背景色 */
}
 
/* 设置特定子元素的样式 */
.item:nth-child(2) {
  flex-grow: 1; /* 第二个子元素会占据容器中的可用空间 */
  background-color: lightgreen; /* 子元素背景色 */
}
 
/* 设置第三个子元素的样式 */
.item:nth-child(3) {
  flex-shrink: 2; /* 第三个子元素在空间不足时会缩小 */
  background-color: lightcoral; /* 子元素背景色 */
}

这段代码展示了如何使用CSS的伸缩布局（flexbox）来创建一个简单的布局。它设置了一个容器和几个子元素，并使用了伸缩布局的一些关键属性，如flex-grow和flex-shrink。这有助于理解伸缩布局的基本概念，并能为初学者提供一个实践的例子。

- 阅读更多 -
vue3项目中使用css自定义高亮API实现Ag-grid搜索内容高亮
System
2024-08-08
所有,css



<template>
  <ag-grid-vue
    style="width: 500px; height: 500px;"
    class="ag-theme-alpine"
    :columnDefs="columnDefs"
    :rowData="rowData"
    @grid-ready="onGridReady"
  ></ag-grid-vue>
</template>
 
<script>
import { AgGridVue } from 'ag-grid-vue';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
 
export default {
  components: {
    AgGridVue
  },
  data() {
    return {
      columnDefs: [
        { headerName: 'Make', field: 'make' },
        { headerName: 'Model', field: 'model' },
        { headerName: 'Price', field: 'price' }
      ],
      rowData: [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxter', price: 72000 }
      ],
      gridApi: null,
      gridColumnApi: null
    };
  },
  methods: {
    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;
 
      const createHighlightedHeader = (params) => {
        const renderer = params.renderer;
        const eCell = document.createElement('div');
        eCell.innerHTML = params.value;
 
        const highlightAll = (nodeList, cssClass) => {
          nodeList.forEach(node => {
            node.classList.add(cssClass);
          });
        };
 
        const searchTerm = 'porsche'; // 搜索词，可以从外部输入
        const searchWords = searchTerm.toLowerCase().split(' ');
        const textNodes = eCell.querySelectorAll('[class^="ag-header-cell-text"]');
 
        const highlightText = (textNode, searchWords) => {
          const nodeText = textNode.textContent.toLowerCase();
          let newNodeText = nodeText;
          let offsetAdjustment = 0;
          searchWords.forEach(word => {
            const wordOffset = nodeText.indexOf(word);
            if (wordOffset > -1) {
              const startNode = textNode.splitText(wordOffset);
              const endNode = startNode.splitText(word.length);
              const highlightNode = document.createElement('span');
              highlightNode.classList.add('highlighted-text');
              highlightNode.textContent = startNode.textContent;
              newNodeText = newNodeText.replace(word, '');
              startNode.parentNode.insertBefore(highlightNode, startNode);
              star
- 阅读更多 -
CSS学习归纳6
System
2024-08-08
所有,css

在CSS中，可以使用伪类:nth-child()来选择特定的元素。这个伪类可以接受一个参数，用来指定选择哪个子元素。参数可以是数字、关键词或公式。

例如，如果你想选择一个父元素下的第三个子元素，你可以这样写：




.parent :nth-child(3) {
  /* 样式规则 */
}

如果你想选择所有奇数位置的子元素，你可以使用n和2n公式：




.parent :nth-child(2n) {
  /* 样式规则，适用于偶数位置的子元素 */
}
 
.parent :nth-child(2n+1) {
  /* 样式规则，适用于奇数位置的子元素 */
}

如果你想选择第一个子元素和第三个子元素，你可以使用逗号分隔多个选择器：




.parent :nth-child(1),
.parent :nth-child(3) {
  /* 样式规则，适用于第一个和第三个子元素 */
}

如果你想选择所有子元素，但是排除第一个和最后一个，你可以使用not()伪类：




.parent :not(:first-child):not(:last-child) {
  /* 样式规则，排除第一个和最后一个子元素 */
}

以上是:nth-child选择器的一些基本用法。

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