1. 首页
  2. 标签
  3. css
CSS基础标签属性及案例，前端网页开发
System
2024-08-14
所有,css

在CSS中，有许多可用的标签属性，以下是一些常见的CSS属性和它们的用法：

  1. 字体大小（font-size）：



p {
  font-size: 20px;
}
  1. 字体加粗（font-weight）：



p {
  font-weight: bold;
}
  1. 字体变体（font-variant）：



p {
  font-variant: small-caps;
}
  1. 字体系列（font-family）：



p {
  font-family: "Times New Roman", Times, serif;
}
  1. 文本颜色（color）：



p {
  color: red;
}
  1. 文本装饰（text-decoration）：



p {
  text-decoration: underline;
}
  1. 文本对齐（text-align）：



p {
  text-align: center;
}
  1. 列表样式（list-style-type）：



ul {
  list-style-type: square;
}
  1. 背景颜色（background-color）：



body {
  background-color: #f0f0f0;
}
  1. 边框样式（border-style）：



div {
  border-style: dashed;
}
  1. 边距（margin）和填充（padding）：



div {
  margin: 10px;
  padding: 20px;
}
  1. 宽度和高度：



div {
  width: 100px;
  height: 50px;
}
  1. 显示属性（display）：



div {
  display: inline-block;
}
  1. 透明度（opacity）：



div {
  opacity: 0.5;
}
  1. 浮动（float）：



div {
  float: right;
}
  1. 定位（position）：



div {
  position: relative;
}
  1. z-index层叠顺序：



div {
  z-index: 10;
}

这些只是CSS属性的一小部分，实际上CSS有数百个属性可供使用。在实际开发中，开发者可以根据需要选择合适的属性来进行页面的样式设计。

- 阅读更多 -
selenium总结-css 定位高级语法
System
2024-08-14
所有,css

CSS（层叠样式表）是一种用来描述HTML或XML（包括各种XML方言，如SVG，MathML等）文档样式的语言。Selenium是一个用于测试网站的自动化测试工具，可以模拟用户与浏览器的交互。

在Selenium中，我们可以使用CSS选择器来定位web元素。CSS选择器是一种用来选择HTML标签的方式，它比XPath表达式更加简洁和直观。

以下是一些常用的CSS定位方法：

  1. 通过id定位：



driver.find_element_by_css_selector("#element_id")
  1. 通过class定位：



driver.find_element_by_css_selector(".element_class")
  1. 通过元素名定位：



driver.find_element_by_css_selector("element_tag_name")
  1. 通过属性定位：



driver.find_element_by_css_selector("element_tag_name[attribute_name='attribute_value']")
  1. 通过子元素定位：



driver.find_element_by_css_selector("parent_tag_name > child_tag_name")
  1. 通过兄弟元素定位：



driver.find_element_by_css_selector("element_tag_name1 + element_tag_name2")
  1. 通过元素序号定位：



driver.find_elements_by_css_selector("element_tag_name:nth-child(index)")
  1. 通过部分属性值定位：



driver.find_element_by_css_selector("element_tag_name[attribute_name*='part_of_value']")
  1. 通过子字符串匹配定位：



driver.find_element_by_css_selector("element_tag_name[attribute_name^='start_of_value']")
  1. 通过子元素定位：



driver.find_element_by_css_selector("element_tag_name:nth-of-type(index)")

以上就是一些常用的CSS定位方法，可以根据实际情况选择合适的定位方式。

- 阅读更多 -
浅谈HTML、CSS和JS怎么变成页面
System
2024-08-14
所有,css

HTML、CSS和JS组合起来可以创建一个动态的网页。

HTML (Hypertext Markup Language) 负责网页的结构，CSS (Cascading Style Sheets) 负责网页的样式，JS (JavaScript) 负责网页的行为。

以下是一个简单的HTML、CSS和JS结合的例子：

HTML (index.html):




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Page</title>
    <style>
        .highlight { color: red; }
    </style>
</head>
<body>
    <h1 id="greeting">Hello, World!</h1>
    <button onclick="changeText()">Click Me!</button>
 
    <script>
        function changeText() {
            document.getElementById('greeting').className = 'highlight';
        }
    </script>
</body>
</html>

在这个例子中，HTML定义了页面的结构，包括一个标题和一个按钮。CSS定义了当标题被点击后如何改变样式（这里是改变颜色）。JS定义了当按钮被点击时要执行的函数，该函数改变了标题元素的类，从而应用了CSS规则。

当你打开这个页面并点击按钮时，标题文字的颜色会变成红色。这就是HTML、CSS和JS结合创建动态网页的一个简单例子。

- 阅读更多 -
CSS从入门到精通——定位与布局
System
2024-08-14
所有,css

在CSS中，定位和布局是非常重要的概念。以下是一些关键的概念和代码示例：

  1. 定位：

    CSS提供了多种定位机制，例如普通流、浮动、绝对定位和固定定位。




/* 绝对定位 */
.absolute-div {
  position: absolute;
  top: 10px;
  left: 20px;
}
 
/* 固定定位 */
.fixed-div {
  position: fixed;
  bottom: 0;
  right: 0;
}
 
/* 浮动 */
.floated-div {
  float: right;
}
 
/* 清除浮动 */
.clearfix {
  overflow: auto; /* 或者 'hidden'，或者使用 'clearfix' 类的技巧 */
}

  1. 布局：

    CSS Flexbox和Grid是两种强大的布局工具，可以创建各种复杂的布局。




/* Flexbox 布局示例 */
.flex-container {
  display: flex;
}
 
.flex-item {
  flex: 1; /* 可以自动分配空间 */
}
 
/* Grid 布局示例 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三个相等宽度的列 */
}
 
.grid-item {
  /* 放置在第一行第一列 */
  grid-column-start: 1;
  grid-row-start: 1;
}

  1. 定位与布局结合：

    有时候，我们需要将定位和布局结合起来，创建更复杂的设计。




/* 定位加布局的示例 */
.positioned-grid {
  position: relative; /* 确保父容器为定位提供参照 */
}
 
.positioned-grid-item {
  position: absolute;
  top: 10px;
  left: 20px;
  display: grid; /* 在绝对定位的元素内部使用Grid布局 */
  grid-template-columns: repeat(3, 1fr);
}

这些代码示例展示了如何在CSS中使用定位和布局。在实际应用中，你可能需要根据具体的设计需求来选择最合适的定位机制和布局方式。

- 阅读更多 -
css内容居中方法 的方法，真服了
System
2024-08-14
所有,css

CSS内容居中有多种方法，以下是一些常用的居中技术：

  1. 使用Flexbox：



.center-flexbox {
  display: flex;
  justify-content: center;
  align-items: center;
}
  1. 使用Grid：



.center-grid {
  display: grid;
  place-items: center;
}
  1. 使用绝对定位和transform：



.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  1. 使用文本居中属性（适用于内联元素或者文本）：



.center-text {
  text-align: center;
}
  1. 使用margin: auto（适用于块级元素，需要设置宽度和高度）：



.center-margin {
  width: 50%;
  height: 50%;
  margin: auto;
}

选择合适的居中方法取决于你的布局需求和上下文。

- 阅读更多 -
CSS加载动画效果
System
2024-08-14
所有,css

以下是一个简单的CSS加载动画示例，用于模拟页面加载时的进度条效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Loading Animation</title>
<style>
  .loading-container {
    width: 100%;
    height: 4px;
    background: #ddd;
    position: relative;
    overflow: hidden;
  }
 
  .loading-container:before {
    content: '';
    position: absolute;
    left: 0;
    height: 100%;
    background: #2980b9;
    animation: loading-animation 2s linear infinite;
  }
 
  @keyframes loading-animation {
    0% {
      width: 0;
      opacity: 1;
    }
    50% {
      width: 100%;
      opacity: 1;
    }
    100% {
      width: 100%;
      opacity: 0;
    }
  }
</style>
</head>
<body>
 
<div class="loading-container"></div>
 
</body>
</html>

这段代码创建了一个宽度为100%，高度为4px的加载条容器，使用CSS动画制作了加载动画效果。动画从宽度为0到宽度为100%，同时透明度从1逐渐减至0，模拟了加载过程。

- 阅读更多 -
selenium-XPATH以及CSS的便捷使用，逆袭面经分享
System
2024-08-14
所有,css



from selenium import webdriver
from selenium.webdriver.common.by import By
 
# 打开浏览器驱动
driver = webdriver.Chrome()
 
# 访问网页
driver.get("http://example.com")
 
# 使用XPATH定位元素
element_xpath = driver.find_element(By.XPATH, '//input[@id="username"]')
element_xpath.send_keys("username")
 
# 使用CSS定位元素
element_css = driver.find_element(By.CSS_SELECTOR, '#password-input')
element_css.send_keys("password")
 
# 关闭浏览器驱动
driver.quit()

这段代码展示了如何使用Selenium的find_element方法结合XPATH和CSS选择器来定位和操作网页元素。这是一种更为便捷和灵活的元素定位方法，可以有效提高自动化测试脚本的可维护性和可读性。

- 阅读更多 -
CSS进阶技术：过渡效果(CSS transition)、动画效果(CSS animation)和变换效果(CSS transform)
System
2024-08-14
所有,css

CSS中的过渡效果可以通过transition属性来实现，它使得在改变元素的CSS属性时可以平滑地进行动画。




/* 应用于所有元素的过渡效果 */
.element {
  transition: all 0.5s ease-in-out;
}
 
/* 仅应用于背景色和宽度的过渡效果 */
.element {
  transition: background-color 0.5s, width 0.5s;
}

CSS动画效果通过@keyframes规则和animation属性来实现，它允许创建更复杂和精细的动画。




/* 定义一个名为fadeIn的动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
/* 应用动画效果到元素 */
.element {
  animation: fadeIn 2s ease-in-out forwards;
}

CSS变换效果（transform）可以通过transform属性实现，如旋转、缩放、移动或倾斜元素。




/* 旋转元素30度 */
.element {
  transform: rotate(30deg);
}
 
/* 缩放元素到原始大小的1.5倍 */
.element {
  transform: scale(1.5);
}
 
/* 移动元素20像素 */
.element {
  transform: translateX(20px);
}

transition、animation和transform可以结合使用以创建更丰富和复杂的UI效果。

- 阅读更多 -
uniapp纯CSS实现圆形进度条组件
System
2024-08-14
所有,css



<template>
  <view class="circle-progress">
    <view class="circle-progress__half" :style="{ backgroundColor: halfColor }"></view>
    <view class="circle-progress__half" :style="{ backgroundColor: halfColor }"></view>
  </view>
</template>
 
<script>
export default {
  props: {
    halfColor: {
      type: String,
      default: '#09BB07'
    }
  }
}
</script>
 
<style scoped>
.circle-progress {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}
 
.circle-progress__half {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 50px;
  background-color: #e5e5e5;
}
 
.circle-progress__half:first-child {
  transform: rotate(180deg);
}
 
.circle-progress__half:last-child {
  transform: rotate(0deg);
}
</style>

这个代码实例展示了如何使用uniapp和Vue的props特性来创建一个可配置的圆形进度条组件。它使用了两个重叠的方块来模拟圆形进度条的外观，并允许使用者通过halfColor属性来设置进度条的颜色。这个例子简洁明了，并且可以作为创建更复杂圆形进度条组件的基础。

- 阅读更多 -
CSS常见的布局方式，限时福利
System
2024-08-14
所有,css

CSS 提供了多种方式来进行页面布局，以下是一些常见的布局方式：

  1. 浮动布局（Float）
  2. Flex 布局（Flexible Box）
  3. Grid 布局（Grid）
  4. 表格布局（Table）
  5. 定位布局（Position）

浮动布局（Float）




.float-left {
  float: left;
}
 
.float-right {
  float: right;
}



<div class="float-left">左边内容</div>
<div class="float-right">右边内容</div>

Flex 布局（Flexible Box）




.flex-container {
  display: flex;
}
 
.flex-item {
  flex: 1; /* 可以根据需要分配空间 */
}



<div class="flex-container">
  <div class="flex-item">项目 1</div>
  <div class="flex-item">项目 2</div>
  <div class="flex-item">项目 3</div>
</div>

Grid 布局（Grid）




.grid-container {
  display: grid;
  grid-template-columns: auto auto auto; /* 定义三列 */
}



<div class="grid-container">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

表格布局（Table）




.table-layout {
  display: table;
  width: 100%;
}
 
.table-cell {
  display: table-cell;
  padding: 10px;
}



<div class="table-layout">
  <div class="table-cell">单元格 1</div>
  <div class="table-cell">单元格 2</div>
  <div class="table-cell">单元格 3</div>
</div>

定位布局（Position）




.absolute-position {
  position: absolute;
  top: 10px;
  left: 10px;
}



<div class="absolute-position">绝对定位内容</div>

以上代码展示了如何使用不同的CSS技术进行布局。在实际应用中，你可以根据具体需求选择最适合的布局方式。

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