1. 首页
  2. 分类
  3. css
python -- pyQt5中 样式设置(边框、按钮、CSS 颜色代码)
System
2024-08-20
所有,css

在PyQt5中，可以通过不同的方法设置控件的样式，包括边框、按钮和CSS颜色代码。以下是一些示例代码：

from PyQt5.QtWidgets import QApplication, QPushButton, QWidget, QVBoxLayout, QFrame
from PyQt5.QtGui import QColor
from PyQt5.QtCore import Qt

import sys


class StyleExample(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        # 创建一个按钮
        button = QPushButton('按钮')

        # 设置按钮边框
        button.setStyleSheet("QPushButton {"
                             "border: 2px solid red;"  # 边框为红色
                             "}"
                             "QPushButton:hover {"  # 鼠标悬停时边框更宽
                             "border: 4px solid blue;"
                             "}")

        # 设置按钮背景色和文字颜色
        button.setStyleSheet(button.styleSheet() + "QPushButton {"
                                                 "background-color: rgb(160, 160, 160);"  # 背景色为灰色
                                                 "color: rgb(255, 255, 255);"  # 文字颜色为白色
                                                 "}")

        # 使用CSS设置按钮背景色和边框
        button.setStyleSheet(button.styleSheet() + "QPushButton {"
                                                 "background-color: #00FF00;"  # 绿色背景
                                                 "border: 2px solid #0000FF;"  # 蓝色边框
                                                 "}")

        # 创建一个边框
        frame = QFrame(self)
        frame.setStyleSheet("QFrame {"
                            "border: 2px solid black;"  # 边框为黑色
                            "background-color: #FF0000;"  # 边框背景色为红色
                            "}")
        frame.setFrameShape(QFrame.StyledPanel)

        # 布局
        vbox = QVBoxLayout()
        vbox.addWidget(button)
        vbox.addWidget(frame)
        self.setLayout(vbox)

        self.setGeometry(300, 300, 300, 200)
        self.setWindowTitle('样式设置示例')
        self.show()


if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = StyleExample()
    sys.exit(app.exec_())
Python

在这个例子中，我们创建了一个StyleExample类，它继承自QWidget。在initUI方法中，我们创建了一个按钮和一个边框，并通过setStyleSheet方法设置了它们的样式。我们使用CSS语法来定义样式，如边框、背景颜色等。我们也演示了如何使用CSS颜色代码（如#00FF00表示绿色）和RGB值（如rgb(160, 160, 160)表示灰色）来设置颜色。

- 阅读更多 -
CSS篇之圆角梯形
System
2024-08-20
所有,css

要创建一个圆角梯形，我们可以使用CSS的border-radius属性和一些伪元素来实现。以下是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS圆角梯形</title>
<style>
  .trapezoid {
    width: 200px;
    height: 100px;
    background-color: #4CAF50;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
  }

  .trapezoid::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: inherit;
    z-index: -1;
    border-radius: 50px;
  }
</style>
</head>
<body>

<div class="trapezoid"></div>

</body>
</html>
HTML

在这个例子中，.trapezoid 是主要的元素，它设置了梯形的宽度、高度和背景颜色。border-radius 设置为 50px 创建了圆角。伪元素 .trapezoid::before 是梯形的阴影部分，它被定位在梯形的后面，并且设置了相同的 border-radius 以保持圆角。通过设置 overflow: hidden，我们隐藏了伪元素超出定义宽度的部分。这样我们就得到了一个圆角梯形。

- 阅读更多 -
用html和css来写个人简介
System
2024-08-20
所有,css

以下是一个简单的个人简历示例，使用HTML和CSS编写：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人简历</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
  }
  .header {
    text-align: center;
    margin-bottom: 20px;
  }
  .section {
    margin-bottom: 20px;
  }
  .section-title {
    text-transform: uppercase;
    color: #333;
    font-size: 18px;
    margin-bottom: 10px;
  }
  .section-content {
    color: #555;
    font-size: 16px;
  }
  .footer {
    text-align: center;
    font-size: 14px;
    margin-top: 20px;
  }
</style>
</head>
<body>

<div class="header">
  <h1>张三</h1>
  <p>个人简历</p>
</div>

<div class="section">
  <h2 class="section-title">基本信息</h2>
  <div class="section-content">
    <p>出生日期: 1990-01-01</p>
    <p>联系电话: 1234567890</p>
    <p>电子邮件: zhangsan@example.com</p>
    <p>居住地址: 123 广州路, 上海市</p>
  </div>
</div>

<div class="section">
  <h2 class="section-title">教育背景</h2>
  <div class="section-content">
    <p>2009-2013: 大学名称, 本科, 学科名称</p>
    <p>2009-2011: 高中名称, 高中, 学科名称</p>
  </div>
</div>

<div class="section">
  <h2 class="section-title">技能</h2>
  <div class="section-content">
    <p>编程语言: Python, JavaScript, Java</p>
    <p>框架: Django, React, Angular</p>
    <p>数据库: MySQL, PostgreSQL</p>
  </div>
</div>

<div class="footer">
  <p>最后更新日期: 2023-01-01</p>
</div>

</body>
</html>
HTML

这个简历使用了HTML结构化内容和CSS来美化样式。简洁的布局和一致的样式使得个人简历更具专业性。

- 阅读更多 -
解析css中的overflow属性
System
2024-08-20
所有,css

overflow 属性指定如何显示内容溢出元素的框。这个属性有四个值：visible、hidden、scroll 和 auto。

  • visible：默认值。溢出内容会显示在元素框之外。
  • hidden：溢出内容会被裁剪，且不可见。
  • scroll：溢出内容会被裁剪，但会提供滚动条来查看所有内容。
  • auto：如果内容溢出，则提供滚动条；如果不溢出，则不显示滚动条。

CSS 示例代码：

/* 设置元素的 overflow 属性为 hidden */
.element-hidden {
  overflow: hidden;
}

/* 设置元素的 overflow 属性为 scroll */
.element-scroll {
  overflow: scroll;
}

/* 设置元素的 overflow 属性为 auto */
.element-auto {
  overflow: auto;
}

/* 使用单独的属性值设置水平和垂直溢出 */
.element-overflow {
  overflow: auto;
  white-space: nowrap; /* 防止内容换行 */
}

/* 只设置水平或垂直溢出 */
.element-overflow-x {
  overflow-x: auto;
}

.element-overflow-y {
  overflow-y: auto;
}
CSS

HTML 示例代码：

<div class="element-hidden">这个元素的内容会被裁剪，且不可见。</div>
<div class="element-scroll">这个元素的内容会被裁剪，并且始终显示滚动条。</div>
<div class="element-auto">这个元素的内容如果溢出，会显示滚动条；如果不溢出，不会显示滚动条。</div>
<div class="element-overflow">这个元素的内容如果溢出，会显示滚动条；不会换行。</div>
<div class="element-overflow-x">这个元素的内容如果水平溢出，会显示水平滚动条。</div>
<div class="element-overflow-y">这个元素的内容如果垂直溢出，会显示垂直滚动条。</div>
HTML

以上代码展示了如何在 CSS 中使用 overflow 属性，并提供了水平和垂直溢出分别设置的例子。

- 阅读更多 -
vue3+vite5，引入tailwindcss不生效的原因
System
2024-08-20
所有,css

原因可能是以下几种：

  1. 配置错误：检查vite.config.js中是否正确配置了Tailwind CSS。
  2. 安装问题：确保已经通过npm或yarn正确安装了Tailwind CSS及其依赖。
  3. 导入顺序：Tailwind CSS 需要在main.css或其他入口文件中作为第一个样式文件导入。
  4. 缓存问题：Vite可能有缓存问题，尝试清除缓存后重新运行。
  5. PostCSS配置：如果项目中使用了PostCSS，确保Tailwind CSS 与其他CSS插件兼容工作。

解决方法：

  1. 核查vite.config.js中的配置，确保Tailwind CSS 相关配置正确无误。
  2. 通过npm或yarn重新安装Tailwind CSS及其依赖。

  3. 确保在main.css或其他样式文件中首先导入Tailwind CSS，例如：

    @import "tailwindcss/tailwind.css";
    CSS
  4. 清除Vite缓存，可以通过重启服务器或删除node\_modules/.vite。
  5. 如果使用了PostCSS，检查postcss.config.js配置文件，确保Tailwind CSS 插件被正确加载和配置。

如果以上步骤无法解决问题，可以查看控制台的错误信息，或者检查网络请求来查找加载失败的文件，进一步诊断问题。

- 阅读更多 -
CSS基础：最详细 padding的 4 种用法解析
System
2024-08-20
所有,css

在CSS中，padding属性是一个简写属性，用于设置一个元素的内边距。padding可以有1到4个值，具体取决于它所影响的边：

  1. padding: 20px; 影响所有四个边。
  2. padding-top: 20px; 只影响顶部边。
  3. padding-right: 20px; 只影响右侧边。
  4. padding-bottom: 20px; 只影响底部边。
  5. padding-left: 20px; 只影响左侧边。

对于padding的4值语法，它们分别代表：

  1. 上内边距
  2. 右内边距
  3. 下内边距
  4. 左内边距

示例代码：

/* 所有四个方向的内边距都是20px */
.element {
  padding: 20px;
}

/* 上内边距是20px，右内边距和左内边距是10px，下内边距是5px */
.element {
  padding: 20px 10px 5px;
}

/* 上内边距和下内边距是20px，左内边距和右内边距是10px */
.element {
  padding: 20px 10px;
}

/* 分别设置上、右、下、左内边距 */
.element {
  padding: 20px 15px 10px 5px;
}
CSS

以上代码展示了padding属性的多种用法。

- 阅读更多 -
vue3+ts项目中router+pinia+scss+unocss+跨域配置
System
2024-08-20
所有,css

以下是一个简化的Vue 3 + TypeScript项目的配置示例，包括router、pinia、SCSS和跨域配置：

  1. vite.config.ts 配置示例：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`,
      },
    },
  },
  server: {
    proxy: {
      '/api': {
        target: 'http://backend.server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
})
TypeScript
  1. router/index.ts 配置示例：
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
  },
  // 更多路由配置...
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
})

export default router
TypeScript
  1. store.ts 配置示例：
import { defineStore } from 'pinia'

export const useMainStore = defineStore({
  id: 'main',
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++
    },
  },
})
TypeScript
  1. variables.scss 文件示例：
$primary-color: #3498db;
$secondary-color: #e74c3c;

// 更多变量定义...
Sass (Scss)
  1. main.ts 文件示例：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { store } from './store'

const app = createApp(App)

app.use(store)
app.use(router)

app.mount('#app')
TypeScript

以上代码提供了Vue 3 + TypeScript项目中的基本配置，包括使用Vite作为构建工具，集成Vue Router、Pinia状态管理库，并支持SCSS预处理器。同时，它展示了如何配置Vite代理以处理跨域请求。这些配置和示例代码为开发者提供了一个清晰的起点，以便他们可以快速开始自己的Vue 3 + TypeScript项目。

- 阅读更多 -
使用 CSS 实现毛玻璃效果
System
2024-08-20
所有,css

要使用CSS实现毛玻璃效果，可以使用box-shadow和border-radius属性。以下是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matte Glass Effect</title>
<style>
  .glass {
    width: 200px;
    height: 200px;
    background-color: #fff;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    font-size: 20px;
  }
</style>
</head>
<body>
  <div class="glass">Content</div>
</body>
</html>
HTML

这段代码会创建一个带有毛玻璃效果的div，box-shadow属性用于添加阴影，border-radius属性用于创建圆角。

- 阅读更多 -
Web开发：一个可拖拽的模态框（HTML、CSS、JavaScript）
System
2024-08-20
所有,css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Modal</title>
<style>
  .modal {
    width: 300px;
    position: absolute;
    top: 50px;
    left: 50px;
    border: 1px solid #000;
    padding: 10px;
    z-index: 10;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  .modal-header {
    cursor: move;
    background-color: #2196F3;
    color: white;
    padding: 10px;
    margin: -10px -10px 10px -10px;
  }
  .modal-content {
    padding: 20px;
  }
</style>
</head>
<body>

<div class="modal" id="modal">
  <div class="modal-header" id="modal-header">
    Drag Me!
  </div>
  <div class="modal-content">
    <p>This is a draggable modal window.</p>
  </div>
</div>

<script>
  const dragModal = (modal, header) => {
    header.onmousedown = dragStart;

    let dragging = false;
    let mouseX, mouseY, deltaX, deltaY;

    const dragStart = (e) => {
      dragging = true;
      mouseX = e.clientX;
      mouseY = e.clientY;
    };

    document.onmouseup = () => {
      dragging = false;
    };

    document.onmousemove = (e) => {
      if (dragging) {
        deltaX = e.clientX - mouseX;
        deltaY = e.clientY - mouseY;
        mouseX = e.clientX;
        mouseY = e.clientY;

        modal.style.left = (modal.offsetLeft + deltaX) + 'px';
        modal.style.top = (modal.offsetTop + deltaY) + 'px';
      }
    };
  };

  const modal = document.getElementById('modal');
  const header = document.getElementById('modal-header');
  dragModal(modal, header);
</script>

</body>
</html>
HTML

这段代码实现了一个可拖拽的模态框。用户可以点击模态框的标题栏并拖动它来移动整个模态框。代码中的dragModal函数负责处理拖拽逻辑，它设置了必要的事件监听器来响应鼠标的移动和释放事件。

- 阅读更多 -
CSS设置移动端页面底部安全距离
System
2024-08-20
所有,css

在移动端开发中，为了确保内容不会紧贴屏幕底部，可能需要设置一个底部安全距离，这样可以保证在有软键盘的情况下，页面内容不会被软键盘遮挡。

在CSS中，可以使用env函数或者媒体查询来设置这个底部安全距离。env函数可以访问环境变量，而环境变量中通常会包含系统的安全边距。

例如，可以使用如下CSS代码来设置底部安全距离：

/* 设置页面底部的安全距离 */
padding-bottom: env(safe-area-inset-bottom);
CSS

或者使用媒体查询来处理不同屏幕尺寸下的安全距离：

@media (min-height: 800px) {
    /* 假设在屏幕高度至少800px时，底部的安全距离是20px */
    .footer {
        padding-bottom: 20px;
    }
}
CSS

确保在实际的HTML元素（如底部栏）上应用这个类（如.footer），这样就可以在移动端页面底部保持一定的安全距离。

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