css中常用的代码

149 阅读2分钟

1.去除a标签下划线

可以使用CSS的text-decoration属性来去除a标签下划线,将其设置为none即可。

例如:

a { text-decoration: none; }

2.图片对齐

2.1 使用vertical-align属性

可以使用vertical-align属性来控制图片和文字的垂直对齐方式。将vertical-align属性应用于图片和文字的父元素上,可以使它们在同一行内垂直对齐。

例如,将图片和文字包含在一个div元素中,然后将vertical-align属性设置为middle:

<div>
  <img src="image.jpg" alt="image" style="vertical-align: middle;">
  <span style="vertical-align: middle;">Text</span>
</div>

2.2 使用line-height属性

另一种方法是使用line-height属性来控制行高,使其与图片的高度相等。这样可以使文字在行中垂直居中,与图片对齐。

例如,将图片和文字包含在一个div元素中,然后将line-height属性设置为图片的高度:

<div style="line-height: 50px;">
  <img src="image.jpg" alt="image" style="height: 50px;">
  <span>Text</span>
</div>

注意,这种方法只适用于单行文本。如果有多行文本,需要使用其他方法来实现垂直对齐。

3.css如何做出三角形

可以使用 CSS 的 border 属性来实现三角形,具体方法如下:

3.1 选择一个元素,并设置其宽度和高度为 0。

3.2 设置该元素的 border 属性,其中两个边框的颜色需要设置为透明。

3.3 设置另外两个边框的宽度和颜色,使其形成一个三角形。

例如,要创建一个向下的三角形,可以使用以下 CSS 代码:

.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid #f00;
}

这将创建一个宽度为 0、高度为 0 的元素,并使用红色的实线边框来形成一个向下的三角形。可以根据需要调整边框的宽度、颜色和方向来创建不同形状的三角形。

4.去掉li的小圆点

可以使用CSS的list-style属性来去掉li的小圆点,将其设置为none即可。

例如:

ul {
  list-style: none;
}

这样就可以将ul下的所有li的小圆点去掉。如果只想去掉某个ul下的li的小圆点,可以给该ul设置一个类名或ID,然后使用类选择器或ID选择器来设置list-style属性。