![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css效果
outside-R
这个作者很懒,什么都没留下…
展开
-
vue3 图标未对齐 vertical-align: middle
图示vue中未设置高度及行高,小图标一直处于上浮状态代码 <div class="item"><div class="item_title">真实姓名</div> <div class="item_content"> {{ userInfoDate.real_name == '' ? '未实名' : userInfoDate.real_name }} <原创 2022-05-25 14:58:00 · 454 阅读 · 0 评论 -
html+css 【居中样式】
1、定位 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);2、弹性盒子 /* css3弹性居中:不知道值,直接用属性 */ display: flex; /* 水平 */ justify-content: center; /* 垂直 */ align-items: center;3、margin:只是在水平方向居中margi原创 2022-03-08 10:11:12 · 179 阅读 · 0 评论 -
腾讯视频首页导航栏【鼠标移动切换导航(静态数据)】
示意图提示该案例只是改变了导航,不涉及改变背景图片【后期会有—>动态数据及背景图改变(利用js)】代码html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content原创 2022-02-09 15:44:55 · 1926 阅读 · 0 评论 -
css实现选项卡切换(margin-top)
示意图思考对于选项卡有多种方式,以下代码利用js实现鼠标点击效果【导航栏、内容区域】改变margin-top的值来进行切换代码html+js<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca原创 2022-02-09 10:43:11 · 1368 阅读 · 0 评论 -
html+css选项卡
效果展示:图片可以选择自己喜欢的,制作选项卡<!DOCTYPE html><html lang="en"><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原创 2021-10-09 10:40:53 · 184 阅读 · 0 评论 -
鼠标移动改变背景效果
效果图鼠标移动到文字html <div>帅哥</div>css*{ margin: 0; padding: 0;}/* 改变背景 */div:hover{ background-position:center center;}div{ position:absolute; left: calc( 50% - 250px); top:calc( 50% - 100px); height: 200px;原创 2021-06-14 18:04:02 · 134 阅读 · 0 评论 -
css3制作3D的正方体
html <div class="wrapper"> <div class="box"> <div class="cube"> <div class="item"></div> <div class="item"></div> <div class="item"><原创 2021-06-05 22:07:09 · 175 阅读 · 0 评论