/* 基本样式 */
.container {
  width: 100%;
  margin: 0 auto;
}
 
/* 媒体查询：当屏幕宽度小于或等于768px时，应用以下样式 */
@media (max-width: 768px) {
  .container {
    width: 100%;
    margin: 0;
    padding: 10px;
  }
}
 
/* 媒体查询：当屏幕宽度在600px到768px之间时，应用以下样式 */
@media (min-width: 600px) and (max-width: 768px) {
  .container {
    width: 80%;
    margin: 0 auto;
  }
}
 
/* 媒体查询：当屏幕宽度在480px到599px之间时，应用以下样式 */
@media (min-width: 480px) and (max-width: 599px) {
  .container {
    width: 60%;
    margin: 0 auto;
  }
}
 
/* 媒体查询：当屏幕宽度小于480px时，应用以下样式 */
@media (max-width: 480px) {
  .container {
    width: 100%;
    margin: 0;
    padding: 5px;
  }
}

这个例子展示了如何使用CSS媒体查询来创建一个响应式的布局容器。.container类定义了一个容器的基本样式，并且通过媒体查询根据屏幕宽度调整容器的宽度和内边距。这样，无论屏幕尺寸如何变化，.container类总是适应并提供一个良好的视觉和交互体验。

要使滚动条变细且隐藏，鼠标移入时显示，可以使用CSS伪元素来自定义滚动条的样式。以下是一个实现该功能的CSS样例代码：

/* 容器 */
.scroll-container {
  width: 300px;
  height: 200px;
  overflow: auto;
}
 
/* 滚动条宽度 */
.scroll-container::-webkit-scrollbar {
  width: 5px; /* 对于水平滚动条 */
  height: 5px; /* 对于垂直滚动条 */
}
 
/* 滚动条轨道 */
.scroll-container::-webkit-scrollbar-track {
  background: transparent;
}
 
/* 滚动条滑块 */
.scroll-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2); /* 滚动条颜色 */
  border-radius: 10px; /* 滚动条圆角 */
}
 
/* 鼠标移入时显示滚动条 */
.scroll-container:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.4);
}
 
/* 鼠标移入时隐藏滚动条 */
.scroll-container:hover {
  scrollbar-color: transparent transparent;
}

HTML结构可以是这样：

<div class="scroll-container">
  这里是很长的内容...
</div>

这段代码适用于Webkit内核的浏览器（如Chrome、Safari）。对于其他浏览器，可能需要不同的CSS规则或polyfills。

在CSS中创建一个美观的导航栏和下拉列表可以通过多种方法实现。以下是一个简单的例子，展示了如何使用CSS来制作一个水平导航栏和一个下拉列表：

HTML:

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a>
      <ul>
        <li><a href="#">产品1</a></li>
        <li><a href="#">产品2</a></li>
        <li><a href="#">产品3</a></li>
      </ul>
    </li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</nav>

CSS:

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
 
nav ul li {
  float: left;
}
 
nav ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
nav ul li a:hover {
  background-color: #111;
}
 
nav ul li a:active {
  background-color: #4CAF50;
}
 
nav ul li ul {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
 
nav ul li:hover ul {
  display: block;
}

这个例子中，我们定义了一个水平导航栏，其中“产品”项下有一个下拉列表。鼠标悬停时显示下拉列表。CSS使用了float属性来创建水平菜单，使用了display: none;和:hover伪类来创建下拉效果。

在uniapp中获取安卓手机的安全区域信息，可以使用uni.getSystemInfo或者uni.getSystemInfoSync方法，然后从返回的结果中获取safeAreaInsets对象，该对象包含了left、right、top、bottom四个属性，分别代表了安全区域四个边缘的安全距离。

以下是获取安全区域信息并应用于样式的示例代码：

// 获取系统信息
const systemInfo = uni.getSystemInfoSync();
 
// 获取安全区域边距
const safeAreaInsets = systemInfo.safeAreaInsets || { top: 0, bottom: 0, left: 0, right: 0 };
 
// 应用到样式
const style = {
  paddingTop: safeAreaInsets.top + 'px',
  paddingBottom: safeAreaInsets.bottom + 'px',
  paddingLeft: safeAreaInsets.left + 'px',
  paddingRight: safeAreaInsets.right + 'px'
};
 
// 在页面上应用样式
// 例如，如果你使用的是Vue，可以直接绑定到元素的style属性
// <view :style="style"></view>

在页面中，你可以根据需要将style应用到需要防止内容被遮挡的元素上，确保内容显示在安全区域内，从而避免按钮或其他控件被软键盘遮挡。

简化的CSS图标代码示例：

/* 定义图标容器 */
.icon {
    display: inline-block;
    width: 1em; height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
}
 
/* 定义特定图标 */
.icon-home {
    background: url('path/to/home-icon.svg') center / contain no-repeat;
}
 
/* 定义特定图标 - 替代方案，如果SVG不可用 */
.icon-home-fallback {
    background: url('path/to/home-icon-fallback.png') center / contain no-repeat;
}
 
/* 使用 */
<span class="icon icon-home"></span>

这个示例展示了如何使用SVG图标，并在不支持SVG的浏览器中提供替代方案。通过CSS控制图标的显示和样式，我们可以简化HTML结构，并提升用户体验。

在CSS中使用变量可以帮助我们更好地管理样式并提高代码的可维护性。以下是如何在CSS中定义和使用变量的例子：

/* 定义CSS变量 */
:root {
  --main-bg-color: coral;
  --main-text-color: white;
}
 
/* 使用CSS变量 */
body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}
 
/* 通过JS修改CSS变量 */
document.addEventListener('DOMContentLoaded', function() {
  document.documentElement.style.setProperty('--main-bg-color', '#333');
  document.documentElement.style.setProperty('--main-text-color', '#fff');
});

在这个例子中，我们定义了两个变量--main-bg-color和--main-text-color，并在:root伪类中设置了它们的初始值。然后在body选择器中使用这些变量来设置背景颜色和文本颜色。最后，我们通过JavaScript的DOMContentLoaded事件监听函数在页面加载完成后修改这些变量的值。

在CSS中，实现文字居中可以通过设置text-align属性为center来水平居中，通过设置line-height属性等于容器高度来垂直居中单行文本。对于多行文本的垂直居中，可以使用display: flex和align-items以及justify-content属性。

以下是实现文字水平和垂直居中的不同方法：

水平居中

.center-text {
  text-align: center;
}

垂直居中（单行文本）

.center-text {
  height: 100px; /* 容器高度 */
  line-height: 100px; /* 设置为与容器高度相同 */
}

垂直居中（多行文本）

.center-text {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中，仅当需要水平居中时添加 */
}

在HTML中使用这些类：

<div class="center-text">这是水平垂直居中的文本</div>

对于多行文本，如果仅需要垂直居中，则不需要添加justify-content属性。

1. 水平居中 - 行内元素:

.center-inline {
  text-align: center;
}

2. 水平居中 - 块级元素:

.center-block {
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* or any other value */
}

3. 水平居中 - 绝对定位元素:

.center-absolute {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

4. 垂直居中 - 单行文本:

.center-vertical-text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px; /* or any other value */
}

5. 水平和垂直居中 - 使用flexbox:

.center-flexbox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px; /* or any other value */
  width: 100px; /* or any other value */
}

6. 水平和垂直居中 - 使用css grid:

.center-grid {
  display: grid;
  place-items: center;
  height: 100px; /* or any other value */
  width: 100px; /* or any other value */
}

这些方法涵盖了不同场景下的居中对齐，你可以根据实际需求选择合适的方法。

/* 定义一个类名为.my-custom-class的CSS样式 */
.my-custom-class {
  color: #333333; /* 文字颜色 */
  background-color: #dddddd; /* 背景颜色 */
  padding: 10px; /* 内边距 */
  margin: 15px; /* 外边距 */
  border: 1px solid #cccccc; /* 边框 */
  border-radius: 5px; /* 边框圆角 */
}
 
/* 应用该类到具有class="my-custom-class"的HTML元素上 */
<div class="my-custom-class">这是一个应用了自定义样式的div元素。</div>

这段代码定义了一个名为.my-custom-class的CSS类，并在一个div元素上应用了这个类。通过设置文字颜色、背景颜色、内边距、外边距和边框样式，为div元素提供了统一的视觉风格。这是CSS中类名的基本使用方法，对于学习者来说，这是一个很好的开始。

要实现当鼠标移动到图片上时显示遮罩层的效果，可以使用CSS的伪类:hover来控制遮罩层的显示。以下是一个简单的实现示例：

HTML:

<div class="image-container">
  <img src="image.jpg" alt="示例图片">
  <div class="overlay"></div>
</div>

CSS:

.image-container {
  position: relative;
  width: 300px; /* 设置图片容器的宽度 */
  height: 200px; /* 设置图片容器的高度 */
}
 
.image-container img {
  width: 100%;
  height: auto;
  display: block;
}
 
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* 遮罩层的颜色和透明度 */
  opacity: 0; /* 默认情况下遮罩层不可见 */
  transition: opacity 0.5s ease; /* 添加渐变效果 */
}
 
.image-container:hover .overlay {
  opacity: 1; /* 鼠标悬停时遮罩层可见 */
}

在这个示例中，.image-container 是包含图片和遮罩层的容器。.overlay 是遮罩层，默认情况下是不可见的（opacity: 0;）。当鼠标悬停在 .image-container 上时，.overlay 的 opacity 通过 transition 效果变为 1（完全可见）。