Tech Blog

2024-08-13

在CSS中，可以使用text-overflow属性来实现当文本内容超出指定宽度时显示省略号。同时，需要设置white-space属性为nowrap以防止文本自动换行，以及overflow属性为hidden以隐藏超出容器的文本。

下面是一个简单的例子：




.ellipsis {
  width: 200px; /* 指定宽度 */
  white-space: nowrap; /* 防止自动换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 使用省略号 */
}




<div class="ellipsis">
  这是一段很长的文本内容，当超出指定宽度时，希望显示省略号。
</div>

在这个例子中，.ellipsis类应用于一个div元素，当内容超出200px宽度时，会在末尾显示省略号。

- 阅读更多 -

CSS transition（过渡效果）详解

System

2024-08-13

所有,css

CSS transition 属性用于设置一个属性的过渡效果。它可以让属性的变化在一定的时间内平滑地进行。

基本语法：




transition: property duration timing-function delay;

property：定义应用过渡效果的 CSS 属性名称。
duration：定义过渡效果花费的时间长度。
timing-function：定义过渡效果的速度曲线，默认为 "ease"。
delay：定义过渡效果何时开始，默认是 0，即立即开始。

示例代码：




div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s ease-in-out;
}
 
div:hover {
  width: 200px;
}

在上述例子中，当鼠标悬停在 div 上时，它的宽度会在 1 秒内从 100px 平滑过渡到 200px，速度曲线为 "ease-in-out"。

- 阅读更多 -

5. Tailwind CSS 响应式设计的实现

System

2024-08-13

所有,css




/* 使用Tailwind CSS实现响应式布局 */
 
/* 基本的布局样式 */
.container {
  @apply max-w-screen-xl mx-auto;
}
 
/* 在不同屏幕尺寸下应用不同的container宽度比例 */
.container-md {
  @apply max-w-screen-md;
}
 
.container-lg {
  @apply max-w-screen-lg;
}
 
.container-xl {
  @apply max-w-screen-xl;
}
 
/* 使用Tailwind CSS的display和flex相关类来实现响应式的网格系统 */
.grid-container {
  @apply flex flex-wrap;
}
 
.grid-item {
  @apply w-full sm:flex-1 md:w-1/2 lg:w-1/3 xl:w-1/4;
}
 
/* 使用Tailwind CSS的screens函数和min-w-0和h-full类实现响应式内容填充 */
.responsive-content {
  @apply min-w-0 h-full;
  @screen sm {
    @apply mt-4;
  }
}
 
/* 使用Tailwind CSS的utilities实现响应式的边距和填充 */
.responsive-padding {
  @apply p-4 sm:p-6 lg:p-8 xl:p-10;
}
 
.responsive-margin {
  @apply mb-4 sm:mb-6 lg:mb-8 xl:mb-10;
}

这个例子展示了如何使用Tailwind CSS的实用工具类来创建一个响应式的布局。通过定义不同的容器类和网格选项，开发者可以根据屏幕尺寸来调整布局的宽度和列的数量。同时，使用Tailwind CSS的屏幕函数特性，可以在不同屏幕尺寸下应用不同的样式规则。

- 阅读更多 -

前端重学笔记-CSS篇-01

System

2024-08-13

所有,css




/* 导入字体图标库 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 包括边框和内边距在元素宽高内 */
}
 
body {
  font-family: 'Roboto', sans-serif; /* 设置默认字体 */
  background-color: #F7F7F7; /* 背景色设置为浅灰色 */
  color: #333; /* 字体颜色设置为深灰色 */
  overflow: hidden; /* 隐藏默认滚动条，后续如果有滚动条则特别设置 */
}
 
/* 清除浮动 */
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}
 
/* 设置图标库使用范围，避免影响其他元素 */
#root,
#root * {
  font-family: 'Material Icons'; /* 指定字体库为图标库 */
}
 
/* 设置图标库的字体显示大小 */
#root .material-icons {
  font-size: 24px; /* 设置图标字体大小 */
  vertical-align: middle; /* 垂直对齐方式为中间 */
  user-select: none; /* 禁止文字被选中 */
}
 
/* 设置图标库图标的默认颜色 */
#root .material-icons.inactive {
  color: #999; /* 设置图标颜色为浅灰色 */
}

这段代码设置了基本的CSS规则，包括字体导入、全局样式、清除浮动、图标库的使用和字体样式设置。这对于理解如何在前端项目中整合和设计CSS样式非常有帮助。

- 阅读更多 -

HTML CSS JS 网页设计作业「我的家乡吉林」

System

2024-08-13

所有,css

以下是一个简单的HTML和CSS示例，用于创建一个包含吉林省基本信息的网页。JavaScript在此处不是必需的，因为我们只是在展示静态内容。




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吉林省</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .header {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            text-align: center;
        }
        .content {
            padding: 20px;
        }
        img {
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>吉林省</h1>
    </div>
    <div class="content">
        <p>吉林，省份位于中国东北部，地处黄土高原东部，长江下游，沿岸是大东海。吉林省是中国面积最大的省份之一，也是中国最大的碳碳排放来源之一。</p>
        <img src="吉林省地图.jpg" alt="吉林省地图">
        <p>吉林省的气候以亚热带为主，冬季寒冷，夏季炎热。省内有“四大明珠”之称的吉林明珠、长春明珠、四平明珠和延边明珠。</p>
        <p>主要农作物有大麦、小麦、大麦、大麦等，吉林羊毛和吉林豆腐是省份的重要经济作物。</p>
    </div>
</body>
</html>

这个示例中，我们定义了一个简单的HTML结构，包括页面标题和内容。CSS用于提供页面的视觉样式，包括颜色、字体和页面布局。我们还包括了一个图片元素，展示吉林省的地图。这个示例假设你有吉林省的地图图片，并且正确地放置在网页可以访问的位置。

- 阅读更多 -

CSS04-Flex布局

System

2024-08-13

所有,css

CSS的Flex布局是一种灵活的布局模型，可以用来创建一个活动的、灵活的、响应式的布局。它可以使你的布局有着不同的方向，能够改变项目的顺序，以及其他的布局功能。

以下是一些使用CSS Flex布局的方法：

创建一个Flex容器：




.container {
  display: flex;
}

设置Flex项目在容器中的方向：




.container {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
}

设置Flex项目在容器中的对齐方式：




.container {
  display: flex;
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

设置Flex项目在交叉轴上的对齐方式：




.container {
  display: flex;
  align-items: flex-start | flex-end | center | baseline | stretch;
}

设置Flex项目在容器主轴上的排序：




.item {
  order: <integer>; /* 默认是0 */
}

设置Flex项目在容器交叉轴上的对齐方式：




.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

设置Flex项目的放大比例：




.item {
  flex-grow: <number>; /* 默认是0 */
}

设置Flex项目的缩放比例：




.item {
  flex-shrink: <number>; /* 默认是1 */
}

设置Flex项目的固定大小：




.item {
  flex-basis: <length> | auto; /* 默认是auto */
}

以上就是一些使用CSS Flex布局的基本方法，你可以根据自己的需求来使用它们。

- 阅读更多 -

【前端｜CSS系列第3篇】CSS盒模型、浮动及定位

System

2024-08-13

所有,css




/* 设置元素的盒模型类型为border-box，这样元素的宽高就是内容、内边距和边框的总和 */
.box {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}
 
/* 清除元素的浮动，防止浮动影响其他元素布局 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
 
/* 绝对定位元素，并设置其相对于最近的已定位祖先元素的偏移 */
.positioned {
  position: absolute;
  top: 10px;
  right: 20px;
}
 
/* 相对定位元素，并设置其相对于其正常位置的偏移 */
.relative {
  position: relative;
  bottom: 5px;
  left: 15px;
}
 
/* 固定定位元素，始终相对于浏览器窗口进行定位 */
.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}
 
/* 固定宽度的元素，适合小型设备屏幕 */
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
 
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
 
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
 
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
 
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

这个CSS样例展示了如何使用CSS设置盒模型、清除浮动、绝对定位、相对定位和固定定位，并构建一个响应式的容器类，适用于不同的屏幕尺寸。这些技术是前端开发中的基本知识点，对于学习前端开发的开发者来说具有重要意义。

- 阅读更多 -

CSS：选择器 / 14种类型

System

2024-08-13

所有,css

CSS 选择器是用于选择页面中特定元素的规则。CSS 提供了多种选择器类型，包括基础的标签选择器、类选择器、ID 选择器等，还有更高级的属性选择器、伪类选择器和伪元素选择器。

以下是一些常用的 CSS 选择器类型及其简单示例：

标签选择器（Element Selector）：选择特定类型的所有元素。




p { color: blue; } /* 所有段落文本变蓝色 */

类选择器（Class Selector）：选择所有具有特定 class 名称的元素。




.my-class { background-color: yellow; } /* 所有 class 包含 "my-class" 的元素背景变黄色 */

ID 选择器（ID Selector）：选择具有特定 ID 的单个元素。




#my-id { color: red; } /* ID 为 "my-id" 的元素文本变红色 */

属性选择器（Attribute Selector）：选择包含特定属性或属性值的元素。




input[type="text"] { background-color: lightblue; } /* 所有文本输入框背景变浅蓝色 */

伪类选择器（Pseudo-class Selector）：选择特定状态的元素，如：链接的不同状态。




a:hover { color: red; } /* 鼠标悬停在链接上时文本变红色 */

伪元素选择器（Pseudo-element Selector）：选择元素的一部分内容。




p::first-letter { font-size: 200%; } /* 段落文本的首字母字体大小变为200% */

子选择器（Child Selector）：选择指定父元素的直接子元素。




ul > li { color: green; } /* 无序列表的直接子元素 <li> 文本变绿色 */

相邻选择器（Adjacent Sibling Selector）：选择紧跟在另一个元素后的元素，且两者有相同父元素。




h1 + p { margin-top: 0; } /* 紧跟在 <h1> 后的 <p> 段落的上边距设置为0 */

后代选择器（Descendant Selector）：选择指定父元素的后代（不仅限于子元素）。




div p { color: purple; } /* <div> 元素内的所有 <p> 段落文本变紫色 */

通配选择器（Universal Selector）：选择页面中的所有元素。




* { margin: 0; padding: 0; } /* 所有元素的外边距和内边距设置为0 */

群组选择器（Grouping Selector）：将选择器组合在一起，选择这些组合中的任意一个。




h1, h2, h3 { font-family: "Times New Roman", Times, serif; } /* 所有 <h1>、<h2> 和 <h3> 使用 "Times New Roman" 字体 */

伪元素选择器（::before 和 ::after）：用于向元素的内容前后添加内容或者样式。




p::before { content: ">> "; } /* 所有 <p> 段落文本前添加 ">> " */

伪类选择器（:link、:visited、:hover、:active 和 :focus）：用于选择不同

- 阅读更多 -

不要图片？CSS实现圆角边框渐变色+背景透明

System

2024-08-13

所有,css




.box {
  /* 设置边框宽度和颜色 */
  border: 2px solid #00FFFF;
 
  /* 设置圆角 */
  border-radius: 10px;
 
  /* 设置背景渐变色 */
  background: linear-gradient(to right, #FFC107, #FF5722);
 
  /* 设置透明度 */
  opacity: 0.8;
}

这段代码展示了如何使用CSS为元素添加圆角、边框、渐变背景色，并调整透明度。border-radius属性设置圆角的大小，border属性定义了边框的宽度和颜色，background属性用来创建一个从左到右的线性渐变色，而opacity属性用于调整元素的透明度。

- 阅读更多 -

CSS绘制圆弧

System

2024-08-13

所有,css

在CSS中，我们可以使用border-radius属性来创建圆弧，但这是创建完整圆形的半径。如果你想要创建一个圆弧，即一个圆形中的一部分，你需要使用一个元素，并使用transform属性来旋转它。

以下是一个示例，它创建了一个圆弧：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Draw Arc</title>
<style>
  .arc {
    width: 100px;
    height: 50px;
    background-color: #3498db;
    border-top-left-radius: 100px 25px;
    border-bottom-left-radius: 100px 25px;
    transform-origin: center right;
    transform: rotate(-90deg);
    position: relative;
    left: 100px;
  }
</style>
</head>
<body>
 
<div class="arc"></div>
 
</body>
</html>

在这个例子中，.arc 类创建了一个宽度为100px，高度为50px的矩形。我们使用border-top-left-radius和border-bottom-left-radius属性来创建一个圆弧的形状，这里的圆弧半径为100px和25px。然后我们使用transform-origin和transform属性将圆弧旋转-90度，从而形成一个弧形。

这只是一个简单的例子，你可以根据需要调整尺寸、颜色和旋转的角度来创建不同的圆弧。

- 阅读更多 -