vh是CSS中的一个相对长度单位，代表视口高度（viewport height）。它表示视口高度的百分比，例如，一个元素使用“100vh”作为其高度，相当于将其高度设置为视口的百分百。 使用vh作为单位可以帮助我们将元素的大小与视口的大小相匹配，使得网站在不同设备上都能够表现良好。例如，在移动设备上，我们可以使用vh来确保元素不会超出屏幕，而在较大的设备上，我们可以使用这个单位来调整元素的大小，使得它们更加适应屏幕。 /* 使用vh来让元素占据整个视口高度 */ .element { height: 100vh; …
css中的Expression 问题说明: 用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg? 解决方法: 使用css的expression方法, 具体实现要看看.css的写法: /*替换图片CSS*/ #imgScript { /*这里使用对象ID来通配样式, 也可以定义一个css函数*/ star:exp…
先看效果图 对应的美化代码 css <style> style="style="color:rgb(255 95 0)">color:rgb(255 95 0)">table.gridstyle="style="color:rgb(255 95 0)">color:rgb(255 95 0)">table { style="style="color:rgb(255 95 0)">color:rgb(98 189 255)">font-fam…
在网页制作中，很多时候都会有箭头的情况，我们可以使用css来绘制箭头，css是如何绘制箭头的呢？下面我们来看一下使用css绘制箭头的方法。 我们可以使用css绘制三角形来制作箭头。 一、绘制三角 html代码： <div></div> css代码： .container{ width: 0; height: 0; border: 50px solid; border-color: red yellow green blue;} 利用border绘制了四个三角组成的矩形，现在要绘…
1，如果父级开启了flex,子级元素的宽度相加大于父级，那么子级元素的宽度会被压缩 2.不让子级的宽度压缩 方法一，在子级添加 flex-shrink: 0; 值为0不被压缩， 方法二，在其中的一个子级添加一个子级，有宽高，也就是box的孙级，此时box2也不会压缩 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid…
CSS 下划线，div css下划线 接下来，我们来介绍通过css样式对文字、区域设置下划线样式——css下划线 常见和常用的下划线样式 1、文字带下划线的方式显示 使用html中<u>标签即可对加u标签的文字加下划线，实例样式如下图 但是注意的时候u标签是以<u>开始</u>结束的一对标签，<u>我是被加下划线的</u> 2、超链接文字下划线-css 超链接详细介绍 我们常常需要让带超链接的文字，以有下划线方式显示，而鼠标放上去下划线不显示方式显示带链接…
本文介绍如何使用css让英文文本自动换行，大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们自动换行的方法！ 大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是CSS如何将他们自动换行的方法！对于Div和table以及不同的浏览器，实现css自动换行的方法都稍有不同，下面分别介绍： 对于div 1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。 div css xhtm…
通过CSS3的动画效果完成的一个简单的图片墙效果 效果图： 目标： 1. 用10张图片作为照片。 2. 照片以不同的位置和旋转角度随意摆放。 3. 鼠标移动到某一张照片上时，此照片由倾斜缓慢旋转成端正，并且放大显示在最上层。 用到的知识点： 1. box-shadow：给元素的边框添加阴影的效果 box-shadow: 10px 10px 15px #ccc; 前两个参数为阴影效果在上下左右的哪两个方向便宜，正的话为下或右方，负的话为上或左方。 第三个参数为阴影半径的大小。 第四个属性为阴影颜色。 在鼠标滑动到图片…
![[css选择器] 类选择器](https://img.behttp.com/wp-content/uploads/2022/07/20220703142059444.jpg)
类选择器 原文链接：类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 类选择器允许以一种独立于文档元素的方式来指定样式。 该选择器可以单独使用，也可以与其他元素结合使用。 提示： 只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做上些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。 修改 HTML 代码 在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。 为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。请看下面的 …