1. 首页
  2. 标签
  3. css
02.体验CSS以及Bootstrap框架
System
2024-08-12
所有,css

以下是一个简单的HTML和CSS代码示例，展示了如何使用Bootstrap框架来创建一个响应式的导航栏。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Navbar Example</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
        </div>
    </nav>
 
    <!-- 引入Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

这段代码展示了如何使用Bootstrap预定义的类来创建一个响应式的导航栏。导航栏在较小的屏幕上会折叠，并且可以通过点击按钮展开。这是一个非常常见的用户界面模式，学习和理解它是如何工作的对于任何Web开发者来说都是重要的。

- 阅读更多 -
css文本超出处理
System
2024-08-12
所有,css

在CSS中，处理文本超出可以使用以下属性：

  1. text-overflow: 定义当文本超出包含它的元素时发生的情况。通常设置为ellipsis，这样超出的文本会显示为省略号(...)。
  2. white-space: 控制如何处理元素内的空白。设置为nowrap可以防止文本换行。
  3. overflow: 定义如何处理溢出容器的内容。设置为hidden可以隐藏溢出的内容，而scroll则会添加滚动条。
  4. word-wrap (或 overflow-wrap): 允许长单词或URL地址自动换行。

以下是一个简单的例子，展示了如何使用这些属性来处理文本超出：




.text-overflow {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 超出的文本显示为省略号 */
  width: 200px; /* 定义容器宽度 */
}
 
.word-wrap {
  overflow-wrap: break-word; /* 允许在长单词或URL内部换行 */
  width: 200px; /* 定义容器宽度 */
}



<div class="text-overflow">这是一段很长的文本，将会被截断并显示为省略号。</div>
<div class="word-wrap">这是一段包含非常长单词的文本，它会在容器宽度到达后自动换行。</div>

在这个例子中，.text-overflow 类使得文本在超出容器宽度时不换行，并且超出的部分被隐藏，显示为省略号。.word-wrap 类允许在单词或URL地址内部自动换行，以防止它们溢出容器。

- 阅读更多 -
从零搭建Vue3 + Typescript + Pinia + Vite + Tailwind CSS + Element Plus开发脚手架
System
2024-08-12
所有,css

以下是搭建一个使用Vue 3、Typescript、Pinia、Vite、Tailwind CSS和Element Plus的项目的步骤：

  1. 确保你已经安装了Node.js和npm。

  2. 安装或升级Vue CLI到最新版本：

    


npm install -g @vue/cli

  3. 创建一个新的Vue 3项目：

    


vue create my-vue3-project

    在提示选择预设时，选择“Manually select features”。然后选择“TypeScript”、“Progressive Web App (PWA) Support”、“Vue Router”、“Vuex”和“CSS Pre-processors”（确保选择Tailwind CSS）。

  4. 安装Pinia：

    


cd my-vue3-project
vue add pinia

  5. 集成Vite：

    


npm uninstall vue-cli-service
npm install vite

    修改package.json中的scripts部分：

    


"scripts": {
  "serve": "vite",
  "build": "vite build",
  "lint": "vue-tsc --noEmit && eslint --ext .js,.vue,.ts,.tsx --fix"
}

  6. 安装Tailwind CSS：

    


npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

    修改tailwind.config.js以包含正确的路径。

  7. 安装Element Plus：

    


npm install element-plus

  8. 在main.ts中引入Element Plus和Tailwind CSS：

    


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

  9. 运行项目：

    


npm run serve

这样，你就拥有了一个基于Vue 3、使用Typescript、Pinia、Vite、Tailwind CSS和Element Plus的开发脚本。

- 阅读更多 -
WebKit的文本排版艺术：探索CSS中的高级排版特性
System
2024-08-12
所有,css



/* 设置基本的段落样式 */
p {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}
 
/* 使用伪元素添加上标注 */
p:before {
  content: "[" counter(section) "] ";
  counter-increment: section;
}
 
/* 为段落添加水平线 */
p:after {
  content: "";
  display: block;
  width: 100%;
  margin-top: 5px;
  border-top: 1px solid #ccc;
}
 
/* 设置文本的水平对齐方式 */
p.text-left {
  text-align: left;
}
 
p.text-center {
  text-align: center;
}
 
p.text-right {
  text-align: right;
}
 
/* 设置首行缩进 */
p.indent {
  text-indent: 2em;
}
 
/* 设置字间距 */
p.letter-spacing {
  letter-spacing: 2px;
}
 
/* 设置单词间距 */
p.word-spacing {
  word-spacing: 5px;
}
 
/* 设置文本转换 */
p.text-transform {
  text-transform: uppercase; /* 可以是 'uppercase', 'lowercase', 'capitalize' */
}
 
/* 设置文本装饰 */
p.text-decoration {
  text-decoration: underline; /* 可以是 'underline', 'overline', 'line-through', 'none' */
}
 
/* 设置文本阴影 */
p.text-shadow {
  text-shadow: 2px 2px 2px #aaa;
}
 
/* 设置空白字符的处理方式 */
p.white-space {
  white-space: nowrap; /* 可以是 'normal', 'pre', 'nowrap' */
}

这段代码展示了如何使用CSS来增强段落的视觉效果，包括添加编号、水平线、对齐方式、缩进、字母、单词间距、大小写转换、文本装饰、阴影以及空白字符处理等特性。这些技术可以应用于网页设计中，以提升文本的可读性和吸引力。

- 阅读更多 -
Tailwind CSS Vs Bootstrap 区别，其实大差不差
System
2024-08-12
所有,css

Tailwind CSS 和 Bootstrap 是两种不同的CSS框架，它们各自有自己的优点和使用场景。

Tailwind CSS:

  • 优点：提供实用性的实用程序类，可以快速构建复杂的设计，无需编写大量的自定义CSS代码。
  • 缺点：如果过度使用，可能会导致CSS文件体积过大。

Bootstrap:

  • 优点：提供了一套完整的UI组件，包括布局、表单、按钮、导航等，使得开发快速且一致性好。
  • 缺点：其预定义的样式可能不适合所有设计，并且它是一个全包装解决方案，可能不适合只需要一部分功能的项目。

实际上，这两个框架的差异很小，主要取决于你的偏好和项目需求。例如，一些开发者更喜欢Tailwind CSS的灵活性，而另一些开发者则更喜欢Bootstrap提供的预制组件。

如果你正在决定使用哪一个，你可以考虑以下因素：

  • 你的项目规模和复杂性。
  • 你是否需要一个完整的UI组件库。
  • 你是否愿意编写或者依赖于实用程序类。
  • 你的设计偏好和团队的技术能力。

最终，你可能会发现这两个框架并没有明显的区别，关键在于你如何使用它们。

- 阅读更多 -
[css] flex 子元素自动撑开父元素宽度
System
2024-08-12
所有,css

在CSS中，如果你想要让一个flex子元素自动撑开其父元素的宽度，你可以确保父元素是一个flex容器，并且子元素没有设置宽度或者是自动的（默认值）。

以下是实现这一效果的基本CSS代码：




.parent {
  display: flex; /* 将父元素设置为flex容器 */
}
 
.child {
  /* 子元素不需要特别设置，默认会自动撑开 */
}

HTML结构如下：




<div class="parent">
  <div class="child">
    <!-- 子元素内容 -->
  </div>
</div>

在这个例子中，.parent 是一个flex容器，.child 是其子元素。由于.child没有设置特定的宽度，它会自动撑开至与父元素相同的宽度。

- 阅读更多 -
探索CSS中的宽度设置：width: 100% 与 width: auto 的区别
System
2024-08-12
所有,css

width: 100% 和 width: auto 是CSS中设置元素宽度的两种常见方式。

  • width: 100%: 这会将元素的宽度设置为其父元素的宽度，即元素会扩展以填充其父元素的宽度。
  • width: auto: 这是默认值。它表示让浏览器自动计算元素的宽度。如果不设置任何宽度，元素通常会占据足够的空间来显示其内容。

示例代码:

HTML:




<div class="parent">
  <div class="child-full">100% 宽度</div>
  <div class="child-auto">自动 宽度</div>
</div>

CSS:




.parent {
  width: 300px; /* 父元素的宽度设置为300像素 */
  background-color: lightblue;
}
 
.child-full {
  width: 100%; /* 子元素的宽度设置为100%，即300像素 */
  background-color: salmon;
}
 
.child-auto {
  width: auto; /* 子元素宽度保持默认值，根据内容自动计算 */
  background-color: lightgreen;
}

在这个例子中，.child-full 类使得子元素的宽度完全填充其父元素的宽度，即300像素。而 .child-auto 类则让子元素的宽度根据其内容自动计算。如果子元素中没有内容，它们将不会占据任何宽度，除非设置了 min-width 属性。

- 阅读更多 -
vue3 学习笔记03 -- scss的使用
System
2024-08-12
所有,css

在Vue 3中使用SCSS，首先需要确保你的项目配置了对SCSS的支持。以下是如何在Vue 3项目中使用SCSS的步骤：

  1. 安装依赖：



npm install -D sass-loader sass
  1. 在.vue文件中使用SCSS：



<template>
  <div class="example">Hello, SCSS!</div>
</template>
 
<script setup>
// JavaScript代码
</script>
 
<style lang="scss">
.example {
  color: blue;
  font-size: 20px;
  &:hover {
    color: red;
  }
}
</style>

以上代码演示了如何在Vue 3组件中嵌入SCSS样式。lang="scss"属性指定了该<style>标签中的语言是SCSS。在SCSS中，.example类定义了一个蓝色的文本和一个当鼠标悬停时变红的效果。这样就可以在Vue 3项目中使用SCSS了。

- 阅读更多 -
深入理解CSS基础【代码审计实战指南】
System
2024-08-12
所有,css

由于提供的代码段已经是一个很好的示例，我们可以直接使用它来说明如何审计CSS代码。以下是一个针对这段代码的简单审计过程：




/* 审计前的CSS代码 */
body {
  font-family: 'Open Sans', sans-serif;
  background-color: #f8f8f8;
  color: #333;
}
 
h1 {
  font-size: 2em;
  margin: 0;
  font-weight: bold;
}
 
a {
  text-decoration: none;
  color: #333;
}
 
/* 审计后的CSS代码 */
body {
  font-family: 'Open Sans', sans-serif;
  background-color: #f8f8f8;
  color: #333;
  line-height: 1.5; /* 添加了行高 */
}
 
h1 {
  font-size: 2em; /* 保持不变 */
  margin: 0; /* 保持不变 */
  font-weight: bold; /* 保持不变 */
  color: #333; /* 保持不变 */
}
 
a {
  text-decoration: none; /* 保持不变 */
  color: #333; /* 保持不变 */
}

在这个例子中，我们对body标签添加了line-height属性以提高可读性。对于h1和a标签，由于它们本身没有需要修改的地方，因此代码保持不变。这个过程展示了如何审计现有的CSS规则，并根据需要进行调整以提高代码质量。

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