1. 首页
  2. 分类
  3. css
使用CSS Flexbox 构建可靠实用的网站 Header，30岁学前端开发
System
2024-08-10
所有,css

以下是使用CSS Flexbox创建一个简单Header的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Header</title>
<style>
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #333;
    color: #fff;
  }
  .header a {
    color: #fff;
    text-decoration: none;
  }
  .header a:hover {
    text-decoration: underline;
  }
  .logo {
    font-size: 20px;
    font-weight: bold;
  }
  .nav {
    display: flex;
    gap: 20px;
  }
  .nav a {
    padding: 5px 10px;
    background-color: #555;
    border-radius: 5px;
  }
  .nav a:hover {
    background-color: #777;
  }
</style>
</head>
<body>
 
<div class="header">
  <div class="logo">
    <a href="/">My Website</a>
  </div>
  <nav class="nav">
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
</div>
 
</body>
</html>

这段代码创建了一个具有logo、导航链接的Header，使用Flexbox布局实现了Header内部元素的灵活排列和居中对齐。

- 阅读更多 -
使用JavaScript控制CSS Animations(动画)
System
2024-08-10
所有,css



// 获取元素
var element = document.getElementById('myElement');
 
// 定义动画结束时的回调函数
function handleAnimationEnd() {
    console.log('动画结束');
}
 
// 为元素添加动画结束的监听器
element.addEventListener('animationend', handleAnimationEnd, false);
 
// 触发动画
element.classList.add('animate');

在这个例子中，我们首先通过getElementById获取了一个页面元素。然后定义了一个名为handleAnimationEnd的函数，这个函数将在动画结束时被调用，并在控制台输出一条消息。我们使用addEventListener为元素添加了一个监听器，监听'animationend'事件，这样当动画结束时就会调用handleAnimationEnd函数。最后，我们通过添加一个类名（假设为'animate'）来触发动画。这个类名应该在CSS中定义动画效果。

- 阅读更多 -
CSS快速入门
System
2024-08-10
所有,css

在CSS中，可以通过多种方式快速入门。以下是一些基本概念的示例：

  1. 选择器：选择页面元素。



/* 选择所有的段落 */
p {
  color: blue;
}
 
/* 选择ID为"header"的元素 */
#header {
  background-color: yellow;
}
 
/* 选择所有的类名为"important"的元素 */
.important {
  font-weight: bold;
}
  1. 属性：修改元素的样式。



/* 设置元素的宽度和高度 */
div {
  width: 100px;
  height: 100px;
}
 
/* 设置边框的样式 */
p {
  border: 1px solid black;
}
 
/* 设置背景颜色 */
div {
  background-color: #f0f0f0;
}
  1. 层叠：多个样式规则可以叠加。



/* 在其他CSS样式后叠加文本颜色 */
p {
  color: red;
}
 
/* 如果两个选择器选中了同一个元素，以最后的规则为准 */
p {
  color: blue;
}
  1. 继承：子元素可以继承父元素的某些样式。



/* 链接的默认颜色是继承自父元素的 */
a {
  color: red;
}
  1. 优先级：当多个选择器选中同一元素时，决定哪个规则被应用。



/* 内联样式优先级最高 */
p {
  color: red;
}
 
<p style="color: blue;">这是蓝色的文本。</p>
  1. 布局：使用CSS进行页面布局。



/* 简单的浮动布局 */
.left {
  float: left;
  width: 100px;
}
 
.right {
  float: right;
  width: 100px;
}
 
.content {
  margin: 0 100px;
}
  1. 媒体查询：响应式设计，根据屏幕大小调整样式。



/* 当屏幕宽度小于600px时，应用这些样式 */
@media screen and (max-width: 600px) {
  .left, .right {
    float: none;
    width: auto;
  }
 
  .content {
    margin: 0;
  }
}

这些是CSS的基础概念，可以帮助你快速了解CSS的基本使用方法。随着学习的深入，你可能还需要了解更高级的特性，如Flexbox布局、Grid布局、动画、变换等。

- 阅读更多 -
CSS 入门指南 CSS 常用样式及注册页面案例
System
2024-08-10
所有,css



/* 基本样式 */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
}
 
/* 导航栏样式 */
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
 
nav li {
    float: left;
}
 
nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
 
nav li a:hover {
    background-color: #111;
}
 
/* 登录表单样式 */
.login-container {
    width: 300px;
    margin: 100px auto;
    padding: 20px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}
 
.login-container h2 {
    text-align: center;
    margin-bottom: 20px;
}
 
.login-container input[type="text"],
.login-container input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
}
 
.login-container input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
 
.login-container input[type="submit"]:hover {
    background-color: #4cae4c;
}

这段代码为导航栏和登录表单定义了基本样式，使得页面更加美观和易用。通过使用CSS，我们可以将样式和内容分离，提高了代码的可维护性和可读性。

- 阅读更多 -
使用Windi CSS（基于vue-cli）
System
2024-08-10
所有,css

要在Vue项目中使用Windi CSS，你需要先安装Windi CSS依赖，并配置Vue项目以使用它。以下是步骤和示例代码：

  1. 安装Windi CSS依赖：



npm install windicss windicss-webpack-plugin -D
  1. 在Vue项目中配置Windi CSS。你可以在vue.config.js文件中添加配置：



const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')
 
module.exports = {
  css: {
    loaderOptions: {
      css: {
        // 使用 Windi CSS 的 opt-in 功能
        loaderOptions: {
          customize: require.resolve('windicss/utils/customize'),
        },
      },
    },
  },
  configureWebpack: {
    plugins: [
      new WindiCSSWebpackPlugin({
        virtualModulePath: '~windi.css',
      }),
    ],
  },
}
  1. 在main.js或App.vue中引入生成的虚拟CSS文件：



import '~windi.css'
 
// 你的Vue实例代码
new Vue({
  render: h => h(App),
}).$mount('#app')

现在，Windi CSS 应该已经配置好并在你的Vue项目中使用了。你可以开始使用Windi CSS的实用性属性来编写你的样式，而不需要预定义的类。

- 阅读更多 -
CSS 中的外边距折叠及 BFC
System
2024-08-10
所有,css

外边距折叠（Margin Collapsing）是CSS布局中的一个常见现象。它指的是当两个垂直相接的块级元素之间的外边距相遇时，它们会合并成一个外边距，大小为两者中的较大者，而不是相加。

BFC（Block Formatting Context）是CSS布局中的一个概念，它是一个独立的渲染区域，内部的元素布局不会影响到外部的元素。

为了解决外边距折叠问题，可以通过创建BFC来隔离元素的布局环境。一个常见的方法是设置元素的overflow属性为auto、scroll或hidden。

例如：




/* 创建BFC的CSS规则 */
.bfc-container {
  overflow: auto; /* 或者使用 'scroll' 或 'hidden' */
}



<!-- 使用BFC隔离外边距 -->
<div class="bfc-container">
  <div style="margin: 10px 0;">Block 1</div>
  <div style="margin: 20px 0; overflow: hidden;">Block 2</div>
</div>

在这个例子中，Block 1和Block 2之间的外边距不会折叠，因为Block 2被包裹在一个创建了BFC的容器内。

- 阅读更多 -
使用CSS引用外部TTF字体
System
2024-08-10
所有,css

在CSS中，要使用外部的TTF（TrueType Font）字体，你需要先通过@font-face规则声明字体源，然后就可以在页面中通过font-family属性使用该字体。以下是一个简单的示例：

  1. 首先，确保你的TTF字体文件放置在服务器的可访问目录下。
  2. 创建一个CSS文件，并使用@font-face规则引入字体。



@font-face {
  font-family: 'MyCustomFont';
  src: url('https://www.yourserver.com/fonts/mycustomfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
 
body {
  font-family: 'MyCustomFont', Arial, sans-serif;
}
  1. 在HTML文件中链接这个CSS文件：



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Custom Font Example</title>
  <link rel="stylesheet" href="path/to/your/stylesheet.css">
</head>
<body>
  <p>This text will use the custom font if it is available.</p>
</body>
</html>

确保替换https://www.yourserver.com/fonts/mycustomfont.ttf为你的字体文件实际的URL路径。这样，当页面加载时，字体将被下载并使用在包含font-family: 'MyCustomFont'的任何元素上。

- 阅读更多 -
CSS---flex布局
System
2024-08-10
所有,css

CSS的Flexbox（弹性盒子）布局提供了一种更灵活的方式来对容器内的项目进行排列、对齐和分配空间。

以下是一些基本的Flex布局样式和它们的作用：

  1. display: flex; - 这个属性会把一个容器指定为flex布局。其中的子元素（项目）会被视为flex项。
  2. flex-direction - 这个属性指定了flex项的方向。可以有四个值：row, row-reverse, column, column-reverse。
  3. justify-content - 这个属性用来控制flex项在主轴方向上的对齐方式。可以有五个值：flex-start, flex-end, center, space-between, space-around。
  4. align-items - 这个属性用来控制flex项在交叉轴方向上的对齐方式。可以有五个值：flex-start, flex-end, center, stretch, baseline。
  5. flex-wrap - 这个属性用来控制flex项在一条轴线上不能全部排列时，是否换行以及换行的方式。可以有三个值：nowrap, wrap, wrap-reverse。
  6. flex-flow - 这是flex-direction和flex-wrap的简写，默认值为row nowrap。

实例代码：




.container {
  display: flex; /* 使用flex布局 */
  flex-direction: row; /* 主轴方向为水平 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap; /* 如果项太多无法一行显示则换行 */
}
 
.item {
  flex: 1; /* 所有项目平分空间 */
  /* 或者指定flex项占用的空间比例 */
  /* flex: 2; 占据两倍的空间 */
}



<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

以上代码会创建一个水平居中、垂直居中并且可以换行的flex容器，其中的.item会平分容器的空间。

- 阅读更多 -
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
System
2024-08-10
所有,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 Buttons</title>
<style>
  .button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
  }
 
  .button span {
    position: absolute;
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 50%);
    animation: animateGradient 2s linear infinite;
    transition: all 0.5s;
  }
 
  .button:hover {
    background-color: #556270;
  }
 
  .button:hover span {
    width: 100%;
  }
 
  @keyframes animateGradient {
    0% {
      background-position: 0 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }
</style>
</head>
<body>
 
<button class="button"><span>Click Me</span></button>
 
</body>
</html>

这段代码展示了如何使用CSS创建一个带有炫酷渐变动画的按钮。当鼠标悬停在按钮上时，按钮背景色会变暗，同时内部的span元素会展开，产生一种光晕的视觉效果。这个示例也展示了CSS动画和CSS过渡的应用，以及如何通过HTML结构的简单修改来增加视觉效果。

- 阅读更多 -
使用Sass编写动态星空效果（css工程化的宏观认识）
System
2024-08-10
所有,css



// 定义一个宏，用于生成星星元素
@mixin star-generator($count: 1) {
  $star-size: 100px;
  $star-color: white;
  $star-position-range: 1000px;
 
  @for $i from 1 through $count {
    $random-size: random_range($star-size) ;
    $random-position-x: random_range($star-position-range) ;
    $random-position-y: random_range($star-position-range) ;
    $random-rotation: random_range(360deg);
    $random-scale: random_range(0.5, 1);
 
    .star-#{$i} {
      width: $random-size;
      height: $random-size;
      position: absolute;
      top: $random-position-x;
      left: $random-position-y;
      transform: rotate($random-rotation) scale($random-scale);
      background: $star-color;
      border-radius: 50%;
    }
  }
}
 
// 定义一个函数，用于生成指定范围内的随机数
@function random_range($max) {
  @return random(ceil($max));
}
 
// 使用宏生成10个星星元素
@include star-generator(10);

这段代码定义了一个Sass宏star-generator，它接受一个参数$count，表示要生成的星星数量。在宏的内部，使用了循环和随机函数来为每个星星生成随机的尺寸、位置、旋转角度和缩放比例。然后，它会根据这些随机属性生成相应的星星元素的CSS规则。最后，调用宏生成10个星星元素。这个例子展示了如何使用Sass的循环、随机函数和宏来创建复杂的动态样式。

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