1. 页面顶部阴影

body:before{
content: "";
position: fixed;
top:-10px;
left:;
width: 100%;
height: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index:;
}

2. 给 body 添加行高

你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可:

    body {

      line-height:;

    }

line-height:1; 的意思是 根据该元素本身的字体大小 设置行高 比如该元素字体是15px line-height:1; 的行高就是15px;

3. 所有一切都垂直居中

    html, body {

      height: 100%;

      margin:;

    }

    body {

      -webkit-align-items: center;  

      -ms-flex-align: center;  

      align-items: center;

      display: -webkit-flex;

      display: flex;

    }

看情况而定,不是很实用;

2017年总结的前端文章——CSS高级技巧汇总的更多相关文章

  1. 2017年总结的前端文章——CSS盒模型详解

    CSS的盒模型是CSS的基础,同时也是难点,这个问题经常在面试中会被问到,属于经典问题了.很多博客里讲得也很模糊不清,于是,我在这里重新整理一下. 可以认为每个html标签都是一个方块,然后这个方块又 ...

  2. CSS 高级技巧汇总

    在我们平时写代码的时候没有没有掌握一些CSS技巧呢? 今天给大家分享一个<CSS 高级技巧汇总让你的代码简洁高效>.大家务必掌握这些小技巧,会让你非常高效率的写出网页的. ◆使用 :not ...

  3. 好程序员web前端分享12个CSS高级技巧汇总

    好程序员web前端分享下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-chil ...

  4. 12 个 CSS 高级技巧汇总

    下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使 ...

  5. 20 个 CSS 高级技巧汇总

    原文:https://segmentfault.com/a/1190000003936841 使用技巧会让人变的越来越懒,没错,我就是想让你变懒.下面是我收集的CSS高级技巧,希望你懒出境界. 1. ...

  6. 2017年总结的前端文章——一劳永逸的搞定 flex 布局

    flex 基本概念 使用 flex 布局首先要设置父容器 display: flex,然后再设置 justify-content: center 实现水平居中,最后设置 align-items: ce ...

  7. 2017年总结的前端文章——border属性的多方位应用和实现自适应三角形

    border属性是在实际的应用中使用频率比较高的一个属性,除了作为边框使用,利用border属性的一些特征以及表现方式,可以在实现一些比较常见的效果(如等高布局,上下固定内容滚动布局和绘制CSS图标等 ...

  8. 12 个CSS 高级技巧汇总[转载]

    使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使用SVG 优化显示文本 对纯CSS滑块使用 ma ...

  9. 12个CSS高级技巧汇总

    1.使用 :not() 在菜单上应用/取消应用边框 先给每一个菜单项添加边框 CSS Code复制内容到剪贴板 /* add border */ .nav li { border-right: 1px ...

随机推荐

  1. UESTC 1599 wtmsb【优先队列+排序】

    题目链接:UESTC 1599 wtmsb 题意:给你一组数,每一次取出两个最小的数,将这两个数的和放入这组数中,直到这组数只剩下一个,求最后剩下那个数的大小! 分析:比赛的时候首先我就看到这道题数据 ...

  2. HDU 2147 kiki's game(规律,博弈)

    kiki's game Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 40000/10000 K (Java/Others)Total ...

  3. [bzoj3048] [Usaco2013 Jan]Cow Lineup

    一开始一脸懵逼.. 后来才想到维护一左一右俩指针l和r..表示[l,r]这段内不同种类的数字<=k+1种. 显然最左的.合法的l随着r的增加而不减. 顺便离散化,记一下各个种类数字出现的次数就可 ...

  4. SQL强化(二) 在Oracle 中写代码

    一  : 关于查询中的转换 -- 字符串转换 一 : decode 函数 转换 SELECT DECODE ( PROTYPE.PRO_TYPE_DATE, 'L', '长', 'm', '短', ' ...

  5. 关于React Native的那些坑

    好久没写博客了,特地把之前接触React Native时遇到的坑总结一下. 初始化一个React Native项目时,可能会遇到以下这些坑: 1.项目版本号与安卓模拟器中安装的 compileSdkV ...

  6. eclipse配置虚拟路径后,每次启动tomcat都会虚拟路径失效的问题解决

    由于,eclipse启动tomcat部署项目并不是直接把项目放到tomcat的webapps目录下的,而是从我们在eclipse配置的外部tomcat中取出二进制文件,在eclipse内部插件中作为t ...

  7. Tomcat配置虚拟路径访问容器外的硬盘资源

    问题: 如果tomcat中上传了很多的图片,会导致tomcat启动的时候会慢,所以应该把图片上传到tomcat容器外部 那么,问题来了: tomcat出于安全考虑,禁止了直接访问外部硬盘资源. 解决: ...

  8. ThinkPHP5上传图片并压缩为缩略图

    使用thinkphp开发app后端中,需要实现一个处理上传图片队列的功能 这是个上传多图片保存并且需要对其中一张图片进行压缩的功能 (使用的html5 mui框架开发app,如果直接载入原图,app客 ...

  9. 已有使用Key登陆机器,创建新账号并使用新Key登陆

    背景信息:CentOS6.9机器,目前是使用Key进行登陆的,现在需要创建一个新账号并使用新生成的Key进行登陆使用 使用连接Linux工具:XShell 1.在当前机器中创建一个新用户: # use ...

  10. linux_sudo命令

    sudo 为了收拾su命令的烂摊子 普通用户要切换root,必须要知道root密码,那么相当于人人都有了核按钮,那是绝对不允许的 用su切换到root,无法对是谁要求root权限的身份进行控制,拿到r ...