首页 > TAG信息列表 > 20px

我正在参加“掘金挑战守则”。

我正在参加“掘金挑战守则”。详情请见: 掘金挑战赛来了! 我朋友的故事 我的好朋友是个心地善良的人,只是做事有点迷糊。不,她最近好几次差点发错群了。主要是因为组太多,很难区分。 所以,我打算想办法让她免于意外变成一个大型社交死亡场景。 2个小时之后 来自网友的智慧 网友提供了

fixed

CSS .mobile{ position:fixed; bottom:20px; right:20px; width:50px; height:50px; background-size:cover; z-index:999; background:darkblue; border-radius:50%; padding:8px; opacity:0.6; } HTML <a class="mobile" href="tel:xxxxxxxxx

元素居中方法

1、定位+外边距 .father{   position:relative;   top:50%;   left:50%;  width:40px;   height:40px;   .son{   posithon:absolute;   margin:-10px 0 0 -10px;   width:20px;   height:20px; } } 2、定位+位移(transform:translate(-50%,-50%)) .father{   pos

平移:translate()

在CSS3中,我们可以使用transform属性的translate()方法来实现元素的平移效果。 语法: transform: translateX(x); /*沿X轴方向平移*/ transform: translateY(y); /*沿Y轴方向平移*/ transform: translate(x, y); /*沿X轴和Y轴同时平移*/ 说明: 从上面可以看出,平移有3种情况: translat

解决网页乱码、打印文件乱码

出现乱码可能的原因: 编写网页时,使用的字符集和用户使用的字体集不一致 比如,开发者使用 utf-8 字符集写下了如下网页: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .checked::before { width: 20px;

css - 垂直文字

css - 垂直文字 <!-- * @createDate: 2022-08-15 13:59:01 * @Author: zclee * @LastEditTime: 2022-08-15 15:14:57 * @LastEditors: zclee * @FilePath: \lee-vue-press\cnblog\css - 垂直文字.md * @Description: --> <template> <div class="app-

18 边框阴影动画

当鼠标穿过展示动画效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>边框阴影</title> <style type="text/css"> .shadow{ margin: 50px auto; position: relative; width: 200px; heigh

密码验证框信息

<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&

Css3 border-radius 实现圆弧三角形_圆弧正三角形

一、原理: border-radius 可以设置4个叫,8个切边的长度,控制圆角大小; 实现方案如下: 左上角、左下角小一点。 右上角、右下角:x轴80%;y轴50%。     二、实现圆角梯形 .block{ width: 100px; height: 100px; background-color: red; border-top-left-radius: 20px 20

前端面试题-入门css

9.请将html模块中字体内容是"红色"的字体颜色设置为"rgb(255, 0, 0)","绿色"设置为"rgb(0, 128, 0)","黑色"设置为"rgb(0, 0, 0)",且字体大小都为20px。 <html> <head> <meta charset=utf-8> <style type=&q

12.轮廓,阴影和圆角

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d

04.盒子模型-内边距

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d

css 使伪元素继承内容高度

效果如图: 实现左侧线高度继承内容高度,无论内容多少行左侧线随内容高度增减。 style: <style> ul,li { list-style: none; } .line { width: 300px; } .line li { position: relative; padding: 10px; } .line li::before {

模仿element-ui封装vue组件库(dialog)

封装一个element-ui风格的dialog组件 前置知识: vue过渡动画sync修饰符具名插槽与v-slot指令参数支持: 参数名 参数描述 参数类型 默认值 title 对话框标题 string 提示 width 宽度 string 50% top 与顶部的距离 string 15vh visible 是否显示dialog(支持sync修饰符) b

加载spin

/** 全局加载spin样式 */ .my-spin-loading { &>div>.ant-spin { max-height: none; bottom: 0; .ant-spin-text { top: 40%; padding-top: 50px; font-size: 18px; color: #bed0f8 !important; } .ant-spin-dot {

【CSS】绘制一个三角形

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minim

定位

定位 1、相对定位        相对定位:pposition:relative 相对于原来的位置,进行指定性偏移,相对定位的话,它任然在标准文档流中! top: -20px;left: 20px; bottom: -10px;right: 20px; 2、绝对定位 3、z-index

18.定位文档说明

定位: 定位属性: position 定位属性值: 1) relative: 相对定位 参照物: 元素本身的文档流位置 文档流状态: 不脱离文档流 移动方式: 通过top,bottom,left,right属性移动元素 常用单位px

CSS3定位

相对定位:position:relative; top:20px;就是距离上面20px,也就是向下沉20px,其余的同理。(空间位是保留的!!!) 绝对定位:position:absolute; 1,如果父元素没有定位属性,那么该元素的定位的标尺是整个页面的左上角 2,如果父元素有任意一种定位属性,那么该元素的定位的标尺是父元素的左上角  

伪元素的层叠样式,以及消息提醒小图标

这几天在做一个课程实训,其中有一个地方需要做出类似的效果  其他部分不做赘述,这里主要将【消息提醒】这个小圈。   个人实现方法为 .purchase_num { position: absolute; top: -5px; left: 105px; min-width: 12px; line-height: 12px; padding: 1px

CSS – border-radius (Rounded Corners)

前言 之前的文章 CSS – W3Schools 学习笔记 (3), 这篇独立出来写, 作为整理.   参考: Youtube – Advanced CSS Border-Radius Tutorial   正文 以长方形作为例子比较容易理解. normal use border-top-left-radius: 40px 30px; 设定 top-left (左上角)变圆角. horizontal 4

css button 按压效果和内部阴影

重要属性: :active 选择器用于选择活动链接。 box-shadow: inset 将外部阴影 (outset) 改为内部阴影。 <style>> .button { overflow: hidden; height: 80px; background: #7fb1bf; cursor: pointer; co

css快速入门(下)

css快速入门(下) 七、盒子模型 1、什么是盒子模型 margin:外边距; padding:内边框; border:边框; 2、边框 border:粗细 样式 颜色 边框的粗细 边框的样式 边框的颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子</title>

EasyClick Html UI 第十四节 CSS 盒子模型

EasyClick Html UI 第十四节 CSS 盒子模型 CSS 盒子模型(Box Model) 所谓的盒子模型就是把HTML页面的元素看作一个矩形盒子,矩形盒子是由内容(content)、内边距(padding)、边框(border)、外边距(margin)四部分组成。 盒子模型示意图如下图所示: 盒子模型相关样式属性 盒子的内

CSS的相对定位详解

大家好,今天给大家分享一下CSS的相对定位 看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 10px; padding: 5p