分类 css 下的文章

java+ selenium自动化测试-元素定位大法之By css下卷（详细教程）

2024-08-16

在Selenium中，我们可以使用CSS选择器来定位WebElement。这种方式可以更加精确地定位到我们需要操作的元素，尤其是在处理复杂的页面布局时。

以下是使用CSS选择器定位元素的方法：

使用findElement方法定位单个元素：




WebElement element = driver.findElement(By.cssSelector("selector"));

使用findElements方法定位一组元素：




List<WebElement> elements = driver.findElements(By.cssSelector("selector"));

以下是一些常用的CSS选择器示例：

通过id定位元素：




WebElement element = driver.findElement(By.cssSelector("#elementId"));

通过class定位元素：




WebElement element = driver.findElement(By.cssSelector(".elementClass"));

通过元素名定位元素：




WebElement element = driver.findElement(By.cssSelector("elementName"));

通过属性定位元素：




WebElement element = driver.findElement(By.cssSelector("element[attribute='value']"));

通过子元素定位元素：




WebElement element = driver.findElement(By.cssSelector("parent > child"));

通过兄弟元素定位元素：




WebElement element = driver.findElement(By.cssSelector("element1 + element2"));

通过子元素定位元素：




WebElement element = driver.findElement(By.cssSelector("parent element"));

通过:nth-child选择器定位元素：




WebElement element = driver.findElement(By.cssSelector("parent:nth-child(n)"));

通过:not选择器排除特定元素：




WebElement element = driver.findElement(By.cssSelector("element:not(selector)"));

注意：在使用CSS选择器时，需要确保选择器语法正确，否则会引发NoSuchElementException。此外，在使用CSS选择器时，需要确保浏览器支持CSS选择器，并且WebDriver实现了相应的CSS选择器解析。

2024-08-16

在CSS中，可以使用object-fit属性来控制图片的缩放、拉伸和变形行为。object-fit属性可以设置为以下几个值：

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

示例代码：




/* 使图片完全填充容器，可能导致变形 */
img.fill {
  object-fit: fill;
}
 
/* 保持图片的宽高比，缩放图片以完全装进容器内，不裁切图片 */
img.contain {
  object-fit: contain;
}
 
/* 保持图片的宽高比，缩放图片以完全覆盖容器，可能会裁切图片 */
img.cover {
  object-fit: cover;
}
 
/* 不改变图片大小，图片可能会溢出容器 */
img.none {
  object-fit: none;
}
 
/* 效果跟none或contain中较小的那个相同 */
img.scale-down {
  object-fit: scale-down;
}

在HTML中使用这些类：




<img src="image.jpg" class="fill" />
<img src="image.jpg" class="contain" />
<img src="image.jpg" class="cover" />
<img src="image.jpg" class="none" />
<img src="image.jpg" class="scale-down" />

使用object-fit时，通常还会配合width和height属性来控制图片的尺寸，以及object-position属性来控制图片在容器中的位置。

- 阅读更多 -

【CSS】三个DIV在同一行平分宽度的五种实现方法

System

2024-08-16

所有,css




/* 方法1: 使用display: inline-block和text-align */
.container {
  text-align: justify;
  overflow: hidden; /* 清除inline-block元素之间的额外空白 */
}
.container div {
  display: inline-block;
  width: 33.33%; /* 每个div占总宽度的33.33% */
  box-sizing: border-box; /* 包括padding和border在内的总宽度 */
}
 
/* 方法2: 使用flexbox */
.container {
  display: flex;
}
.container div {
  flex: 1; /* 平分剩余空间 */
}
 
/* 方法3: 使用grid */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 每列占用1/3的空间 */
}
 
/* 方法4: 使用float和calc */
.container div {
  float: left;
  width: calc(100% / 3); /* 每个div占总宽度的100% / 3 */
}
 
/* 方法5: 使用display: table-cell */
.container {
  display: table-row;
}
.container div {
  display: table-cell;
  width: 33.33%; /* 每个div占总宽度的33.33% */
  box-sizing: border-box; /* 包括padding和border在内的总宽度 */
}

以上代码提供了五种不同的方法来实现三个div在同一行平分宽度。每种方法都有各自的应用场景和优缺点，开发者可以根据具体情况选择合适的方法。

- 阅读更多 -

css 实现简单的页面隐藏与浮现

System

2024-08-16

所有,css

在CSS中，可以使用display属性来隐藏或显示页面元素。以下是一个简单的示例，展示了如何使用CSS控制元素的显示和隐藏。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element Visibility Toggle</title>
<style>
  .hidden {
    display: none;
  }
</style>
</head>
<body>
 
<button onclick="toggleVisibility()">Toggle Visibility</button>
 
<div id="myDiv">
  这里是一些内容。
</div>
 
<script>
function toggleVisibility() {
  var x = document.getElementById("myDiv");
  if (x.classList.contains('hidden')) {
    x.classList.remove('hidden');
  } else {
    x.classList.add('hidden');
  }
}
</script>
 
</body>
</html>

在这个示例中，我们有一个div元素和一个按钮。当按钮被点击时，它会调用toggleVisibility函数，这个函数会切换myDiv元素的hidden类。如果hidden类存在，它会被移除，使得元素显示；如果不存在，它会被添加，使得元素隐藏。这是通过切换CSS的display属性来实现的。

- 阅读更多 -

CSS常用属性整理汇总全集

System

2024-08-16

所有,css

CSS属性是用来设置HTML元素样式的，下面是一些常用的CSS属性及其简单描述和示例代码：

字体属性:




/* 设置字体大小 */
font-size: 16px;
 
/* 设置字体族 */
font-family: "Arial", sans-serif;
 
/* 设置字体粗细 */
font-weight: bold;
 
/* 设置字体样式 */
font-style: italic;

文本属性:




/* 设置文本颜色 */
color: #333333;
 
/* 设置文本对齐方式 */
text-align: center;
 
/* 设置文本装饰 */
text-decoration: underline;
 
/* 设置行高 */
line-height: 1.5;

背景属性:




/* 设置背景颜色 */
background-color: #f0f0f0;
 
/* 设置背景图片 */
background-image: url('image.jpg');
 
/* 设置背景重复方式 */
background-repeat: no-repeat;
 
/* 设置背景位置 */
background-position: top right;

边框属性:




/* 设置边框宽度 */
border-width: 2px;
 
/* 设置边框样式 */
border-style: dashed;
 
/* 设置边框颜色 */
border-color: #ff0000;

盒模型属性:




/* 设置元素的宽度 */
width: 100px;
 
/* 设置元素的高度 */
height: 100px;
 
/* 设置元素的内边距 */
padding: 10px;
 
/* 设置元素的外边距 */
margin: 20px;

布局属性:




/* 设置浮动 */
float: left;
 
/* 设置定位模式 */
position: relative;
 
/* 设置元素的上下左右位置 */
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;

显示属性:




/* 设置元素是否可见 */
visibility: hidden;
 
/* 设置元素是否显示 */
display: none;

这些是CSS中的基础属性，每个属性都可以有多个值和复杂的功能。在实际开发中，根据需求可以选择合适的属性和值来设计网页样式。

- 阅读更多 -

CSS 实现视差滚动效果

System

2024-08-16

所有,css




/* 设置背景图片，并使其覆盖整个视口 */
body, html {
  height: 100%;
  margin: 0;
  background-image: url('your-image.jpg');
  background-size: cover;
}
 
/* 设置视差滚动的元素样式 */
.parallax {
  /* 设置元素的大小和位置 */
  height: 100vh; /* 视口的100%高度 */
  width: 100%;
  overflow: hidden;
  position: relative;
  background-attachment: fixed; /* 背景图片固定，实现视差效果 */
}
 
/* 设置视差滚动的背景层，并使其以不同的速度移动 */
.parallax::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: inherit;
  background-size: cover;
  transform: translateZ(-1px) scale(2); /* 缩放和z索引，实现视差效果 */
}
 
/* 设置视差滚动的内容样式 */
.parallax-content {
  position: absolute;
  z-index: 10; /* 确保内容在最上层显示 */
  color: white;
  text-align: center;
  line-height: 100vh; /* 使内容垂直居中 */
  width: 100%;
}

这段代码定义了一个.parallax类，它可以被用来创建视差滚动的效果。通过设置background-attachment: fixed;属性，背景图片将会在页面滚动时保持固定，从而产生视差滚动的动感效果。通过调节.parallax::before伪元素的transform属性，可以实现不同的视差效果和视觉层次感。

System

2024-08-16

所有,css

CSS的position属性用于指定元素的定位方式。它有五个值：

static：默认值，无定位。元素出现在正常的流中。
fixed：元素相对于浏览器窗口进行定位。
relative：相对于正常位置进行定位。
absolute：相对于最近的非static定位的父元素进行定位。
sticky：基于用户的滚动位置相对于该元素在流中的位置定位。

示例代码：




/* 静态定位 */
.static {
  position: static;
}
 
/* 固定定位 */
.fixed {
  position: fixed;
  top: 10px;
  right: 10px;
}
 
/* 相对定位 */
.relative {
  position: relative;
  top: 20px;
  left: 20px;
}
 
/* 绝对定位 */
.absolute {
  position: absolute;
  top: 30px;
  left: 30px;
}
 
/* 粘性定位 */
.sticky {
  position: sticky;
  top: 0;
}

在这个例子中，.fixed类的元素将固定在浏览器窗口的距离顶部10像素、右侧10像素的位置。.relative类的元素将相对于其正常位置向下移动20像素、向右移动20像素。.absolute类的元素将相对于最近的非static定位的父元素向下移动30像素、向右移动30像素。.sticky类的元素将在用户滚动到其位置时固定在视口的顶部。

- 阅读更多 -

html、css、js实现图片放大功能，包括拖拽和滚动焦点缩放

System

2024-08-16

所有,css

以下是一个简单的HTML、CSS和JavaScript代码示例，实现了图片的放大功能，包括拖拽和滚轮控制的缩放。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Zoom</title>
<style>
  #imageContainer {
    width: 500px;
    height: 300px;
    overflow: hidden;
    position: relative;
    cursor: move;
    border: 1px solid #000;
  }
  img {
    position: absolute;
    width: 100%;
    height: auto;
    transform-origin: top left;
    transition: transform 0.1s;
  }
</style>
</head>
<body>
<div id="imageContainer">
  <img id="zoomableImage" src="path_to_your_image.jpg" alt="Zoomable Image">
</div>
 
<script>
  const container = document.getElementById('imageContainer');
  const img = document.getElementById('zoomableImage');
  let startX, startY, x, y;
 
  container.addEventListener('mousedown', function(e) {
    startX = e.pageX - x;
    startY = e.pageY - y;
    container.style.cursor = 'grabbing';
    document.addEventListener('mousemove', moveImage);
    document.addEventListener('mouseup', stopMoving);
  });
 
  function moveImage(e) {
    x = e.pageX - startX;
    y = e.pageY - startY;
    img.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
  }
 
  function stopMoving() {
    container.style.cursor = 'move';
    document.removeEventListener('mousemove', moveImage);
    document.removeEventListener('mouseup', stopMoving);
  }
 
  container.addEventListener('wheel', function(e) {
    e.preventDefault();
    const scale = img.getBoundingClientRect().width / container.offsetWidth;
    const scaleFactor = e.deltaY > 0 ? 1.1 : 0.9;
    img.style.transform = 'translate(' + x + 'px, ' + y + 'px) scale(' + scale * scaleFactor + ')';
  });
</script>
</body>
</html>

在这个示例中，图片可以通过鼠标拖拽来移动，并且可以通过滚轮的滚动（向上为放大，向下为缩小）来缩放。你需要替换path_to_your_image.jpg为你的图片路径。这个示例提供了基本的放大缩小功能，没有包括边界检查或任何性能优化。

System

2024-08-16

所有,css

CSS中的过渡（transition）、转换（transform）和动画（animation）是用于创建动态效果的不同特性。

过渡（Transition）：
过渡可以在样式改变时平滑地过渡到新样式。例如，当鼠标悬停时，颜色平滑过渡到新的颜色。




div {
  background-color: blue;
  transition: background-color 1s;
}
 
div:hover {
  background-color: red;
}

转换（Transform）：
转换可以应用平移、旋转、缩放和倾斜效果。




div {
  transform: rotate(0deg) scale(1);
  transition: transform 1s;
}
 
div:hover {
  transform: rotate(360deg) scale(2);
}

动画（Animation）：
动画可以创建更复杂的动态效果，并且可以控制每一帧。




@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

这些特性可以结合使用以创建更复杂和生动的界面效果。

- 阅读更多 -

CSS 2D转换 3D动画 3D转换

System

2024-08-16

所有,css

在CSS中，我们可以使用2D和3D转换来创建动画。以下是一些示例：

2D转换动画：




.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s infinite;
}
 
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

在这个例子中，我们创建了一个名为"move"的关键帧动画，它将对象从左侧移动到右侧。

3D转换动画：




.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 2s infinite;
}
 
@keyframes rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}

在这个例子中，我们创建了一个名为"rotate"的关键帧动画，它将对象绕Y轴旋转。

3D转换和动画组合：




.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: moveAndRotate 2s infinite;
}
 
@keyframes moveAndRotate {
  0% {
    transform: translateX(0) rotateY(0);
  }
  100% {
    transform: translateX(100px) rotateY(360deg);
  }
}

在这个例子中，我们创建了一个名为"moveAndRotate"的关键帧动画，它将对象从左侧移动到右侧并绕Y轴旋转。

以上代码都可以直接应用于HTML元素，例如：




<div class="box"></div>

这些示例展示了如何使用CSS的2D和3D转换以及动画来创造复杂的视觉效果。

- 阅读更多 -