1. 首页
  2. 标签
  3. css
CSS中:root伪类的说明和使用
System
2024-08-21
所有,css

:root 伪类在CSS中表示文档的根元素。在HTML中，这通常是<html>元素，但在XML或其他XML类似语言中，这可能指的是文档的其他部分。:root伪类可以用来选择文档的根元素，并对其应用样式。

使用:root伪类，你可以在CSS中定义全局变量，这些变量可以在整个文档中使用。

例如，你可以在:root中定义全局字体大小和颜色，然后在其他选择器中使用这些变量：




:root {
  --global-font-size: 16px;
  --global-text-color: #333;
}
 
body {
  font-size: var(--global-font-size);
  color: var(--global-text-color);
}
 
h1 {
  font-size: calc(var(--global-font-size) * 1.5);
}

在这个例子中，我们定义了两个全局变量：--global-font-size和--global-text-color。然后在body和h1选择器中使用这些变量来设置字体大小和文本颜色。

记住，使用CSS变量（也称为CSS自定义属性）时，浏览器支持是必要的，但在现代浏览器中，:root伪类及其变量支持是广泛的。

- 阅读更多 -
uni-app 系统状态栏高度CSS变量--status-bar-height
System
2024-08-21
所有,css

在uni-app中，可以使用CSS变量--status-bar-height来设置系统状态栏的高度。这个变量是由uni-app框架提供，你可以在CSS中直接使用它来确保你的内容正确地与状态栏边界对齐。

以下是一个简单的例子，展示如何在uni-app的页面的CSS中使用这个变量：




/* 在页面的CSS中使用系统状态栏的高度 */
.page {
  padding-top: var(--status-bar-height);
  /* 这里可以添加其他样式，确保内容不会被状态栏遮挡 */
}

在上面的代码中，.page 类设置了顶部的padding-top为系统状态栏的高度。这样，你的页面内容就可以从状态栏下方开始布局，确保不会被状态栏遮挡。

请注意，这个变量只在uni-app框架支持的平台上有效，比如微信小程序、H5等。在不同的平台上，状态栏的高度可能会有所不同，如果需要适配不同设备，可能需要额外的处理。

- 阅读更多 -
一文讲透如何使用CSS美化HTML界面
System
2024-08-21
所有,css



/* 设置页面的背景颜色和字体样式 */
body {
    background-color: #f8f8f8;
    font-family: 'Open Sans', sans-serif;
}
 
/* 设置标题的样式 */
h1 {
    color: #333;
    text-align: center;
    padding: 20px;
}
 
/* 设置表格的样式 */
table {
    width: 100%;
    border-collapse: collapse;
}
 
/* 设置表头的样式 */
table th {
    background-color: #444;
    color: white;
    padding: 10px;
    border: 1px solid #ddd;
}
 
/* 设置表格单元格的样式 */
table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}
 
/* 设置奇数行和偶数行的背景色以便区分 */
table tr:nth-child(odd) {
    background-color: #f2f2f2;
}
 
table tr:nth-child(even) {
    background-color: #ffffff;
}
 
/* 设置链接的样式 */
a {
    color: #333;
    text-decoration: none;
}
 
/* 当鼠标悬停在链接上时改变颜色 */
a:hover {
    color: #007bff;
}

这段CSS代码为HTML页面中的元素提供了基本的视觉样式，包括设置背景颜色、字体、标题样式、表格样式、链接样式等。同时，它还演示了如何使用CSS选择器来为表格、链接以及奇偶行应用样式。这有助于开发者理解如何通过CSS来增强HTML页面的用户界面。

- 阅读更多 -
【css技巧】文本超出两行显示省略号
System
2024-08-21
所有,css

为了在CSS中实现文本超出两行显示省略号的效果，可以使用-webkit-line-clamp属性结合display: -webkit-box和-webkit-box-orient: vertical。以下是实现该效果的CSS代码示例：




.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

在HTML中使用该类：




<div class="ellipsis-multiline">
  这里是一段很长的文本，如果超出两行将会显示为省略号。这样可以保持布局的整洁，同时用户可以看到完整内容的一部分。
</div>

注意：-webkit-line-clamp属性是非标准属性，主要用于WebKit引擎的浏览器，如Chrome、Safari等。其他浏览器可能不支持此属性，因此请确保在使用时考虑兼容性。

- 阅读更多 -
CSS 画一条0.5px的线的方法（ 4种 ）
System
2024-08-21
所有,css

CSS 画一条0.5px的线可以使用多种方法，以下是4种不同的方法：

  1. 使用transform: scaleY(0.5)



.line-05 {
  height: 1px;
  background-color: black;
  transform: scaleY(0.5);
}
  1. 使用box-shadow



.line-05 {
  width: 100%;
  height: 1px;
  box-shadow: 0 0.5px 0 0 black;
}
  1. 使用border-image



.line-05 {
  width: 100%;
  height: 1px;
  border-top: 1px solid black;
  border-image: linear-gradient(to right, transparent, black) 1 round;
}
  1. 使用linear-gradient背景



.line-05 {
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, transparent, black, transparent);
  background-size: 100% 0.5px;
}

以上每种方法都可以实现0.5px的线，但是需要注意的是，这些方法在不同的浏览器中的兼容性可能会有所不同，因此在实际应用时可能需要进行一些兼容性处理。

- 阅读更多 -
css实现垂直上下布局的两种常用方法
System
2024-08-21
所有,css

CSS实现元素垂直上下布局的常用方法有以下两种：

  1. Flexbox布局：

    Flexbox是一种灵活的布局模型，可以简便地实现垂直上下布局。




.container {
  display: flex;
  flex-direction: column;
}

  1. Grid布局：

    Grid布局提供了更多的灵活性和功能，也可以用来实现垂直上下布局。




.container {
  display: grid;
  grid-template-rows: auto;
}

这两种方法都可以使容器内的子元素按照垂直方向排列。Flexbox更为简单，而Grid布局提供了更多的定位和大小控制选项。根据具体需求选择合适的布局方法。

- 阅读更多 -
盘点15个高颜值的Tailwind CSS 前端UI组件库
System
2024-08-21
所有,css
  1. 导航菜单 - Tailwind CSS



<nav class="flex items-center justify-between p-6">
  <a class="text-xl font-bold text-blue-500" href="#">Logo</a>
  <ul class="flex items-center">
    <li><a href="#" class="px-4 py-2 text-blue-500">首页</a></li>
    <li><a href="#" class="px-4 py-2 text-blue-500">关于我们</a></li>
    <li><a href="#" class="px-4 py-2 text-blue-500">产品</a></li>
    <li><a href="#" class="px-4 py-2 text-blue-500">联系我们</a></li>
  </ul>
</nav>
  1. 卡片 - Tailwind CSS



<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="https://tailwindcss.com/card-top.jpg" alt="Sunset in the mountains">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
    <p class="text-gray-700 text-base">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
    </p>
  </div>
  <div class="px-6 py-4">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#photography</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#travel</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#winter</span>
  </div>
</div>
  1. 模态框 - Tailwind CSS



<div class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
  <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-75"></div>
  <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
    <!-- Content -->
    <div class="modal-close cursor-pointer flex items-center justify-center absolute right-0 top-0 w-10 h-10 ml-4 mt-4">
      <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
        <path d="M14.53 4.536l-1.068 1.068-1.414-1.414L10.824 7.643 9.484 6.354l1.414-1.414L12 2.036 13.476 3.727 14.53 5.371 15.586 4.536 13.476 6.273l1.068-1.068L14.53 4.536z"></path>
      </svg>
    </div>
  </div>
</div>
  1. 进度条 - Tailwind CSS



<div class="w-full
- 阅读更多 -
4种CSS实现全屏背景图片铺满自适应的方式，最后一种尤其简单
System
2024-08-21
所有,css



/* 方法1: 使用CSS3的background-size属性 */
body {
  background: url('bg.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
 
/* 方法2: 使用背景图片作为body的背景图片，并设置大小 */
body {
  background: url('bg.jpg') no-repeat center center;
  background-size: 100% 100%;
}
 
/* 方法3: 使用伪元素来实现全屏背景图 */
body {
  position: relative;
}
body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('bg.jpg') no-repeat center center;
  background-size: cover;
  z-index: -1;
}
 
/* 方法4: 使用CSS3的@media查询来适配不同的屏幕尺寸 */
@media screen and (max-width: 1920px) {
  body {
    background: url('bg-large.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}
 
@media screen and (max-width: 1024px) {
  body {
    background: url('bg-medium.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}
 
@media screen and (max-width: 640px) {
  body {
    background: url('bg-small.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

这段代码提供了四种不同的方法来实现全屏背景图的自适应。第一种和第二种方法使用了background-size: cover;属性，这样背景图会自动缩放并居中，保持图片的比例不变。第三种方法使用了伪元素::after，这样可以在不影响其他内容的情况下给body添加背景。最后一种方法通过媒体查询适配不同的屏幕尺寸，加载不同分辨率的背景图片。

- 阅读更多 -
CSS 列表样式（ul）全面解析
System
2024-08-21
所有,css



/* 设置无序列表的默认样式 */
ul {
    list-style-type: disc; /* 实心圆形标记 */
    margin-left: 0; /* 左边距设置为0 */
    padding-left: 40px; /* 左侧填充设置为40px */
}
 
/* 设置有序列表的默认样式 */
ol {
    list-style-type: decimal; /* 数字标记 */
    margin-left: 0; /* 左边距设置为0 */
    padding-left: 40px; /* 左侧填充设置为40px */
}
 
/* 设置列表项的样式 */
li {
    line-height: 1.5; /* 行高设置为1.5倍字体大小 */
}
 
/* 设置列表项的伪类样式，用于 :before 或 :after 伪元素 */
li::before {
    content: "🔹"; /* 使用Unicode字符作为列表项前缀 */
    margin-right: 5px; /* 右边距设置为5px */
}
 
/* 设置自定义列表的样式 */
dl {
    margin-left: 0; /* 左边距设置为0 */
}
 
/* 设置自定义列表的标题样式 */
dt {
    font-weight: bold; /* 字体加粗 */
    margin-bottom: 5px; /* 下边距设置为5px */
}
 
/* 设置自定义列表的定义样式 */
dd {
    margin-left: 40px; /* 左边距设置为40px */
}

这段代码为无序列表(ul)、有序列表(ol)、自定义列表(dl)设置了默认样式，并且通过伪类(::before)添加了自定义的列表项前缀。这是一个简洁而有效的样式设置示例，适用于教育目的和实战应用。

- 阅读更多 -
解决安装postcss-px-to-viewport配置postcss.config.js时报错triggerUncaughtException(err, true /* fromPromise */
System
2024-08-21
所有,javascript

报错信息 "triggerUncaught" 通常表示在 JavaScript 代码执行过程中发生了一个未捕获的异常。在配置 postcss-px-to-viewport 插件的 postcss.config.js 文件时遇到了错误。

解决方法：

  1. 确认 postcss-px-to-viewport 插件是否已正确安装。
  2. 检查 postcss.config.js 文件中的配置是否符合插件要求的格式。
  3. 确保配置文件中的选项（如视口宽度、视口单位等）是正确设置的。
  4. 如果使用了其他的 PostCSS 插件，确保它们之间的版本兼容性。
  5. 查看具体的错误信息，通常在控制台输出的错误栈中会有更详细的信息指示错误的原因。
  6. 如果错误信息指向了某一行配置代码，检查那一行代码是否有语法错误或者不合规范的写法。

示例配置：




module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 要转换的单位
      viewportWidth: 375, // 设计稿宽度
      unitPrecision: 5, // 单位转换后保留的精度
      propList: ['*'], // 指定转换那些属性，* 表示全部
      viewportUnit: 'vw', // 希望使用的视口单位
      fontViewportUnit: 'vw', // 字体使用的视口单位
      selectorBlackList: [], // 指定不转换哪些选择器
      minPixelValue: 1, // 最小的转换数值
      mediaQuery: false, // 是否在媒体查询中也转换
      replace: true, // 是否直接更换属性值
      exclude: [], // 排除不处理的文件
      landscape: false // 是否处理横屏情况
    }
  }
};

确保配置文件的格式和属性名都是正确的，并且所有的值都是适当的。如果问题依然存在，可以尝试重启开发服务器或者清除 node\_modules 目录后重新安装依赖。

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