分类 css 下的文章

2024-08-14

CSS弹性布局（Flexible Layout）是一种现代化的布局方式，可以简便高效地创建复杂的布局结构。

以下是一个简单的弹性布局示例，创建一个水平居中的容器，其中包含三个子元素，每个子元素都会自动伸缩以填满可用空间：




<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex; /* 指定为弹性布局 */
  justify-content: center; /* 水平居中子元素 */
}
 
.flex-item {
  flex: 1; /* 子元素均匀伸缩 */
  padding: 10px;
  margin: 5px;
  background-color: lightblue;
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item">子元素 1</div>
  <div class="flex-item">子元素 2</div>
  <div class="flex-item">子元素 3</div>
</div>
 
</body>
</html>

在这个例子中，.flex-container 类使用 display: flex 属性将容器指定为弹性布局。.flex-item 类使用 flex: 1 属性使得每个子元素可以自动伸缩，平分容器的水平空间。justify-content: center 属性确保子元素水平居中。

System

2024-08-14

所有,css

在移动端适配中，我们通常使用媒体查询和相关CSS单位来实现响应式布局。以下是一些关键点和示例代码：

媒体查询：




/* 针对不同屏幕宽度的样式 */
@media screen and (max-width: 320px) {
    body {
        background-color: blue;
    }
}
 
@media screen and (min-width: 321px) and (max-width: 768px) {
    body {
        background-color: green;
    }
}
 
@media screen and (min-width: 769px) {
    body {
        background-color: red;
    }
}

CSS单位：
- px：像素，是固定单位，不适应不同的设备。
- em：相对于父元素的字体大小，容易造成层级复杂度。
- rem：相对于根元素的字体大小，是现代响应式布局的首选单位。
- %：百分比，相对于父元素，适合宽度设置。
- vw/vh：视口宽度/高度的百分比，适合宽度和高度设置。
- vmin/vmax：视口宽度和高度中较小/较大的那个百分比，适合图片和背景。
设备像素比(Device Pixel Ratio, DPR)：
- CSS中可以用1px等同于1dp(设备像素)，在高分辨率设备上会出现问题。
- 可以用window.devicePixelRatio获取DPR，进行适配。
像素密度(Pixels Per Inch, PPI)：
- 用于衡量屏幕的密度，可以通过window.screen.width / window.screen.height和屏幕物理尺寸结合使用。
视口(Viewport)：
- 为了使网站在移动端上正常显示，需要设置<meta name="viewport"标签。
- 例如：<meta name="viewport" content="width=device-width, initial-scale=1.0">
使用calc()函数结合媒体查询进行布局调整：




.container {
    width: calc(100% - 20px); /* 计算宽度 */
    font-size: 16px; /* 默认字体大小 */
}
 
@media screen and (min-width: 321px) {
    .container {
        width: calc(100% - 25px); /* 根据屏幕宽度调整 */
        font-size: 18px; /* 增加字体大小 */
    }
}
 
@media screen and (min-width: 769px) {
    .container {
        width: calc(100% - 30px); /* 更大屏幕宽度调整 */
        font-size: 20px; /* 进一步增加字体大小 */
    }
}

综上，移动端适配主要是通过媒体查询、CSS单位、设备像素比和视口管理来实现不同屏幕大小的适配。通过这些技术，开发者可以创建出在各种移动设备上都能保持良好用户体验的网页。

- 阅读更多 -

css实现向下的小箭头

System

2024-08-14

所有,css

在CSS中，可以使用伪元素和边框来创建向下的小箭头。以下是一个示例代码：




.arrow-down {
  position: relative;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black; /* 改变颜色可以改变箭头颜色 */
}
 
/* 可选：为小箭头添加阴影效果 */
.arrow-down::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, transparent, black, transparent);
}

HTML部分：




<div class="arrow-down"></div>

这段代码会创建一个向下的小箭头，你可以通过调整border-left和border-right的大小来改变小箭头的宽度，调整border-top的大小来改变小箭头的高度。如果需要阴影效果，可以使用伪元素添加一个线性渐变背景。

- 阅读更多 -

css封装

System

2024-08-14

所有,css

CSS封装是指将CSS样式组织在一起，形成可重用的单元，以减少代码冗余和提高样式代码的可维护性。CSS封装可以通过几种方式实现，包括Mixins, 函数库（如Sass、LESS），或者CSS模块。

以下是一个使用Sass函数进行CSS封装的例子：




// 定义一个颜色封装
@function color($name) {
  $colors: (
    'primary': #ff6347,
    'secondary': #3498db,
    'tertiary': #1565c0
  );
 
  @return map-get($colors, $name);
}
 
// 使用封装
body {
  background-color: color(primary);
  color: color(secondary);
}

在这个例子中，color函数接受一个名称作为参数，并返回一个颜色值。通过这种方式，我们可以在多个地方重复使用这个颜色封装，而不是在多个地方重复写颜色值，从而减少代码冗余并提高可维护性。

另一个例子是使用Sass混合(Mixins)来封装一组样式：




// 定义一个混合封装
@mixin button-style($color, $background) {
  color: $color;
  background-color: $background;
  border: 1px solid darken($background, 10%);
  padding: 10px 20px;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
}
 
// 使用混合封装
button {
  @include button-style(color(primary), color(secondary));
}

在这个例子中，button-style混合封装定义了一组按钮样式。通过@include指令，我们可以在button选择器上应用这个混合封装，传入颜色值。这样，按钮将具有统一的样式，而不需要在每个按钮中重复定义这些样式。

- 阅读更多 -

【CSS】SVG图片属性及修改颜色

System

2024-08-14

所有,css

在CSS中，我们可以使用SVG图片作为背景，并通过CSS的fill属性来修改颜色。以下是一些方法：

方法一：直接在SVG图片上修改颜色

如果你有直接访问SVG文件的权限，你可以直接在SVG文件中修改颜色。

例如，你有一个SVG文件，内容如下：




<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path d="M25 3.6C14.3 3.6 3.6 14.3 3.6 25s10.7 21.4 21.4 21.4 21.4-10.7 21.4-21.4S35.9 3.6 25 3.6zM25 46.5C17.4 46.5 6.8 39.6 6.8 25S17.4 6.8 25 6.8s18.2 17.4 18.2 18.2-0.2 18.2-18.2 18.2z" fill="#000000"/></svg>

你可以直接修改fill属性的值来改变颜色。




<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path d="M25 3.6C14.3 3.6 3.6 14.3 3.6 25s10.7 21.4 21.4 21.4 21.4-10.7 21.4-21.4S35.9 3.6 25 3.6zM25 46.5C17.4 46.5 6.8 39.6 6.8 25S17.4 6.8 25 6.8s18.2 17.4 18.2 18.2-0.2 18.2-18.2 18.2z" fill="#FFFFFF"/></svg>

方法二：在CSS中使用SVG作为背景，并修改颜色

如果你不能直接修改SVG文件，你可以将SVG作为背景图片，并使用CSS的fill属性来修改颜色。

例如，你有一个SVG文件，内容如下：




<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path d="M25 3.6C14.3 3.6 3.6 14.3 3.6 25s10.7 21.4 21.4 21.4 21.4-10.7 21.4-21.4S35.9 3.6 25 3.6zM25 46.5C17.4 46.5 6.8 39.6 6.8 25S17.4 6.8 25 6.8s18.2 17.4 18.2 18.2-0.2 18.2-18.2 18.2z" fill="#000000"/></svg>

你可以在CSS中这样使用：




.icon {
  background-image: url('path/to/your/svg');
  background-size: cover;
  fill: #FFFFFF; /* 修改颜色 */
  width: 50px;

- 阅读更多 -

css实现多行显示省略号

System

2024-08-14

所有,css

CSS可以通过以下属性实现多行文本显示省略号：

-webkit-line-clamp 属性：这个属性可以让文本在指定的行数后自动省略并显示省略号。
display: -webkit-box 属性：与 -webkit-line-clamp 一起使用，可以确保文本在指定的行数后显示省略号。
overflow: hidden 属性：隐藏溢出的内容。
-webkit-box-orient: vertical 属性：与 display: -webkit-box 一起使用，设置盒子的子元素排列方向。

以下是实现多行显示省略号的CSS样式代码示例：




.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 控制显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

在HTML中使用该样式：




<div class="multiline-ellipsis">
  这里是一段很长的文本，需要显示为多行，并且在超出指定行数后显示省略号。
</div>

注意：-webkit-line-clamp 属性是非标准属性，主要适用于基于WebKit浏览器的系统，如Chrome、Safari等。

- 阅读更多 -

CSS 常见属性设置

System

2024-08-14

所有,css

CSS 是一种用于描述网页样式的语言，它可以控制网页中文本的颜色、布局、背景、浮动等等。以下是一些常用的 CSS 属性设置示例：

字体颜色：




p {
  color: red;
}

背景颜色：




body {
  background-color: #f0f0f0;
}

设置高度和宽度：




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

边框：




p {
  border: 1px solid black;
}

文本对齐：




h1 {
  text-align: center;
}

浮动元素：




img {
  float: right;
}




h1 {
  font-size: 24px;
}

字体族：




p {
  font-family: "Times New Roman", Times, serif;
}

隐藏元素：




.hidden {
  display: none;
}

设置边距和填充：




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

这些是 CSS 的基础属性，每个属性都有其特定的用途和值的类型。在实际开发中，根据需求可以设置更多的 CSS 属性。

- 阅读更多 -

CSS基础标签属性及案例，前端网页开发

System

2024-08-14

所有,css

在CSS中，有许多可用的标签属性，以下是一些常见的CSS属性和它们的用法：




p {
  font-size: 20px;
}

字体加粗（font-weight）：




p {
  font-weight: bold;
}

字体变体（font-variant）：




p {
  font-variant: small-caps;
}

字体系列（font-family）：




p {
  font-family: "Times New Roman", Times, serif;
}

文本颜色（color）：




p {
  color: red;
}

文本装饰（text-decoration）：




p {
  text-decoration: underline;
}

文本对齐（text-align）：




p {
  text-align: center;
}

列表样式（list-style-type）：




ul {
  list-style-type: square;
}

背景颜色（background-color）：




body {
  background-color: #f0f0f0;
}

边框样式（border-style）：




div {
  border-style: dashed;
}

边距（margin）和填充（padding）：




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

宽度和高度：




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

显示属性（display）：




div {
  display: inline-block;
}

透明度（opacity）：




div {
  opacity: 0.5;
}

浮动（float）：




div {
  float: right;
}

定位（position）：




div {
  position: relative;
}

z-index层叠顺序：




div {
  z-index: 10;
}

这些只是CSS属性的一小部分，实际上CSS有数百个属性可供使用。在实际开发中，开发者可以根据需要选择合适的属性来进行页面的样式设计。

- 阅读更多 -

selenium总结-css 定位高级语法

System

2024-08-14

所有,css

CSS（层叠样式表）是一种用来描述HTML或XML（包括各种XML方言，如SVG，MathML等）文档样式的语言。Selenium是一个用于测试网站的自动化测试工具，可以模拟用户与浏览器的交互。

在Selenium中，我们可以使用CSS选择器来定位web元素。CSS选择器是一种用来选择HTML标签的方式，它比XPath表达式更加简洁和直观。

以下是一些常用的CSS定位方法：

通过id定位：




driver.find_element_by_css_selector("#element_id")

通过class定位：




driver.find_element_by_css_selector(".element_class")

通过元素名定位：




driver.find_element_by_css_selector("element_tag_name")

通过属性定位：




driver.find_element_by_css_selector("element_tag_name[attribute_name='attribute_value']")

通过子元素定位：




driver.find_element_by_css_selector("parent_tag_name > child_tag_name")

通过兄弟元素定位：




driver.find_element_by_css_selector("element_tag_name1 + element_tag_name2")

通过元素序号定位：




driver.find_elements_by_css_selector("element_tag_name:nth-child(index)")

通过部分属性值定位：




driver.find_element_by_css_selector("element_tag_name[attribute_name*='part_of_value']")

通过子字符串匹配定位：




driver.find_element_by_css_selector("element_tag_name[attribute_name^='start_of_value']")

通过子元素定位：




driver.find_element_by_css_selector("element_tag_name:nth-of-type(index)")

以上就是一些常用的CSS定位方法，可以根据实际情况选择合适的定位方式。

- 阅读更多 -

浅谈HTML、CSS和JS怎么变成页面

System

2024-08-14

所有,css

HTML、CSS和JS组合起来可以创建一个动态的网页。

HTML (Hypertext Markup Language) 负责网页的结构，CSS (Cascading Style Sheets) 负责网页的样式，JS (JavaScript) 负责网页的行为。

以下是一个简单的HTML、CSS和JS结合的例子：

HTML (index.html):




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Page</title>
    <style>
        .highlight { color: red; }
    </style>
</head>
<body>
    <h1 id="greeting">Hello, World!</h1>
    <button onclick="changeText()">Click Me!</button>
 
    <script>
        function changeText() {
            document.getElementById('greeting').className = 'highlight';
        }
    </script>
</body>
</html>

在这个例子中，HTML定义了页面的结构，包括一个标题和一个按钮。CSS定义了当标题被点击后如何改变样式（这里是改变颜色）。JS定义了当按钮被点击时要执行的函数，该函数改变了标题元素的类，从而应用了CSS规则。

当你打开这个页面并点击按钮时，标题文字的颜色会变成红色。这就是HTML、CSS和JS结合创建动态网页的一个简单例子。

- 阅读更多 -