首页
分类 icon
戁囘笔记 搬砖秘籍 生活涂鸦 百宝箱
关于
友链
  • 使用 box-shadow 代替 border

    Jul 16, 2019 CSS 前端开发

    在前端开发中给一个 div 添加边框,一般是使用border属性。 如下: <div class="box"> </div> CSS .box { background: blue; width: 100px; height: 100px; border: 3px solid red; } 效果图: 使用box-shadow实现 使用box-shadow也可以实现类似效果。 box-shadow: 0 1px 0 0 red; /* Border bottom */ …

    阅读更多
  • Bootstrap 4 中 hidden-* 和 visible-* 类都去哪了?

    Oct 17, 2018 CSS 前端开发 bootstrap

    之前使用过一个CMS开发过后台系统,使用了 Bootstrap3,里面有好个非常好用的css类 hidden-* 和 visible-*,可以方便地实现响应式。最近帮朋友改一个基于 Bootstrap 4 开发的系统,却发现找不到这两个好用的类啦。后来仔细看了一下,发现在 Bootstrap 4 中,这2个类前缀已经被移除了。 取而代之的是新的控制 display 的方法,见这里:Display property · Bootstrap 几个示例 下面的示例来自 Stackoverflow Show/hide for …

    阅读更多
  • text-overflow: ellipsis 无效的解决方案

    Mar 12, 2018 CSS 前端开发

    一个简单的需求,要展示用户的微信名,有的人喜欢把微信名起的很长,导致一个框框显示不下,于是用到了 text-overflow 的属性。代码如下: width: 90%; margin: 0 auto; overflow: hidden; font-size: 14px; color: #fff; text-align: center; text-overflow: ellipsis; 可效果不是我想要的 解决方案 可以看出问题出在换行,加一句white-space: nowrap;即可。

    阅读更多
  • CSS 中 margin 与 padding 的百分比

    Jan 10, 2018 CSS 前端开发

    最近做开发的时候用到了多次 margin: xx% 来做自适应的网页布局,但这个东西有时候出来的结果并不是自己所想的,于是去百度了一下这个百分比的计算基准,结果发现了一个比较好玩的点。 示例HTML <div class="boxer"> <div class="box"></div> </div> 示例CSS .boxer { width: 600px; height: 400px; background: red; } .box { …

    阅读更多
  • 不定宽高元素的水平垂直居中

    Jan 10, 2018 CSS 前端开发

    前端开发中水平垂直居中是绕不开的坎,尤其是宽高不定的元素,之前听说过总总办法,由于自己懒,也没一一去试,今天就做一个总结。 PS:纯CSS实现,布局的问题不应试交给JavaScript(除非某些破不得已的情况)。 预期结果 HTML代码 <div class="panel"> <div class="box"></div> </div> Flex 方法 .panel { width: 600px; height: 400px; …

    阅读更多
  • 使用 Less 替换 wxss 开发微信小程序

    Jan 10, 2018 CSS 前端开发 小程序
    使用 Less 替换 wxss 开发微信小程序

    微信小程序开发中默认使用的 wxss 做为样式文件,这货对应成前端就是 CSS 文件,所以通常写 wxss 文件的时候会很痛苦。因为我已经完全放弃了小程序自带的编辑器(参考:wxapp.vim——使用Vim开发小程序利器),于是尝试在微信小程序开发中引入 Less 来自动编译 wxss。 思路 启用一个 gulp 任务,在文件更新的时候自动将 .less 文件编译成 .wxss 文件。 主要用到了 2 个 gulp 插件,gulp-less 和 gulp-rename。前者用来编译 Less 文件,后者用来将编译出来的 css …

    阅读更多
  • CSS3 first-child not work

    Jan 20, 2017 CSS first-child 前端开发

    For some reason, I tried to use CSS3 selector :first-child, but it not works in my project.

    阅读更多
  • 关于CSS中box-sizing属性的一点心得

    May 15, 2016 CSS box-sizing 盒模型 前端开发

    最近需要写这样一个布局:一个父元素,里面有两个子元素,两个子元素的宽度为父元素的一半。这在CSS中倒是一个很简单的问题,所以很容易就有如下代码。

    <style type="text/css">
      *{
        padding : 0;
        margin  : 0;
      }
      #outer{
        width      : 600px;
        height     : 300px;
        background : red;
        color      : white;
      } …

    阅读更多
  • CSS中神奇的height:100%

    May 12, 2016 CSS 前端开发

    最近使用CSS布局中发现了一个较为神奇的属性: height:100% 。

    神奇在哪里呢?

    阅读更多
    • ««
    • «
    • 1
    • 2
    • »
    • »»

推荐文章

  • 庚子笔记之腊月初二 庚子笔记之腊月初二

    Jan 14, 2021

  • 大姨爹来了 大姨爹来了

    May 24, 2014

  • AppImage —— 一个值得跟踪使用的Linux项目

    Feb 23, 2018

  • Laravel Cannot use PhpParser Node Scalar String as class name解决方案 Laravel Cannot use PhpParser Node Scalar String as class name解决方案

    Jan 14, 2018

  • MFC控件介绍之slider篇 MFC控件介绍之slider篇

    May 5, 2011

  • 庚子笔记之冬月二十

    Jan 3, 2021

Copyright 2009- 闻心阁. All Rights Reserved SiteMap