41、css总结
1、阴影:box-shadow:0 5px 20px rgba(0,0,0,.1);
2、css实现滚动进度条效果:
body {
position: relative;
padding: 50px;
font-size: 24px;
line-height: 30px;
background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
background-size: 100% calc(100% - 100vh + 5px);
background-repeat: no-repeat;
z-index:;
} body::after {
content: "";
position: fixed;
top: 5px;
left:;
bottom:;
right:;
background: #fff;
z-index: -1;
} 3、//转换(伸缩)
transform:scale(1.08);
//过渡效果
transtion:all .3s ease; 4、三角形气泡弹窗
<div class="send">
<div class="arrow"></div>
</div> .send {
position: relative;
width: 150px;
height: 35px;
background: #000000;
border-radius: 5px;
/* 圆角 */
margin: 30px auto 0;
} .send .arrow {
position: absolute;
top: 8px;
left: -16px;
/* 圆角的位置需要细心调试哦 */
width:;
height:;
font-size:;
border: solid 8px;
border-color: transparent #000000 transparent transparent;
}
5、几种实现div水平垂直居中的方法:
html:
<body>
<div class="wp">
<div class="box size">123123</div>
</div>
</body> css:
/* 公共代码 */
.wp {border: 1px solid red; width: 300px; height: 300px; }
.box { background: green; }
.box.size { width: 100px;height: 100px;}
/* 公共代码 */
/* 1、定位代码 */
.wp {position: relative;}
.box { position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; }
缺点:需要确定子元素宽高
/*3、 定位代码 */ .wp {position: relative;}.box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
flex 不需要确定子元素宽高
/*4、 定位代码 */
<div class="wp">
<div class="box">123123</div>
</div>
.wp {
display: flex;
justify-content: center;
align-items: center;
}
41、css总结的更多相关文章
- day 41 css固定位置 以及小米商城项目
.如何让一个绝对定位的盒子居中 left:%; margin-left:- 宽度的一半 .固定定位 position: fixed; ()脱标 参考点:浏览器的左上角 作用:固定导航栏 返回顶部 小广 ...
- 详解纯css实现瀑布流(multi-column多列及flex布局)
瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...
- js和css兼容问题
(一)html部分 1.H5新标签在IE9以下的浏览器识别 <!--[if lt IE 9]> <script type="text/javascript" s ...
- 【转】Web前端浏览器兼容初探
原文地址:http://blog.jobbole.com/38638/ 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: ...
- Web前端浏览器兼容初探
浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端 ...
- iOS模拟器分辨率的问题(转载)
转载地址:http://justsee.iteye.com/blog/2123545 不积跬步 无以至千里 不积小流 无以成江海 博客 微博 相册 收藏 留言 关于我 ios8/sdk ...
- web前端-html学习笔记
学习html最重要的是坚持.细心.多动手.慕课网<HTML+CSS基础课程>的笔记. 1.<h1>网站标题</h1> 如:<h1>腾讯网</h1& ...
- 最新java学习路线:含阶段性java视频教程完整版
最新java学习路线:带阶段性java视频教程版本 第一阶段:Java基础 学习目标: 掌握基本语法.面向对象.常用类.正则.集合.Io流.多线程.Nio.网络编程.JDK新特性.函数式编程 知识点细 ...
- Sass进阶之路,之一(基础篇)
Sass 学习Sass之前,应该要知道css预处理器这个东西,css预处理器是什么呢? Css预处理器定义了一种新的语言将Css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作了.预处理器通 ...
- [转]Web前端浏览器兼容
转自: http://www.admin10000.com/document/1900.html 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易 ...
随机推荐
- 线程queue、线程进程池,协程
线程queue import queue q = queue.Queue() #先进先出 q = queue.LifoQueue() #先进后出 t = queue.PriorityQueue() # ...
- Spring Data学习中心
Spring Data 概览 Spring Data的使命是为数据访问提供熟悉且一致的基于Spring的编程模型,同时仍保留底层数据存储的特殊特性. 它使数据访问技术,关系数据库和非关系数据库,map ...
- Python之文件读写(csv文件,CSV库,Pandas库)
前言 一.Python文件读取 二.读取CSV文件 一.Python文件读取 1. open函数是内置函数之with操作 - 关于路径设置的问题斜杠设置成D:\\文件夹\\文件或是D:/文件夹/文件 ...
- BootStrap Table 合并单元格
为了更直观展示表格的一大堆乱七八糟的数据,合并单元格就派上用场: 效果: 贴上JSON数据(后台查询数据一定要对合并字段排序): [ { "city": "广州市&quo ...
- 【Gamma】Scrum Meeting 8
前言 会议定点:大运村公寓 会议时间:2019/6/7 会议目的:分配任务,准备宣传 一.任务进度 组员 上周任务进度 下阶段任务 大娃 辅助做好引导录屏 优化辅助模型 二娃 撰写会议博客 撰写会议博 ...
- c# 创建socket连接辅助类
using AD.SocketForm.Model; using NLog; using System; using System.Net; using System.Net.Sockets; nam ...
- xilinx SDK开发 GPIO使用API总结
t_v GPIO常用函数 1.XGpio_Config *XGpio_LookupConfig(u16 DeviceId) 功能:根据输入设备ID查找该设备. 输入:设备ID. 输出:若找到该设备ID ...
- [转帖]在 Kubernetes 离线部署 KubeSphere
在 Kubernetes 离线部署 KubeSphere https://kubesphere.io/docs/v2.0/zh-CN/installation/install-ks-offline/ ...
- ServerSocketChannel简述
一.前言 前篇文章中了解了SocketChannel:提供了连接到套接字通道,从某种层面而言,NIO中提供了类似于java.net包中对于网络操作的api的功能.既然已经有连接到Socket套接字的通 ...
- Linux中历史命令
历史命令,即之前登录session会话中的在命令行键入的命令. 在Linux中可以有两种方式查询历史命令 history命令 当前用户目录中的隐藏文件.bash_history 一.history 作 ...