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; }

/* 2、定位代码 */ .wp { position: relative; } .box { position: absolute;; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }

缺点:需要确定子元素宽高


/*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总结的更多相关文章

  1. day 41 css固定位置 以及小米商城项目

    .如何让一个绝对定位的盒子居中 left:%; margin-left:- 宽度的一半 .固定定位 position: fixed; ()脱标 参考点:浏览器的左上角 作用:固定导航栏 返回顶部 小广 ...

  2. 详解纯css实现瀑布流(multi-column多列及flex布局)

    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...

  3. js和css兼容问题

    (一)html部分 1.H5新标签在IE9以下的浏览器识别 <!--[if lt IE 9]>  <script type="text/javascript" s ...

  4. 【转】Web前端浏览器兼容初探

    原文地址:http://blog.jobbole.com/38638/ 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: ...

  5. Web前端浏览器兼容初探

    浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端 ...

  6. iOS模拟器分辨率的问题(转载)

    转载地址:http://justsee.iteye.com/blog/2123545   不积跬步 无以至千里 不积小流 无以成江海   博客 微博 相册 收藏 留言 关于我     ios8/sdk ...

  7. web前端-html学习笔记

    学习html最重要的是坚持.细心.多动手.慕课网<HTML+CSS基础课程>的笔记. 1.<h1>网站标题</h1> 如:<h1>腾讯网</h1& ...

  8. 最新java学习路线:含阶段性java视频教程完整版

    最新java学习路线:带阶段性java视频教程版本 第一阶段:Java基础 学习目标: 掌握基本语法.面向对象.常用类.正则.集合.Io流.多线程.Nio.网络编程.JDK新特性.函数式编程 知识点细 ...

  9. Sass进阶之路,之一(基础篇)

    Sass 学习Sass之前,应该要知道css预处理器这个东西,css预处理器是什么呢? Css预处理器定义了一种新的语言将Css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作了.预处理器通 ...

  10. [转]Web前端浏览器兼容

    转自: http://www.admin10000.com/document/1900.html 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易 ...

随机推荐

  1. Linux 换 jdk 版本 环境没有生效

    Linux 换 jdk 版本 环境没有生效 把 jdk 1.7 换成 1.8, 路径设置好了后 用了下面两个都没有生效 . /etc/profile source ~/.bashrc 还是 jdk 1 ...

  2. Scrapy笔记02- 完整示例

    Scrapy笔记02- 完整示例 这篇文章我们通过一个比较完整的例子来教你使用Scrapy,我选择爬取虎嗅网首页的新闻列表. 这里我们将完成如下几个步骤: 创建一个新的Scrapy工程 定义你所需要要 ...

  3. Scrapy笔记05- Item详解

    Scrapy笔记05- Item详解 Item是保存结构数据的地方,Scrapy可以将解析结果以字典形式返回,但是Python中字典缺少结构,在大型爬虫系统中很不方便. Item提供了类字典的API, ...

  4. Linux下网络socket编程——实现服务器(select)与多个客户端通信

    一.关于socket通信 服务器端工作流程: 调用 socket() 函数创建套接字 用 bind() 函数将创建的套接字与服务端IP地址绑定 调用listen()函数监听socket() 函数创建的 ...

  5. 第02组 Alpha冲刺(2/4)

    队名:十一个憨批 组长博客 作业博客 组长黄智 过去两天完成的任务:写博客,复习C语言 GitHub签入记录 接下来的计划:构思游戏实现 还剩下哪些任务:敲代码 燃尽图 遇到的困难:Alpha冲刺时间 ...

  6. java面试题——高级篇

    一.集合 Hashmap的原理 源码分析参考文章:http://www.cnblogs.com/xwdreamer/archive/2012/06/03/2532832.html 题目参考文章:htt ...

  7. JUC锁框架_AbstractQueuedSynchronizer详细分析

      AQS是JUC锁框架中最重要的类,通过它来实现独占锁和共享锁的.本章是对AbstractQueuedSynchronizer源码的完全解析,分为四个部分介绍: CLH队列即同步队列:储存着所有等待 ...

  8. Guava---缓存之LRU算法

    随笔 - 169  文章 - 0  评论 - 292 GuavaCache学习笔记一:自定义LRU算法的缓存实现   前言 今天在看GuavaCache缓存相关的源码,这里想到先自己手动实现一个LRU ...

  9. 《Modern PHP》读书笔记

    这本书适合你吗?     我认为每个有一定PHP开发经验的人都应该读读这本书,因为正如书中的前言所说: “网上有成千上万的PHP教程,其中大多数都已经过时了,展示的是陈旧的实践方式.可是,谷歌的搜索结 ...

  10. POJ-图论-最小生成树模板

    POJ-图论-最小生成树模板 Kruskal算法 1.初始时所有结点属于孤立的集合. 2.按照边权递增顺序遍历所有的边,若遍历到的边两个顶点仍分属不同的集合(该边即为连通这两个集合的边中权值最小的那条 ...