![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css效果
文章平均质量分 65
bug的生产者
这个作者很懒,什么都没留下…
展开
-
响应式网站
根据bilibili新视觉实训视频总结1.响应式网站的两种形式在一个网站完成不同设备的适配(企业站适合)pc端,平板端,手机端通过两个或三个网站完成适配(大型网站,商城)2.响应式网站的两种技术使用原生方式写 @media比较常用Bootstrap框架 市面使用量比较多 自动设置好了适配3.媒体查询的用法<500–红色500-900–橙色900-1200–黄色1200以上–绿色 @media(max-width:500px){原创 2021-09-12 15:20:48 · 198 阅读 · 1 评论 -
flex布局(来源于黑马pink老师视频总结)
1.flex布局原理Flexible Box 的缩写,意为"弹性布局"flex容器和flex项目flex容器(flex container):采用flex布局的元素flex项目(flex item):flex容器所有的子元素flex布局原理通过给父盒子添加flex属性,来控制子盒子的位置和排列方式2. 常见父项属性常见父项属性flex-direction设置主轴的方向justify-content设置主轴上的子元素排列方式flex-wrap设置子元素原创 2021-04-05 16:24:51 · 804 阅读 · 0 评论 -
css菜单特效
以下展示的菜单均为从各个地方收集整理而来1.滑动菜单指示器特效来自b站up主前端小智1.offsetLeft和offsetTop的值是距上级有定位元素的相对位置2.offsetWidth: 为元素的width+元素的padding+边框的宽度3.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null。4.querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组)。<!DOCTYPE html><html原创 2021-04-05 11:21:13 · 318 阅读 · 0 评论 -
利用text-shadow制作发光字,立体字,苹果字(可以不添加前缀)
来源于技术胖的视频总结text0shadow:h-shadow v-shadow blur color1.正常文字阴影效果 .demo1{ color:#fff; text-shadow:2px 2px 3px #000 } .demo1{ color:#fff; ...原创 2019-08-27 23:20:23 · 308 阅读 · 0 评论 -
css3动画(需要加前缀)
来源于技术胖的视频总结1.动画中的关键帧@keyframesdemo 01 .demo{ width:100px; height:100px; background:palevioletred; position:absolute; /* 使用定义的动画,持...原创 2019-08-27 22:50:20 · 620 阅读 · 0 评论 -
css的过渡效果
来源于技术胖的视频总结transitiontransition-property:过渡属性(默认值为all)transition-duration:过渡持续的时间(默认为0s)transition-timimg-function:过渡函数(默认为ease函数)transition-delay:过渡延迟的时间(默认为0s)缓慢变成 .demo{ widt...原创 2019-08-27 21:42:06 · 197 阅读 · 0 评论 -
css3盒子阴影效果
box-shadow:h-shadow v-shadow blur spread color inseth-shadow:必须。水平阴影的位置。允许负值。v-shadow:必须。垂直阴影的位置。允许负值。blur:可选。模糊距离。spread:可选。阴影的尺寸。color:可选。阴影的颜色。inset:可选。将外部阴影改为内部阴影。<!DOCTYPE html><...原创 2019-08-26 23:26:09 · 18181 阅读 · 0 评论 -
css3的颜色模式和线性渐变
来源于技术胖的视频总结1.rgba(R,G,B,A)R:红色值。正整数(0-255)| 百分数G:绿色值。正整数(0-255)| 百分数B.蓝色值。正整数(0-255)| 百分数A.Alpha透明度。0-12.hsla(H,S,L,A)H.Hue(色调)。0(360)表示红色;120(绿色);240(蓝色);可以取其它数值来指定颜色,取值为(0-360)S:Saturation(饱...原创 2019-08-26 22:57:34 · 240 阅读 · 0 评论 -
css圆角以及利用css画出一些形状
来源于技术胖的视频总结1.圆角border-radius <style> .demo{ width:100px; height: 100px; background:#f0f; margin:50px auto; /* border-top-left-radiu...原创 2019-08-25 23:02:49 · 712 阅读 · 0 评论 -
css3伪类选择器及伪元素
来源于技术胖的视频总结1.a标签的4种伪类选择器 a:link{color:#333;}//链接未被访问时 a:visited{color:red}//链接被访问时 a:hover{color:green}//鼠标悬停时 a:active{color:blue} //鼠标点击不松手时<a href="">小欢喜<...原创 2019-08-25 15:49:41 · 213 阅读 · 0 评论 -
css实现仿element ui配色的小圆圈状态标记
实现的效果如图css代码如下.status-info{ display:inline-block; width: 7px; height:7px; background:#f4f4f5; border-radius:50%; border:1px solid #909399;}.status-primary{ display:inline-block; w...原创 2019-03-20 15:34:53 · 4775 阅读 · 0 评论