1. 首页
  2. 标签
  3. css
HTML5+CSS3小实例：按钮悬浮效果
System
2024-08-16
所有,css3



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Hover Effect</title>
<style>
  .button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    /* 添加圆角 */
    border-radius: 28px;
    /* 添加阴影 */
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    /* 过渡效果 */
    transition: box-shadow 0.5s ease, transform 0.5s ease;
  }
 
  .button:hover {
    /* 悬浮时阴影变化 */
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    /* 悬浮时变化 */
    transform: translateY(-5px);
  }
</style>
</head>
<body>
 
<button class="button">Hover Over Me!</button>
 
</body>
</html>

这段代码展示了如何使用HTML和CSS创建一个具有悬浮效果的按钮。按钮在鼠标悬浮时，会有轻微的上移效果，并且增加了阴影效果，增强了按钮的立体感和交互感。

- 阅读更多 -
java+ selenium自动化测试-元素定位大法之By css下卷（详细教程）
System
2024-08-16
所有,css

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

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

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



WebElement element = driver.findElement(By.cssSelector("selector"));
  1. 使用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选择器解析。

- 阅读更多 -
css——图片缩放，拉伸，变形的解决办法
System
2024-08-16
所有,css

在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样式，背景图，class
System
2024-08-16
所有,css3

在JavaScript中，您可以使用以下方法动态设置CSS样式，背景图片和类：

  1. 通过元素的style属性设置内联样式。
  2. 通过更改元素的className属性来更改类。
  3. 使用classList添加或删除类。
  4. 使用CSSStyleSheet接口修改现有样式规则。
  5. 为元素添加背景图片，可以通过设置style.backgroundImage属性。

以下是实现这些功能的示例代码：




// 获取元素
var element = document.getElementById('myElement');
 
// 设置内联样式
element.style.color = 'blue';
element.style.backgroundColor = 'yellow';
 
// 更改类
element.className = 'new-class';
 
// 或者使用classList
element.classList.add('another-class');
element.classList.remove('existing-class');
element.classList.toggle('active');
 
// 为元素添加背景图片
element.style.backgroundImage = 'url("path/to/your/image.jpg")';
 
// 动态创建并添加样式
var style = document.createElement('style');
style.innerHTML = `
  .custom-style {
    color: green;
    background-color: pink;
  }
`;
document.head.appendChild(style);
 
// 应用新创建的样式类
element.classList.add('custom-style');

请根据实际需求选择合适的方法来动态设置CSS样式。

- 阅读更多 -
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属性来实现的。

- 阅读更多 -
用htmlcss3和一些简单的js代码写了一个个人网站，之后如何上线？
System
2024-08-16
所有,css3

将您写好的个人网站上传到服务器是一个简单的过程，以下是几个基本步骤：

  1. 购买服务器或托管： 您需要购买一个服务器或者使用像GitHub Pages、Netlify这样的托管服务。
  2. 域名注册： 如果您需要一个自己的域名（比如yourname.com），您需要在一个域名注册商那里注册。
  3. 域名解析： 将您的域名指向服务器的IP地址。
  4. 服务器配置： 配置服务器以托管网站。这可能包括安装Web服务器软件（如Apache或Nginx），设置数据库等。
  5. 上传网站文件： 使用FTP或SSH将您的网站文件上传到服务器。
  6. 管理权限： 设置文件权限，确保网站文件夹对所有人可读。
  7. 测试： 通过输入您的域名来测试网站是否正确上线。

示例代码（使用SSH上传文件）：




scp -r /path/to/your/local/website user@yourserver.com:/path/to/your/server/directory

确保替换/path/to/your/local/website为您本地网站文件的路径，user为您的服务器用户名，yourserver.com为您的服务器域名或IP地址，以及/path/to/your/server/directory为您网站在服务器上的目标路径。

如果您使用的是FTP，可以使用文件管理器或命令行工具上传文件。如果您使用的是托管服务，通常它们提供了一个简单的界面来上传您的网站文件。

- 阅读更多 -
CSS3笔记之定位篇z-index
System
2024-08-16
所有,css3

在CSS中，z-index属性主要用于管理定位元素（即position属性值为relative、absolute、fixed或sticky的元素）的堆叠顺序。z-index值大的元素将位于值小的元素之上。

注意，z-index只适用于相对定位的元素，即position属性值为relative、absolute、fixed或sticky的元素。

以下是一些使用z-index的示例：

示例1：




#box1 {
  position: relative;
  z-index: 1;
}
 
#box2 {
  position: relative;
  z-index: 2;
}

在这个例子中，#box2将显示在#box1之上，因为它的z-index值更大。

示例2：




#box1 {
  position: absolute;
  z-index: 10;
}
 
#box2 {
  position: absolute;
  z-index: 5;
}

在这个例子中，即使#box2在HTML代码中先定义，#box1也会显示在#box2之上，因为它的z-index值更大。

示例3：




#box1 {
  position: relative;
  z-index: 1;
}
 
#box2 {
  position: fixed;
  z-index: 2;
}

在这个例子中，即使#box1的定位方式是relative，如果#box2的定位方式是fixed或sticky，#box2也会显示在#box1之上，因为fixed或sticky定位的元素总是显示在相对定位的元素之上。

注意：z-index只适用于同一个父元素中的定位元素，如果父元素的z-index值较小，子元素即使z-index值较大也无法显示在父元素之上。

- 阅读更多 -
CSS常用属性整理汇总全集
System
2024-08-16
所有,css

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

  1. 字体属性:



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



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



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



/* 设置边框宽度 */
border-width: 2px;
 
/* 设置边框样式 */
border-style: dashed;
 
/* 设置边框颜色 */
border-color: #ff0000;
  1. 盒模型属性:



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



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



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

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

- 阅读更多 -
【前端】在静态网页引入JS、CSS的地址上动态添加时间戳防止缓存
System
2024-08-16
所有,javascript



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://yourdomain.com/path/to/your.js?timestamp=1234567890"></script>
    <link href="http://yourdomain.com/path/to/your.css?timestamp=1234567890" rel="stylesheet">
</head>
<body>
    <!-- Your HTML content goes here -->
</body>
</html>

在这个例子中，我们在引入JS和CSS文件的URL后面加上了查询字符串（query string）?timestamp=1234567890。这个时间戳可以是任何一个特定的时间值，通常使用当前时间的时间戳。这样，每次页面加载时，浏览器都会认为是一个新的请求，从而避免了缓存的问题。这种方法在开发环境中非常有用，但在生产环境中，通常会有更好的缓存策略。

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