分类 css 下的文章

2024-08-09

前端未死，只是发生了变化。Bootstrap是一款流行的前端框架，它提供了一套响应式布局系统，包括CSS样式和一系列组件，用于快速开发Web界面。

如果你想使用Bootstrap进行开发，你可以按照以下步骤操作：

引入Bootstrap CSS文件：




<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

引入Bootstrap JavaScript插件（可选，视组件需要而定）：




<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

使用Bootstrap的CSS类和组件来构建页面：




<div class="container">
  <h1>Bootstrap 示例</h1>
  <button type="button" class="btn btn-primary">按钮</button>
</div>

以上是一个简单的Bootstrap使用示例。你可以通过添加更多的HTML标签和Bootstrap提供的类来定制页面的布局和样式。

请注意，Bootstrap版本会更新，因此CDN链接中的版本号可能会变化。始终参考最新的官方文档以获取最新的链接。

- 阅读更多 -

CSS中使用变量的两个函数var和calc

System

2024-08-09

所有,css

在CSS中，我们可以使用变量来存储值，这些变量可以是静态的或动态的。我们可以使用两种不同的函数来创建和使用这些变量：var() 和 calc()。

var() 函数

var() 函数用于引用自定义的属性，也就是所谓的 CSS 变量。这些变量可以在各个 CSS 文件之间进行共享，也可以在运行时通过 JavaScript 进行更改。

例如，我们可以在 :root 选择器中定义一个全局变量，然后在整个文档中引用它。




:root {
  --main-bg-color: coral;
}
 
body {
  background-color: var(--main-bg-color);
}

calc() 函数

calc() 函数用于在值之间进行数学运算。这些值可以是任何长度单位、百分比或者任何 CSS 支持的数学运算。

例如，我们可以将元素的宽度设置为视窗宽度的一半，减去一些固定的边距。




div {
  width: calc(50vw - 20px);
}

注意：CSS变量（也称为CSS自定义属性）是在CSS中声明的，而var() 函数用于引用这些变量。而calc() 函数用于在运行时进行数学运算以得出值。

- 阅读更多 -

HTML+CSS之盒子模型（CSS重点）（part08）

System

2024-08-09

所有,css

在HTML和CSS中，盒子模型是一个非常重要的概念，它定义了如何显示元素以及它们之间的相互作用。CSS盒模型包括内容区域（content）、填充区域（padding）、边框区域（border）和外边距区域（margin）。

以下是CSS盒子模型的一个简单示例：

HTML:




<div class="box">Box Content</div>

CSS:




.box {
  width: 300px;            /* 内容宽度 */
  padding: 20px;           /* 填充 */
  border: 5px solid black; /* 边框 */
  margin: 10px;            /* 外边距 */
  background-color: lightblue; /* 背景颜色 */
}

在这个例子中，.box 类定义了一个300像素宽的内容区域，带有10像素的外边距，5像素的边框，以及20像素的填充。这个盒子模型的总宽度将是：

300px (内容宽度) + 20px (左右填充) + 10px (左右边框) + 10px (左右外边距) = 360px

同样，盒子模型的总高度将是内容高度、填充、边框和外边距的总和。

这个概念对于网页设计是非常基础且重要的，因此有必要深入理解并熟练应用。

- 阅读更多 -

CSS速通

System

2024-08-09

所有,css

CSS速通是一种快速学习CSS（层叠样式表）的方法，它旨在帮助开发者理解CSS的核心概念，如盒模型、选择器、属性等。

以下是一些关键概念的简要说明和示例代码：

选择器：用于选择页面上的元素。




/* 选择所有的段落 */
p {
  color: blue;
}
 
/* 选择ID为"header"的元素 */
#header {
  background-color: yellow;
}
 
/* 选择所有的类名为"highlight"的元素 */
.highlight {
  font-weight: bold;
}

属性：用于定义元素的样式。




/* 设置元素的宽度和高度 */
div {
  width: 100px;
  height: 100px;
}
 
/* 设置文本的字体大小和颜色 */
p {
  font-size: 16px;
  color: red;
}

盒模型：理解如何控制元素的大小和布局。




/* 设置元素的边距和填充 */
div {
  margin: 10px;
  padding: 20px;
}
 
/* 盒子模型的边框 */
div {
  border: 1px solid black;
}

布局：使用不同的CSS属性来安排元素的位置。




/* 浮动元素 */
img {
  float: left;
}
 
/* 定位元素 */
div {
  position: relative;
  top: 10px;
}

继承：了解哪些CSS属性是可以从父元素继承的。




/* 字体属性通常会被继承 */
body {
  font-family: Arial, sans-serif;
}

优先级：理解如何确定哪些规则具有更高的优先级。




/* 内联样式具有最高优先级 */
<p style="color: red;">This is a paragraph.</p>

媒体查询：响应式设计，根据屏幕大小应用不同的样式。




/* 屏幕宽度小于600px时，背景变为蓝色 */
@media screen and (max-width: 600px) {
  body {
    background-color: blue;
  }
}

CSS速通不仅仅是记忆这些代码片段，而是理解它们是如何相互作用以创建网页的样式。实践是最好的学习方式，通过编写和调试CSS代码来提升理解。

System

2024-08-09

所有,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>
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 600px;
    margin: auto;
  }
  .item {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease;
  }
  .item:hover {
    transform: scale(1.1);
  }
</style>
</head>
<body>
 
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>
 
</body>
</html>

这个代码实例展示了如何使用CSS Grid布局创建一个简单的九宫格图片列表，并通过CSS的hover伪类实现鼠标悬停时图片的缩放效果。这是一个简洁而高效的实现方式，适用于教育目的展示基础的前端技术。

- 阅读更多 -

CSS 实现电影信息卡片

System

2024-08-09

所有,css




/* 电影卡片容器样式 */
.movie-card {
  width: 220px;
  margin: 10px;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  overflow: hidden;
}
 
/* 电影卡片标题样式 */
.movie-card .title {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 0 10px;
  color: #333;
}
 
/* 电影卡片信息样式 */
.movie-card .info {
  margin: 0 10px 10px;
  color: #666;
}
 
/* 电影卡片评分样式 */
.movie-card .rating {
  display: flex;
  align-items: center;
  margin: 0 10px 10px;
}
 
/* 电影卡片评分数字样式 */
.movie-card .rating .score {
  margin-right: 5px;
  color: #ffc107;
}
 
/* 电影卡片海报图片样式 */
.movie-card .poster {
  width: 100%;
  height: 300px;
  background-size: cover;
  background-position: center;
}
 
/* 应用到HTML结构的样式 */
<div class="movie-card">
  <div class="title">电影标题</div>
  <div class="info">
    <span>上映日期: </span><span>2023-04-01</span>
  </div>
  <div class="rating">
    <span class="score">9.5</span><span> / 10</span>
  </div>
  <div class="poster" style="background-image: url('movie-poster-url');"></div>
</div>

这个代码实例展示了如何使用CSS创建一个电影卡片的基本样式。它包括了一个电影卡片的宽度、边框、阴影、圆角、内边距和背景样式。同时，它还展示了如何使用flexbox进行布局，以及如何应用背景图片。这个例子简洁明了，并且注重实用性，是学习CSS布局和样式设计的一个很好的起点。

- 阅读更多 -

CSS如果实现文本超出一行或多行时显示省略号...

System

2024-08-09

所有,css

在CSS中，可以使用以下属性来实现超出文本的情况下显示省略号：

text-overflow: ellipsis; 用于超出容器宽度的文本显示省略号。
white-space: nowrap; 确保文本不会换行。
overflow: hidden; 超出容器的文本部分将被隐藏。

以下是一个简单的例子，演示如何在一行文本超出容器宽度时显示省略号：




.ellipsis {
  width: 200px; /* 定义容器宽度 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}




<div class="ellipsis">
  这是一段很长的文本，需要在超出容器宽度时显示省略号...
</div>

如果需要在多行文本超出后显示省略号，可以使用以下方法：

-webkit-line-clamp 属性（非标准属性，但在大多数浏览器中得到支持）用于指定元素的最大行数。
display: -webkit-box; 和 -webkit-box-orient: vertical; 属性用于实现超出部分的隐藏。




.multi-line-ellipsis {
  display: -webkit-box; /* 使用弹性盒子布局模型 */
  -webkit-box-orient: vertical; /* 垂直排列子元素 */
  -webkit-line-clamp: 3; /* 限制在三行内 */
  overflow: hidden; /* 隐藏超出的内容 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  width: 200px; /* 定义容器宽度 */
}




<div class="multi-line-ellipsis">
  这是一段很长的文本，需要在超出容器宽度时显示省略号...
</div>

请注意，-webkit-line-clamp 属性是一个不是标准的CSS属性，它在一些非WebKit的浏览器中可能不受支持。

- 阅读更多 -

CSS全局样式的设置，【建议收藏】

System

2024-08-09

所有,css

CSS全局样式设置可以通过创建一个全局样式文件来实现，这个文件会被项目中的所有组件共享。以下是一个简单的CSS样式文件示例，它设置了基本的全局样式，如字体、颜色、边距和填充：




/* 全局样式文件 global.css */
 
/* 设置基本字体和字体大小 */
body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #333; /* 基本文本颜色 */
}
 
/* 设置标题字体和颜色 */
h1, h2, h3 {
  font-family: 'Roboto', sans-serif;
  color: #555;
}
 
/* 设置边距和填充的全局样式 */
.m-t-0 {
  margin-top: 0 !important; /* 上边距0 */
}
 
.m-b-10 {
  margin-bottom: 10px !important; /* 下边距10px */
}
 
.p-l-15 {
  padding-left: 15px !important; /* 左填充15px */
}
 
.p-r-20 {
  padding-right: 20px !important; /* 右填充20px */
}
 
/* 更多全局样式 */

在你的入口文件或者主样式文件中引入这个全局样式文件，确保它是被加载的第一个样式文件：




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="path/to/global.css">
</head>
<body>
  <!-- 你的应用内容 -->
</body>
</html>

这样，你的应用中所有的组件都会默认使用这些全局样式，你可以在每个组件内部根据需要覆盖这些全局样式。

- 阅读更多 -

【前端 02】新浪新闻项目-初步使用CSS来排版

System

2024-08-09

所有,css




/* 设置新闻列表的外层容器样式 */
.news-list {
    width: 960px;
    margin: 0 auto; /* 水平居中 */
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}
 
/* 设置新闻列表项的样式 */
.news-item {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
 
/* 设置新闻列表项的标题样式 */
.news-item h2 {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 5px;
}
 
/* 设置新闻列表项的来源和发布时间样式 */
.news-item .source,
.news-item .time {
    color: #999;
    font-size: 14px;
}
 
/* 设置新闻列表项的摘要样式 */
.news-item .summary {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

这段CSS代码为新浪新闻列表定义了基本的排版样式，包括外层容器、列表项、标题、来源/时间和摘要的字体大小、颜色和行高。这样的样式定义使得页面的内容更加美观和易读。

- 阅读更多 -

原生html+js+css添加购物车效果

System

2024-08-09

所有,css

要在原生HTML、JS和CSS中添加购物车效果，你可以创建一个简单的购物车界面，并且使用JavaScript来处理添加商品到购物车的逻辑。以下是一个简单的例子：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart Example</title>
<style>
  .cart { border: 1px solid #eee; width: 300px; margin: 20px; padding: 10px; }
  .cart-item { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
  .cart-item-remove { cursor: pointer; }
</style>
</head>
<body>
 
<h1>Product List</h1>
 
<div class="product" data-price="99" data-name="Product 1">
  <button class="add-to-cart">Add to Cart</button>
  Product 1 - $99
</div>
 
<div class="product" data-price="199" data-name="Product 2">
  <button class="add-to-cart">Add to Cart</button>
  Product 2 - $199
</div>
 
<div class="cart">
  <h2>Shopping Cart</h2>
  <div class="cart-items"></div>
</div>
 
<script>
  let cartItems = document.querySelector('.cart-items');
 
  // Event listener for adding to cart
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.add-to-cart').forEach(button => {
      button.addEventListener('click', event => {
        let product = event.target.parentNode;
        addToCart(product);
      });
    });
  });
 
  // Function to add product to cart
  function addToCart(product) {
    let price = product.dataset.price;
    let name = product.dataset.name;
 
    // Create cart item element
    let cartItem = document.createElement('div');
    cartItem.classList.add('cart-item');
    cartItem.innerHTML = `<span>${name} - $${price}</span> <button class="cart-item-remove" data-name="${name}">Remove</button>`;
 
    // Event listener for removing from cart
    cartItem.querySelector('.cart-item-remove').addEventListener('click', function() {
      removeFromCart(this.dataset.name);
    });
 
    // Add cart item to cart
    cartItems.appendChild(cartItem);
  }
 
  // Function to remove product from cart
  function removeFromCart(name) {
    cartItems.querySelectorAll('.cart-item').forEach(item => {
      if(item.textContent.includes(name)) {
        cartItems.removeChild(item);
      }
    });
  }
</script>
 
</body>
</html>

这个例子中，我们有一个产品列表，每个产品都有一个"Add to Cart"按钮。当按钮被点击时，产品信息会被添加到购物车中，显示在页面底部的<div class="cart-items"></div>区域。每个购物车中的条目都有一个"Remove"按钮，点击后会将该产品从购物车中移除。这个例子使用了HTML5的data-*属性来存储产品的价格和名称，这些数据可以

- 阅读更多 -