分类 css 下的文章

2024-08-14

CSS八股文是指CSS布局的常用技术和方法。以下是一些常用的CSS布局技术及其简单示例：

浮动布局（Float）：




.float-layout {
  float: left; /* 或者使用 right */
  width: 50%; /* 可以是具体的宽度值或百分比 */
}

定位布局（Position）：




.position-layout {
  position: relative; /* 或 absolute, fixed */
  left: 0; /* 水平位置 */
  top: 0; /* 垂直位置 */
  width: 300px; /* 宽度 */
}

Flexbox布局：




.flex-container {
  display: flex; /* 或者 inline-flex */
  flex-direction: row; /* 或 column, row-reverse, column-reverse */
}
 
.flex-item {
  flex: 1; /* 可以是具体的数值 */
}

Grid布局：




.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三个等宽的列 */
}
 
.grid-item {
  grid-column: 1 / 3; /* 占据第一列到第二列的空间 */
}

表格布局（Table）：




.table-layout {
  display: table;
  width: 100%;
}
 
.table-row {
  display: table-row;
}
 
.table-cell {
  display: table-cell;
  width: 100px; /* 可以是具体的宽度值 */
}

以上代码仅展示了CSS布局技术的简单应用，实际应用中可能需要更复杂的样式和逻辑以达到所需的设计效果。

- 阅读更多 -

前端使用html+js+css实现一个弹出选择框

System

2024-08-14

所有,css

以下是一个使用HTML、JavaScript和CSS实现的简单弹出选择框的示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Select Box</title>
<style>
  .select-box {
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    padding: 10px;
    z-index: 10;
  }
  .select-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .select-box ul li {
    padding: 5px 10px;
    cursor: pointer;
  }
  .select-box ul li:hover {
    background-color: #eee;
  }
</style>
</head>
<body>
 
<div class="trigger">点击这里弹出选择框</div>
<div class="select-box">
  <ul>
    <li>选项 1</li>
    <li>选项 2</li>
    <li>选项 3</li>
    <li>其他选项</li>
  </ul>
</div>
 
<script>
document.querySelector('.trigger').onclick = function() {
  var selectBox = document.querySelector('.select-box');
  selectBox.style.display = 'block';
  
  // 添加点击其他位置关闭选择框的事件监听
  document.addEventListener('click', function(e) {
    if(e.target !== selectBox && !selectBox.contains(e.target)) {
      selectBox.style.display = 'none';
      document.removeEventListener('click', arguments.callee);
    }
  });
};
 
// 选项点击事件
document.querySelectorAll('.select-box ul li').forEach(function(item) {
  item.onclick = function() {
    alert('你选择了: ' + item.textContent);
    document.querySelector('.select-box').style.display = 'none';
  };
});
</script>
 
</body>
</html>

这个示例包括了一个简单的弹出选择框，点击触发元素会显示选择框，选择一个选项后会弹出提示框，并关闭选择框。点击非选择框区域外任何地方都会关闭选择框。这个例子提供了一个基本框架，可以根据实际需求进行扩展和定制。

- 阅读更多 -

CSS 定位

System

2024-08-14

所有,css

CSS 定位可以通过 position 属性来实现，它有以下几个值：

static：默认值，没有定位。
relative：相对于元素在文档流中的原始位置进行定位。
absolute：相对于最近的非 static 定位的父元素进行定位。
fixed：相对于浏览器窗口进行定位。
sticky：基于用户的滚动位置相对定位。

实例代码：




/* 相对定位 */
.relative {
  position: relative;
  top: 10px; /* 向下移动 10px */
  left: 20px; /* 向右移动 20px */
}
 
/* 绝对定位 */
.absolute {
  position: absolute;
  top: 50px; /* 相对于最近的非 static 定位父元素向下移动 50px */
  right: 30px; /* 向右移动 30px */
}
 
/* 固定定位 */
.fixed {
  position: fixed;
  bottom: 0; /* 固定在底部 */
  left: 0; /* 固定在左边 */
}
 
/* 粘性定位 */
.sticky {
  position: sticky;
  top: 0; /* 当向下滚动超过其父元素时，粘性定位变为固定定位 */
}

使用时，只需将相应的类添加到 HTML 元素上即可实现不同的定位效果。

- 阅读更多 -

探索CSS精简新境界：CSS Shorthand Generator应用解析

System

2024-08-14

所有,css




/* 使用CSS属性缩写生成器创建一个简洁的样式规则 */
.selector {
  /* 单独设置边距 */
  margin: 10px;
  
  /* 上下边距为0，左右边距为15px */
  margin: 0 15px;
  
  /* 分别设置上边距、右边距、下边距、左边距 */
  margin: 5px 10px 15px 20px;
  
  /* 使用0取消所有边距 */
  margin: 0;
  
  /* 设置一个统一的边框 */
  border: 1px solid black;
  
  /* 设置背景颜色 */
  background-color: #f0f0f0;
  
  /* 设置元素的宽度和高度 */
  width: 100px;
  height: 50px;
  
  /* 设置文本的字体大小和行高 */
  font: 14px/1.5 'Arial', sans-serif;
  
  /* 设置文本的颜色和对齐方式 */
  color: #333;
  text-align: center;
}

这段代码展示了如何使用CSS属性缩写来简化和优化CSS样式规则。它提供了一种更加高效和结构化的方式来编写CSS代码，使得样式表更加易于阅读和维护。

- 阅读更多 -

写一些我在日常写css代码的需要用到的代码

System

2024-08-14

所有,css

CSS 是一种用于网页样式设计的语言，它可以使网页的设计更加丰富多彩。下面是一些我在日常写 CSS 代码时常用的一些代码。

设置元素的宽度和高度：




div {
  width: 100px;
  height: 100px;
}

设置元素的背景颜色：




div {
  background-color: #ff0000;
}

设置元素的边框：




div {
  border: 1px solid #000000;
}

设置元素的边距和填充：




div {
  margin: 10px;
  padding: 20px;
}

设置元素的文本颜色和大小：




p {
  color: #000000;
  font-size: 16px;
}

设置元素的字体和样式：




p {
  font-family: 'Arial', sans-serif;
  font-weight: bold;
}

设置元素的透明度：




div {
  opacity: 0.5;
}

设置元素的浮动：




div {
  float: left;
}

设置元素的显示类型：




div {
  display: inline-block;
}

设置元素的隐藏：




div {
  display: none;
}

这些都是一些基本的 CSS 代码，在实际的开发中会根据需求设计出更复杂的样式。

- 阅读更多 -

css的长度单位详解

System

2024-08-14

所有,css

CSS 的长度单位可以分为两类：相对长度和绝对长度。

绝对长度单位：

cm：厘米
mm：毫米
in：英寸 (1in = 2.54cm)
px：像素 (1px = 1/96th of 1in)
pt：点 (1pt = 1/72 of 1in)
pc：皮克 (1pc = 12 pt)

相对长度单位：

em：相对于当前元素的字体大小
rem：相对于根元素 (html) 的字体大小
%：百分比，相对于父元素的字体大小或者其他属性

示例代码：




div {
  width: 100px; /* 绝对单位 */
  height: 2cm;  /* 绝对单位 */
  font-size: 1em; /* 相对单位 */
  padding: 1%; /* 相对单位 */
}

在实际应用中，选择哪种单位取决于你的设计需求。绝对长度单位保证了在不同媒体上的一致性，而相对长度单位则提供了可伸缩性和灵活性。

- 阅读更多 -

css隐藏div中超出部分文字，鼠标放上去则显示全部内容

System

2024-08-14

所有,css

您可以使用CSS的text-overflow属性结合:hover伪类来实现这个效果。以下是一个简单的示例：

HTML:




<div class="text-container">
  这里是一些超出容器部分的文本内容，鼠标悬停时会显示完整内容。
</div>

CSS:




.text-container {
  width: 200px; /* 定义容器宽度 */
  white-space: nowrap; /* 确保文本不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  text-align: center; /* 文本居中对齐 */
  transition: width 0.5s; /* 动画过渡效果 */
}
 
.text-container:hover {
  width: auto; /* 鼠标悬停时，容器宽度自适应内容 */
  overflow: visible; /* 内容可见 */
  white-space: normal; /* 文本正常换行 */
  text-overflow: none; /* 省略号不显示 */
}

这段代码会使得.text-container中的文本在超出容器宽度时显示为省略号，鼠标悬停时会显示全部文本内容。

- 阅读更多 -

一文搞懂 CSS Flexbox 布局 - 2024年最新版

System

2024-08-14

所有,css

CSS Flexbox（弹性盒子布局）是一种现代CSS布局模型，主要用于在不同尺寸的屏幕上提供一致的用户体验。

以下是一个简单的Flexbox布局示例，它将创建一个水平排列的导航菜单：




.nav {
  display: flex; /* 指定为Flexbox布局 */
  list-style-type: none; /* 移除列表的标记 */
  padding: 0; /* 移除默认的内边距 */
  margin: 0; /* 移除默认的外边距 */
}
 
.nav li {
  margin-right: 10px; /* 给每个列表项加上一些外边距 */
}
 
.nav a {
  text-decoration: none; /* 移除下划线 */
  padding: 5px 10px; /* 添加一些内边距 */
  color: white; /* 文字颜色 */
  background-color: black; /* 背景颜色 */
}
 
.nav a:hover {
  background-color: #333; /* 鼠标悬停时的背景颜色 */
}




<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">联系</a></li>
</ul>

这段代码将创建一个水平导航栏，其中的列表项会使用Flexbox布局模型以水平方式排列。当鼠标悬停在某个链接上时，背景颜色会变深，提供了一定的视觉反馈。

System

2024-08-14

所有,css

以下是一个使用Vue 3、TypeScript、Element Plus、Vue Router、SCSS和Axios的项目基础结构的示例：

安装必要的依赖：




npm install

项目结构可能如下所示：




src/
|-- api/
|   |-- index.ts
|
|-- assets/
|   |-- styles/
|       |-- index.scss
|
|-- components/
|   |-- ExampleComponent.vue
|
|-- router/
|   |-- index.ts
|
|-- App.vue
|-- main.ts
|-- shims-vue.d.ts
|-- tsconfig.json
|-- vite.config.ts

vite.config.ts 配置文件：




import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/assets/styles/index.scss";`
      }
    }
  }
})

tsconfig.json 类型脚本配置：




{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "types": ["vite/client"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

shims-vue.d.ts 类型声明文件：




declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

main.ts 入口文件：




import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
const app = createApp(App)
 
app.use(router)
app.use(ElementPlus)
 
app.mount('#app')

App.vue 根组件：




<template>
  <router-view />
</template>
 
<script lang="ts">
import { defineComponent } from 'vue'
 
export default defineComponent({
  name: 'App'
})
</script>

router/index.ts 路由配置：




import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
const routes: Array

- 阅读更多 -

在react中使用tailwindcss

System

2024-08-14

所有,css

要在React项目中使用Tailwind CSS，你需要按照以下步骤操作：

安装Tailwind CSS和PostCSS：




npm install -D tailwindcss postcss autoprefixer

使用Tailwind CSS CLI创建配置文件：




npx tailwindcss init -p

在tailwind.config.js文件中配置Tailwind CSS（如果没有自定义配置，通常不需要编辑这个文件）。
在项目的src/index.js或src/App.js文件中引入Tailwind CSS样式文件：




import './index.css';
 
// 在index.css中添加
@tailwind base;
@tailwind components;
@tailwind utilities;

在postcss.config.js中配置PostCSS（如果没有这个文件，则需要创建它）：




module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

在你的React组件中，你可以开始使用Tailwind CSS类了。例如：




import React from 'react';
 
const MyComponent = () => (
  <div className="bg-blue-500 text-white p-4">
    Hello Tailwind!
  </div>
);
 
export default MyComponent;

确保你的React组件的根元素应用了Tailwind CSS类。

这样，你就可以在React项目中使用Tailwind CSS来快速样式化你的组件了。

- 阅读更多 -