分类 css 下的文章

2024-08-08




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网</title>
    <style>
        /* 这里是内部样式表，可以写CSS规则 */
        body {
            font-family: Arial, sans-serif;
        }
        .header {
            background-color: #FF5E1F;
            color: white;
            text-align: center;
            padding: 10px;
        }
        /* 更多样式规则 */
    </style>
</head>
<body>
    <div class="header">
        <h1>小米官网</h1>
    </div>
    <!-- 页面的其余内容 -->
</body>
</html>

这个示例展示了如何在HTML文件的<head>部分使用<style>标签来包含CSS代码。这是内部样式表的一个简单用法，它将样式信息直接嵌入HTML文档中。在实际开发中，内部样式表适用于单个页面的样式定义。

- 阅读更多 -

CSS实现时间线、时间轴的布局样式实现效果

System

2024-08-08

所有,css




/* 时间轴容器样式 */
.timeline {
  list-style: none;
  padding: 20px 0 20px 0;
  position: relative;
}
 
/* 时间轴项目样式 */
.timeline-item {
  position: relative;
  margin-bottom: 20px;
}
 
/* 时间轴项目的标题样式 */
.timeline-item-title {
  margin-bottom: 10px;
  color: #333;
}
 
/* 时间轴项目的描述样式 */
.timeline-item-description {
  color: #666;
}
 
/* 时间轴项目的点样式 */
.timeline-item-dot {
  background-color: #f5f5f5;
  border: 2px solid #ddd;
  border-radius: 50%;
  display: inline-block;
  height: 16px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -8px; /* 计算点直径的一半 */
  width: 16px;
  z-index: 100;
}
 
/* 时间轴项目的内容样式 */
.timeline-item-content {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 20px;
  position: relative;
  z-index: 1;
}
 
/* 时间轴项目的内容在点右侧的样式 */
.timeline-item-content.right {
  margin-left: 80px; /* 点直径加边框宽度 */
}
 
/* 时间轴项目的内容在点左侧的样式 */
.timeline-item-content.left {
  margin-right: 80px; /* 点直径加边框宽度 */
}
 
/* 时间轴项目的内容标题下方的分隔线样式 */
.timeline-item-divider {
  border-top: 1px solid #eee;
  margin: 10px 0 0 0;
}

这段CSS样式定义了一个简单的时间轴布局，其中.timeline表示时间轴容器，.timeline-item表示每个时间点，.timeline-item-dot是时间点的小圆点，.timeline-item-content是时间点后的内容部分。通过.timeline-item-content.right和.timeline-item-content.left类，可以控制内容区块相对于点的位置。.timeline-item-divider是用于分隔时间轴项目的水平线。这个示例提供了一个基本的布局框架，可以根据具体需求进行样式调整和功能扩展。

- 阅读更多 -

scss使用for循环遍历，动态赋值类名并配置不同颜色

System

2024-08-08

所有,css




// 定义基本颜色
$base-colors: (
  'primary': #333,
  'secondary': #666,
  'tertiary': #999
);
 
// 使用for循环为每种颜色生成类名并设置背景色
@each $color-name, $color-value in $base-colors {
  .bg-#{$color-name} {
    background-color: $color-value;
  }
}

这段代码首先定义了一个$base-colors映射，包含了主要、次要和第三种基本颜色。然后使用@each指令遍历这个映射，为每个颜色名称生成一个类名，如.bg-primary、.bg-secondary和.bg-tertiary，并为这些类设置对应的背景颜色。这种方法可以极大地简化CSS的管理和维护工作。

2024-08-08

由于篇幅限制，我无法在这里提供完整的CSS笔记。但是，我可以提供一些关键点和常用CSS属性的简短描述。如果你需要更详细的信息，请告诉我，我会尽我所能提供。

选择器：
- 标签选择器（例如：p）
- 类选择器（例如：.classname）
- ID选择器（例如：#idname）
- 后代选择器（例如：div p）
- 子选择器（例如：div > p）
- 相邻兄弟选择器（例如：h1 + p）
- 通用兄弟选择器（例如：h1 ~ p）
- 属性选择器（例如：input[type="text"]）
- 伪类选择器（例如：:hover）
- 伪元素选择器（例如：::before）
常用CSS属性：
- 文字属性：font-family, font-size, color
- 背景属性：background, background-color, background-image
- 布局属性：display, position, top, right, bottom, left
- 盒模型属性：width, height, padding, margin, border
- 流属性：float, clear
- 定位属性：overflow, clip, z-index
- 显示属性：visibility, opacity
- 列表属性：list-style
- 表格属性：border-collapse, border-spacing
- 阴影和边框图案属性：box-shadow, border-radius
- 变换属性：transform
- 动画属性：@keyframes, animation
CSS框架和库：
- Bootstrap
- Foundation
- Tailwind CSS
CSS预处理器：
- Sass
- Less
CSS优化和性能：
- 使用CSS工具（例如PostCSS）
- 优化选择器性能
- 使用CSS Sprites
- 使用字体图标
- 减少HTTP请求
- 使用内容分发网络（CDN）
- 代码压缩
响应式设计：
- 媒体查询（@media）
- 弹性盒子布局（display: flex）
- 网格布局（display: grid）
- 流体宽度/高度
其他重要CSS特性：
- 浮动
- 分层（z-index）
- 透明度（opacity）
- 圆角（border-radius）
- 阴影和边框（box-shadow, border）
- 转换（transform）
- 动画（@keyframes, animation）
- 伪元素（::before, ::after）
- cursor属性

这些是CSS的核心概念和属性。记住，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中，可以使用多种方法来设计和布局表格。以下是一些常用的技巧和示例代码：

基础表格样式：




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

隐藏表格边框：




table, th, td {
  border: none;
}

设置表格单元格的背景色和文字颜色：




td {
  background-color: #f9f9f9;
  color: #333;
}

使用伪类:hover添加鼠标悬停效果：




table tr:hover {
  background-color: #f5f5f5;
}

设置表格的宽度和高度：




table {
  width: 500px; /* 设置表格宽度 */
}
 
th, td {
  height: 50px; /* 设置单元格高度 */
}

隐藏某些单元格：




td.hidden {
  display: none;
}

设置表格的文字大小：




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%。如果你发现使用这两个值时出现滚动条，可能是因为你的内容超出了容器的大小。

解决方法：

检查内容：确保你的内容没有超过100vw或100vh的尺寸。
设置overflow：可以通过设置overflow: hidden;来隐藏滚动条，如果你不希望内容被隐藏。
使用calc()：如果你需要内边距或边框，并且希望内容不超出视口，可以使用calc()函数来计算正确的宽度和高度。例如，width: calc(100vw - padding - border);。
使用box-sizing：确保使用box-sizing: border-box;，这样内边距和边框不会导致元素超出设置的宽度和高度。
使用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的标准文档流是指浏览器在没有定位的情况下如何布局元素。它遵循一些基本规则：

块级元素会在页面上自上而下排列。
块级元素会自动填充其父元素的宽度。
行内元素会在页面上自左而右排列。
行内元素的宽度由内容决定。
块级元素和行内元素都会被其他元素的边距（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;
}

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

- 阅读更多 -