50px

2024-10-20逼自己看完！！CSS布局技术之——两列布局
看完你就又多学了一点了！两列布局样式 CSS3中提供了多列布局的支持，可以将文本内容以多列的形式进行排列。通过设置列数和间距等属性，可以控制列布局的样式。很多网站都有些共同的特点，如页面顶部放置一个大的导航栏或广告条，右侧是链接或图片，左侧放置主要内容，页面底部放置版权
2024-10-16css盒子的定位（绝对定位）
如何给定位盒子想给盒子定位，必须提供三个要素，锚点、方向和距离。而盒子的相对定位，就是以元素本身的位置作为锚点。盒子定位的属性名和属性值 position：absolute；绝对定位的锚点 absolute是绝对定位元素，其锚点是父辈属性，即
2024-10-15CSS盒子模型(更新ing）
目录一、概念盒子的尺寸二、盒子模型的属性1、块级元素和内联（行内）元素2、常见的块级元素3、常见的内联（行内）元素一、介绍概念在CSS视角下，所有HTML元素可以看作盒子。所谓的盒子在HTML中就是一个盛装元素内容的容器。盒子由内容区（content)，内边距（padding），边框（border），外
2024-09-18antd-Vue 3.X版本 a-back-top使用
api中例子本地项目中没显示出来原因是没有图标采用引用图标的方式展示使用的时候需注意：1.target是找到滚动的目标元素，不然也显示不出2.visibilityHeight默认是200滚动不到这个数值可能也显示不出<div><a-back-top:target="targetFunc":visibilityHeight="100">
2024-08-20如何用纯CSS绘制三角形
要用纯CSS绘制三角形，可以通过利用CSS中的border属性来实现。具体来说，核心原理是通过设置不同方向的边框颜色和宽度来形成三角形效果。以下是写技术博客时可以介绍的几个要点：1.三角形的基本原理CSS三角形的关键在于设置一个元素的宽高为0，同时通过边框来创建三角形。例如：.trian
2024-08-20如何用纯CSS绘制三角形--02
通过结合@keyframes动画，让三角形实现旋转、移动等动态效果代码如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">
2024-08-13只用一个 HTML 元素可以写出多少形状？——多边形篇
上一篇章的末尾，我们只用一个 div 元素写了一个鸡蛋，在欧几里得平面几何中，鸡蛋的形状已经不能算是标准形状了。对于非标准的形状，没有比较直观的几何规律，命名方面也更加困难，俗称不规则图形，在欧几里得平面几何中，将其统称为多边形。在平行四边形篇中，我们首先使用常规的盒模型写出
2024-08-12前端必知必会-CSS边距Margin
文章目录CSS边距Margin边距-各个侧面边距-简写属性CSS边距折叠总结CSS边距Margin边距Margin用于在元素周围、任何定义的边框之外创建空间。有一些属性可用于设置元素每侧的边距（顶部、右侧、底部和左侧）。边距-各个侧面CSS具有用于指定元素每侧边距的属
2024-07-19移动端步骤3 自动伸缩
<template><divclass="pt80mt10f14cor3pr10pl10"v-if="stepList&&stepList.length"><divclass="step-item"v-for="(item,index)instepList":key="index">
2024-07-15Vue2中的进度条案例
v-bind对于样式控制的增强--操作style语法：:style=“样式对象”适用于某个具体属性的动态设置<divclass="box":style="{css属性名1:css属性值,css属性名2:css属性值}"></div><!DOCTYPEhtml><htmllang="en"><head><metacharset=
2024-07-07CSS基础知识总结（4）
1、使用CSS绘制一些简单的图形。A：正方形#square{width:100px;height:100px;background-color:red;}B：圆形1#square{2width:100px;3height:100px;4border
2024-05-29css15 CSS Margins
https://www.w3schools.com/css/css_margin.aspMarginsareusedtocreatespacearoundelements,outsideofanydefinedborders. <!DOCTYPEhtml><html><head><style>div{margin:70px;border:1pxsolid#4CAF50;}</styl
2024-05-29css16 CSS Padding
https://www.w3schools.com/css/css_padding.aspPaddingisusedtocreatespacearoundanelement'scontent,insideofanydefinedborders. <!DOCTYPEhtml><html><head><style>div{padding:70px;border:1pxsolid#4C
2024-05-25[前端]盒子模型
margin:外边距padding:内边距border:边框盒子的计算方式:这个元素到底又多大margin+border+padding+内容宽度外边距可能的值值说明auto设置浏览器边距。这样做的结果会依赖于浏览器length定义一个固定的margin（使用像素，pt，em等）%定义一个使用百分比
2024-04-15css 盒子模型
1.分类标准盒子模型content-box怪异盒子模型border-box2.示例代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1
2024-03-13圆形放大的hover效果
<template><divclass="container"><divclass="avatar"></div></div></template><scriptlang="ts"setup>import{ref}from'vue';</script><stylelang=
2024-03-06前端css阴影画图
在线演示地址：css阴影画图一，在css中有一个box-shadow属性，可以设置元素的阴影。.item{width:50px;height:50px;background:#009688;box-shadow:50px0red,100px0px#000;}效果：二，box-shadow可以添加多个。.item{width:50px;height:
2024-02-02Flex布局，和position布局，实现上下固定中间部分滚动
Flex布局实现上下固定中间部分滚动：<divclass="parent"><divclass="header">header--固定</div><divclass="content"><p>content--滚动</p><p>内容部分</p><p>内容部分<
2024-01-21玛珍，玛珍，margin！
最近在整理巩固面试相关的资料，又看到了熟悉的老朋友：margin，当时觉得其读起来很亲切，现在又发现很多遗忘的知识点。了解marginmargin，译为“外边缘”，在CSS作为属性定义元素周围的空间，从以下盒模型中能更好的理解margin。属性描述margin简写属性。在一个声明中设置所有外
2023-11-30CSS-transparent--透明属性用transparent写一个三角形
csstransparent是一种全透明属性。当用在一个元素覆盖另一个元素时，想显示下面的元素，就用到了transparent属性。代码：div{width:0;height:0;/*边框底部*/border-bottom:100pxsolidblack;/*边框左部*/border-left:50pxsolidtranspare
2023-11-097.你心动了吗--动图
HTML:1<!DOCTYPEhtml>2<head>3<metacharset="utf-8"/>4<title>demo02-xin</title>5<linktype="text/css"href="E:\htmltest1\demo1\demo02.css"rel="stylesheet">6</he
2023-10-29【RuoYi移动端】HbuilderX实现底部弹窗示例
一、单选样式弹窗选择1、View页面代码<uni-popupref="textBox"type="bottom"> <viewclass="select_box"> <viewclass="select_row"v-for="(item,index)instatus"@click="selectClick(item.id)"&g
2023-10-14表单进阶
单选框redio<div><inputtype="radio"name="aaa"id="one"><labelfor="one">非常满意</label><!--给文字加上label可以点击文字进行单选框的
2023-10-13锚点
锚点作用：页面不同区域的跳转，使用a链接(a链接还可以实现本页面内的跳转）<a href="#锚点名字“></a><divid="锚点名字”></div><style>*{margin:0;padding:0;}ul{list-style:none;position:fixed;r
2023-10-07css 样式一
1.使用css实现箭头图标:①.一个div盒子,有border值.②.border占满所有内容区,盒子是实心的.只剩4个边框.③.将div的宽度和高度设置为0,再设置边框样式:.triangle{width:0;height:0;border-top:50pxsolidblack;border-right:50pxsolidr