1. 首页
  2. 分类
  3. 所有
前端基础之CSS扫盲
System
2024-08-15
所有,css

扫盲，通常指的是屏幕阅读器，这是一种用于残障残疾人的辅助技术，帮助他们更好地理解网页内容。

在CSS中，为了提高扫盲用户的访问体验，我们可以使用一些特定的属性和技巧。以下是一些基本的CSS扫盲友好的实践：

  1. 使用color和background-color对比度：确保文本与背景颜色之间的对比度至少达到WCAG 2.0的AA标准。



body {
  color: black;
  background-color: white;
}
  1. 使用alt属性为图片提供文本描述：



<img src="image.jpg" alt="描述性文本">
  1. 使用aria-label和aria-labelledby为无障碍性元素提供标签：



<button aria-label="按钮描述">点击我</button>
  1. 使用outline: none避免在焦点时改变元素的视觉样式，因为它可能会干扰使用键盘导航的用户。



button:focus {
  outline: none;
}
  1. 使用tabindex确保所有交互元素都可以通过Tab键访问。



<div tabindex="0">点击我，我可以获得焦点</div>
  1. 使用CSS打印样式优化打印文档。



@media print {
  body {
    font-size: 14px;
  }
}

在编写CSS时，不仅要关注视觉表现，还要考虑无障碍性访问，以便更多的用户可以享受到网页的乐趣。

- 阅读更多 -
CSS--解决图片变形的方法
System
2024-08-15
所有,css

为了解决图片变形的问题，可以使用CSS的object-fit属性。这个属性可以指定容器内图片的填充方式。

object-fit属性可以设置的值有：

  • fill：默认值，拉伸图片以填充容器。
  • contain：保持图片的宽高比，缩放图片以完全装进容器内。
  • cover：保持图片的宽高比，缩放图片以完全覆盖容器。
  • none：不改变图片大小，图片可能会溢出容器。
  • scale-down：效果跟none或contain中较小的那个相同。

例如，如果你希望图片完全覆盖容器，并且不管图片原始的宽高比，可以这样设置CSS：




.img-container {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

HTML代码如下：




<div class="img-container">
  <img src="path/to/your/image.jpg" alt="Descriptive text">
</div>

这样设置后，.img-container内的图片将完全覆盖容器，不管图片原始的比例，且不会变形。

- 阅读更多 -
纯CSS实现一个动态渐变边框
System
2024-08-15
所有,css

要使用纯CSS实现一个动态渐变边框，可以使用linear-gradient来创建渐变效果，并利用CSS的@keyframes动画来实现动态效果。以下是一个简单的示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Gradient Border</title>
<style>
  .gradient-border {
    width: 200px;
    height: 200px;
    border: 4px solid transparent;
    background-image: linear-gradient(to right, red, yellow);
    border-radius: 10px;
    animation: animateGradient 5s linear infinite;
  }
 
  @keyframes animateGradient {
    0% {
      border-image: linear-gradient(to right, red, yellow) 30;
    }
    100% {
      border-image: linear-gradient(to right, yellow, red) 30;
    }
  }
</style>
</head>
<body>
<div class="gradient-border"></div>
</body>
</html>

这段代码会创建一个具有动态渐变边框的容器，渐变色从红色过渡到黄色，然后又回到红色，周而复始，动画持续时间为5秒。这里使用border-image属性来设置边框的图片，通过改变@keyframes动画中的border-image值，实现边框颜色的动态变化。

- 阅读更多 -
前端学习：css并集选择器，交集选择器和后代选择器
System
2024-08-15
所有,css

并集选择器（CSS选择器列表）是用逗号分隔的多个选择器，任何用逗号分隔的选择器都会被应用相同的样式。例如：




.selector1, .selector2, .selector3 {
  color: red;
}

这将把红色文本应用于类名为selector1、selector2和selector3的元素。

交集选择器（并集选择器）是由两个选择器直接相连而不用逗号分隔的。例如：




.selector1.selector2 {
  color: blue;
}

这将把蓝色文本应用于同时具有selector1和selector2类的元素。

后代选择器是用空格分隔的两个选择器，用于选择父元素内的子元素。例如：




.parent .child {
  font-style: italic;
}

这将把斜体应用于在拥有parent类的元素内的拥有child类的元素。

- 阅读更多 -
css grid网格布局（栅格布局）图解+代码详细讲解【收藏】
System
2024-08-15
所有,css

CSS Grid 网格布局是一种强大的布局系统，可以创建各种复杂的布局结构。以下是一个简单的 CSS Grid 布局示例：

HTML:




<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

CSS:




.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列，每列占用1/3空间 */
  grid-gap: 10px; /* 网格间隙 */
  grid-auto-rows: minmax(100px, auto); /* 行高最小100px，自动增长 */
}
 
.item1 {
  grid-column: 1 / 3; /* 占据第1列至第2列的位置 */
  grid-row: 1; /* 占据第1行的位置 */
}
 
.item2 {
  grid-column: 3; /* 占据第3列的位置 */
  grid-row: 1 / 3; /* 占据第1行至第2行的位置 */
}
 
.item3 {
  grid-column: 1; /* 占据第1列的位置 */
  grid-row: 2; /* 占据第2行的位置 */
}
 
.item4 {
  grid-column: 2; /* 占据第2列的位置 */
  grid-row: 2; /* 占据第2行的位置 */
}
 
.item5 {
  grid-column: 3; /* 占据第3列的位置 */
  grid-row: 3; /* 占据第3行的位置 */
}

这个示例创建了一个具有3列和3行的网格布局，.item1占据第一行的前两列，.item2跨越第一列和中间行的前两个格子，.item3和.item4各占据其它位置。.item5则占据最后一行的第三列。通过grid-template-columns和grid-template-rows属性定义了网格的结构，通过grid-column和grid-row属性定义了各个项目在网格中的位置。

- 阅读更多 -
CSS中使用position: fixed固定定位时遮挡下方内容
System
2024-08-15
所有,css

当你使用CSS的position: fixed属性进行定位时，元素会脱离正常的文档流，并且相对于浏览器窗口进行定位。这意味着，当你使用fixed定位时，元素会出现在页面的一个固定位置，比如导航栏、侧边栏或者页脚等，通常会遮挡下方的内容。

为了解决这个问题，你可以通过设置margin-top或者padding-top属性给定位元素的下方内容，使得内容不会被遮挡。具体的方法取决于你要定位的元素的高度以及下方内容的结构。

例如，如果你有一个固定高度的导航栏，你可以在导航栏下方的内容元素上添加相应的上边距：




/* 固定定位的元素 */
.fixed-element {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px; /* 假设导航栏高度为50px */
}
 
/* 下方内容元素 */
.content {
  margin-top: 50px; /* 与固定定位元素的高度相同 */
}



<!-- 固定定位的元素 -->
<div class="fixed-element">Fixed Navigation Bar</div>
 
<!-- 下方内容 -->
<div class="content">
  Your content goes here...
</div>

这样，.content元素就会因为margin-top而向下移动，避免被.fixed-element遮挡。如果你的固定定位元素有背景色或者边框，你可能还需要调整背景色或边框的样式，确保它们不会在下方内容下面产生视觉上的分割感。

- 阅读更多 -
uni静态资源引入及css图片图标引用规范
System
2024-08-15
所有,css



/* 引入uni-app内置的图标库 */
@import "uni.css";
 
/* 引入第三方图标库，例如Font Awesome */
@import "~@fortawesome/fontawesome-svg/styles.css";
 
/* 设置全局样式 */
body {
    font-family: 'Open Sans', sans-serif;
}
 
/* 使用图标库中的图标类 */
.icon-example:before {
    font-family: 'Font Awesome';
    content: '\f007'; /* 这里的Unicode码应根据实际图标而定 */
}
 
/* 引用静态资源图片 */
.logo-image {
    background-image: url('~@/static/logo.png'); /* 使用webpack的alias引用静态资源 */
    background-size: cover;
    width: 100px;
    height: 100px;
}

这个例子展示了如何在uni-app项目中引入静态资源和第三方图标库，并且如何在CSS中正确地引用这些资源。注意，使用~符号是为了引用@项目根目录的别名，这是webpack配置中的一个常见设置。

- 阅读更多 -
css添加背景图片渐变透明
System
2024-08-15
所有,css

要在CSS中添加背景图片并应用渐变透明效果，可以使用以下CSS属性：

  1. background-image: 设置元素的背景图片。
  2. background-repeat: 设置背景图片是否和如何重复。
  3. background-size: 设定背景图片的大小。
  4. background-position: 设置背景图片的起始位置。
  5. background-clip: 设置背景的绘制区域。
  6. linear-gradient: 创建一个线性渐变。

下面是一个实例代码，展示如何实现背景图片渐变透明效果：




.element {
  width: 300px;
  height: 200px;
  background-image: url('background.jpg'); /* 设置背景图片 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  background-size: cover; /* 背景图片覆盖整个元素 */
  background-position: center; /* 背景图片居中 */
  background-clip: text; /* 背景图片的绘制区域为文字 */
  -webkit-background-clip: text; /* 对于一些浏览器的兼容性 */
  color: transparent; /* 文字颜色透明 */
  font-size: 50px; /* 设置一个大字体大小以供渐变遮罩 */
  background: -webkit-linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* 创建一个从上到下的渐变 */
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* 兼容其他浏览器 */
}

在这个例子中，.element 类的背景图片将应用一个从完全透明到完全不透明的线性渐变，从而实现渐变透明的效果。这里使用了 background-clip: text 属性，它可以让背景图片仅在文字区域内绘制，达到类似“字体纹理”的效果。请注意，background-clip: text 属性可能不是所有浏览器都支持，特别是一些旧版本的浏览器，因此你可能需要添加浏览器特定的前缀或者使用兼容的解决方案。

- 阅读更多 -
css 固定按钮到页面顶部或者底部的实现方式
System
2024-08-15
所有,css

要实现按钮固定在页面顶部或底部，可以使用CSS的固定定位position: fixed属性。以下是实现这一功能的示例代码：

固定在页面顶部的按钮：




.button-top {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}



<button class="button-top">固定在顶部</button>

固定在页面底部的按钮：




.button-bottom {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}



<button class="button-bottom">固定在底部</button>

在这两个例子中，按钮被设置为固定位置，并通过left: 50%和transform: translateX(-50%)实现水平居中。top属性保证按钮固定在顶部，bottom属性保证按钮固定在底部。

- 阅读更多 -
30个HTML+CSS前端开发案例（完结篇）
System
2024-08-15
所有,css

由于篇幅限制，这里我们只展示其中的一些案例。

案例1：创建一个简单的导航栏




<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
 
li {
  float: left;
}
 
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* Change the color of links on hover */
li a:hover {
  background-color: #111;
}
</style>
</head>
<body>
 
<ul>
  <li><a class="active" href="#home">首页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>
 
</body>
</html>

案例2：创建一个带有响应式图片和文字的响应式网页




<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
 
.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0px;
}
 
/* Create two equal columns that sits next to each other */
.column {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
  padding: 5px;
}
 
.column img {
  margin-top: 5px;
  vertical-align: middle;
  width: 100%;
}
</style>
</head>
<body>
 
<div class="row">
  <div class="column">
    <img src="/w3images/team1.jpg" style="width:100%" alt="Team 1">
    <h2>John Doe</h2>
    <p>Architect</p>
  </div>
  <div class="column">
    <img src="/w3images/team2.jpg" style="width:100%" alt="Team 2">
    <h2>Jane Doe</h2>
    <p>Designer</p>
  </div>
   <!-- Add more columns if you need -->
</div>
 
</body>
</html>

这些案例展示了如何使用HTML和CSS创建基本的网页元素，如导航栏、图片展示、响应式布局等。通过这些案例，开发者可以学习到如何使用HTML和CSS构建Web页面的基本技能。

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