标签 css 下的文章

2024-08-20

CSS3多列布局可以用来创建瀑布流效果。您可以使用column-count属性来指定列的数量，或者使用column-width属性来指定列宽。然后，使用break-inside: avoid;属性来避免内容跨列分割。以下是一个简单的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Column Layout for Masonry Effect</title>
<style>
  .masonry {
    column-count: 4;
    column-gap: 1em; /* Gap between columns */
  }
 
  .masonry-item {
    break-inside: avoid; /* Avoid content breaking across columns */
    padding: 1em;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
  }
 
  /* Just for styling */
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
</style>
</head>
<body>
 
<div class="masonry">
  <div class="masonry-item">Column item 1</div>
  <div class="masonry-item">Column item 2</div>
  <div class="masonry-item">Column item 3</div>
  <!-- ... more .masonry-item elements ... -->
</div>
 
</body>
</html>

在这个例子中，.masonry 类定义了一个带有4列的瀑布布局，列间隔为1em。.masonry-item 类避免了内容在列之间分割，并为每个列项提供了一定的填充和样式。

System

2024-08-20

所有,css

首先，确保你已经安装了Node.js和npm。

初始化新项目:




npm create vite@latest my-vue3-app --template vue-ts




cd my-vue3-app
npm install

添加Element-plus和Unocss:




npm install element-plus unocss

安装vue-router和axios:




npm install vue-router@4 axios

安装pinia:




npm install pinia@2

修改vite.config.ts以包含所需插件:




import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ElementPlus from 'unplugin-element-plus/vite'
import Unocss from 'unocss/vite'
 
export default defineConfig({
  plugins: [
    vue(),
    ElementPlus({
      // 如有需要，在此处配置Element-plus
    }),
    Unocss(),
  ],
  // 其他配置...
})

修改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'
import 'unocss/dist/bundle.css'
 
const app = createApp(App)
 
app.use(ElementPlus)
app.use(router)
 
app.mount('#app')

配置tsconfig.json以支持Element-plus:




{
  "compilerOptions": {
    "types": ["element-plus/global"]
  }
}

配置router.ts:




import { createRouter, createWebHistory } from 'vue-router'
 
const routes = [
  // 定义路由
]
 
const router = createRouter({
  history: createWebHistory(),
  routes,
})
 
export default router

配置pinia.ts:




import { createPinia } from 'pinia'
 
const pinia = createPinia()
 
export default pinia

在main.ts中使用pinia:




import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import pinia from './pinia'
 
const app = createApp(App)
 
app.use(pinia)
app.use(router)
 
app.mount('#app')

配置vite.config.ts以生成产物目录为z:




export default defineConfig({
  // 其他配置...
  build: {
    outDir: 'z'
  }
})

打包项目:




npm run build

以上步骤将会创建一个新的Vue 3项目，并配置了Element-plus、Unocss、Vue-router、Axios和Pinia。同时，项目将会被打包成一个z目录下的生产版本。

- 阅读更多 -

第二周博客：CSS进阶

System

2024-08-20

所有,css

在CSS中，我们可以使用不同的技术来进行布局和样式设计。以下是一些进阶技术的示例：

使用Flexbox进行布局：




.container {
  display: flex; /* 设置为Flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

使用Grid布局创建复杂的网格结构：




.container {
  display: grid; /* 设置为Grid布局 */
  grid-template-columns: repeat(3, 1fr); /* 创建三个等宽的列 */
  grid-template-rows: repeat(3, 1fr); /* 创建三个等高的行 */
  gap: 10px; /* 设置网格间隙 */
}

使用伪元素添加装饰性元素：




.element::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background-color: blue;
}

使用CSS过渡和动画制作生动的动态效果：




.element:hover {
  transform: scale(1.1); /* 鼠标悬停时放大元素 */
  transition: transform 0.3s ease-in-out; /* 设置过渡动画 */
}

使用Media Queries进行响应式设计：




@media (max-width: 768px) {
  .container {
    flex-direction: column; /* 在小屏幕上将Flex项目垂直排列 */
  }
}

使用CSS变量（也称为CSS自定义属性）实现主题切换：




:root {
  --primary-color: blue; /* 定义主题色 */
}
 
.element {
  color: var(--primary-color); /* 使用主题色 */
}

这些CSS进阶技术可以帮助开发者更高效地创建网页布局和样式，提升用户体验。

- 阅读更多 -

CSS 布局的一些些点

System

2024-08-20

所有,css

CSS 布局主要涉及以下几个要点：

盒子模型：内容、填充（padding）、边框（border）和边距（margin）构成了盒子模型。
浮动（Float）：使元素向左或向右浮动，可以创建多列布局。
定位（Position）：可以绝对定位或相对定位元素。
Flexbox：一种灵活的布局模型，可以在任何方向上排列子元素。
Grid：是一个二维的基于网格的布局系统，可以更容易地设计各种复杂的布局。
网格布局（Grid Layout）：是一个二维的基于网格的布局系统，可以更容易地设计各种复杂的布局。

示例代码：




/* 简单的Flexbox布局 */
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
 
/* 网格布局 */
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto; /* 三列 */
  grid-gap: 10px; /* 网格间隙 */
}




<!-- Flexbox 示例 -->
<div class="container">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>
 
<!-- Grid 示例 -->
<div class="grid-container">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
  <div>项目 4</div>
  <div>项目 5</div>
</div>

以上代码展示了如何使用Flexbox和Grid布局简单地创建一个居中容器和多列布局，以及一个三列的网格布局。

- 阅读更多 -

前端提高篇CSS进阶10Media媒体查询，网站前端开发

System

2024-08-20

所有,css

在CSS中，媒体查询（Media Queries）是一种强大的功能，它允许我们根据设备的特性（如屏幕尺寸、分辨率、是否可触摸等）来应用不同的样式规则。

以下是一个简单的媒体查询示例，它会在屏幕宽度小于600像素时应用特定的样式规则：




/* 在标准屏幕上的样式 */
body {
  background-color: white;
  color: black;
}
 
/* 在屏幕宽度小于600像素时应用的媒体查询 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
    color: white;
  }
}

在上述代码中，@media screen and (max-width: 600px) 是媒体查询规则，它告诉浏览器在屏幕宽度小于600像素时，应用其中的CSS规则来覆盖默认的样式。

媒体查询不仅可以用于响应式设计，还可以用于其他场景，例如针对打印机进行样式设置、针对视觉障碍者提供更好的可访问性样式等。

- 阅读更多 -

css基础内容1

System

2024-08-20

所有,css

CSS (Cascading Style Sheets) 是用于描述网页样式的语言。以下是一些基本的CSS样式规则和示例代码：




p {
  font-size: 16px;
}

文本颜色：




p {
  color: red;
}

背景颜色：




body {
  background-color: #f0f0f0;
}

边距和填充：




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

边框：




div {
  border: 1px solid black;
}

浮动：




img {
  float: left;
}

列表样式：




ul {
  list-style-type: square;
}

宽度和高度：




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

字体系列：




body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

显示与隐藏：




div {
  display: none; /* 隐藏元素 */
}
 
div.show {
  display: block; /* 显示元素作为块级元素 */
}

这些是CSS的基本内容，实际上CSS可以做得更多。

- 阅读更多 -

字节跳动已经四面还见了hr，CSS水平、垂直居中，计算机前端开发

System

2024-08-20

所有,css

CSS实现水平垂直居中的一种方法是使用flexbox布局。以下是一个简单的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Element</title>
<style>
  .container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 使用视口高度 */
  }
  .centered-content {
    /* 内容样式 */
  }
</style>
</head>
<body>
<div class="container">
  <div class="centered-content">
    <!-- 内容 -->
  </div>
</div>
</body>
</html>

在这个例子中，.container 类使用了flexbox布局，并且通过设置 justify-content 和 align-items 实现了水平和垂直居中。.centered-content 类代表需要居中的内容。

- 阅读更多 -

Vue3 在SCSS中使用v-bind

System

2024-08-20

所有,css

在Vue 3中，你可以使用v-bind指令来绑定一个动态的样式对象到元素的style属性，并在SCSS中使用这个对象。这样可以让你根据组件的状态动态地改变元素的样式。

首先，确保你已经安装并配置了支持SCSS的预处理器。然后，在你的Vue组件中，你可以这样使用v-bind来绑定一个计算属性或者响应式对象到style属性：




<template>
  <div :style="dynamicStyle">Hello, dynamic style!</div>
</template>
 
<script>
import { reactive, toRefs } from 'vue';
 
export default {
  setup() {
    const state = reactive({
      dynamicColor: 'red',
      dynamicFontSize: '20px'
    });
 
    // 使用toRefs确保响应式
    return {
      ...toRefs(state),
      dynamicStyle: {
        color: state.dynamicColor,
        fontSize: state.dynamicFontSize
      }
    };
  }
};
</script>
 
<style lang="scss">
// 在SCSS中定义样式
</style>

在上面的例子中，dynamicStyle是一个计算属性，它返回一个包含样式属性的对象。在div元素上使用:style="dynamicStyle"将这个对象应用到元素的style属性上。你可以通过修改state对象中的dynamicColor和dynamicFontSize来动态更新元素的样式。

- 阅读更多 -

一文彻底讲透 CSS 定位（示例拿来即用）

System

2024-08-20

所有,css

CSS 定位机制可以控制元素的位置，使用的属性有 position, top, right, bottom, left, z-index 等。

静态定位（Static Positioning）

这是所有元素的默认定位方式，不需要特别的CSS定位。




div {
  position: static;
}

相对定位（Relative Positioning）

相对定位是相对于元素在文档中的原始位置进行定位。




div {
  position: relative;
  top: 20px;
  left: 40px;
}

绝对定位（Absolute Positioning）

绝对定位是相对于最近的非静态定位的父元素进行定位。




div {
  position: absolute;
  top: 20px;
  right: 15px;
  bottom: 10px;
  left: 5px;
}

固定定位（Fixed Positioning）

固定定位总是相对于视口进行定位，无论页面如何滚动。




div {
  position: fixed;
  top: 10px;
}

粘性定位（Sticky Positioning）

粘性定位是基于用户的滚动位置。它变得“粘”在一个特定的位置。




div {
  position: sticky;
  top: 10px;
}

z-index 属性

z-index 属性指定了元素的堆叠顺序。




div {
  position: relative;
  z-index: 10;
}

以上代码示例展示了如何在CSS中使用不同的定位方法。在实际应用中，可以根据需要选择合适的定位方式来进行布局设计。

- 阅读更多 -

【干货】使用 CSS Scroll Snap 优化滚动，提升用户体验！

System

2024-08-20

所有,css




/* 设置滚动容器 */
.scroll-container {
  overflow: auto;
  scroll-snap-type: y mandatory; /* 启用垂直滚动切换，并且每一个子元素都必须对齐 */
  scroll-padding-top: 50px; /* 在滚动容器顶部添加额外的空间 */
}
 
/* 设置滚动子元素 */
.scroll-item {
  scroll-snap-align: start; /* 每个子元素在滚动时对齐其顶部到其父容器的顶部 */
  height: 100vh; /* 每个子元素的高度等于视口高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20vw; /* 使用视口宽度的20倍来调整文本大小，保持良好的缩放效果 */
}
 
/* 示例代码中的第一个子元素 */
.scroll-item:nth-child(1) {
  background: #f6a5c0; /* 设置第一个子元素的背景颜色 */
}
 
/* 示例代码中的第二个子元素 */
.scroll-item:nth-child(2) {
  background: #f8bd88; /* 设置第二个子元素的背景颜色 */
}
 
/* 示例代码中的第三个子元素 */
.scroll-item:nth-child(3) {
  background: #c7ecee; /* 设置第三个子元素的背景颜色 */
}

这段代码为一个包含三个子元素的滚动容器设置了CSS Scroll Snap。每个子元素在垂直滚动时都会对齐到其父容器的顶部，并且在滚动容器顶部有额外的空间。同时，每个子元素的高度被设置为视口的高度，确保了即使在移动设备上也能提供良好的用户体验。最后，通过flex布局的font-size属性使得文本大小适应不同屏幕尺寸，保持良好的缩放效果。

- 阅读更多 -