未读代码 未读代码
首页
  • Java 18 新功能介绍
  • Java 17 新功能介绍
  • Java 16 新功能介绍
  • Java 15 新功能介绍
  • Java 14 新功能介绍
  • Java 8 新特性

    • Java 8 Lambda 表达式
    • Java 8 Stream 流式操作
    • Java 8 时间处理介绍
    • Java 8 Optional 介绍
  • Java 开发工具
Java 源码分析
Spring Boot 系列
  • Arthas 问题定位
  • JMH 基准测试
GitHub (opens new window)
首页
  • Java 18 新功能介绍
  • Java 17 新功能介绍
  • Java 16 新功能介绍
  • Java 15 新功能介绍
  • Java 14 新功能介绍
  • Java 8 新特性

    • Java 8 Lambda 表达式
    • Java 8 Stream 流式操作
    • Java 8 时间处理介绍
    • Java 8 Optional 介绍
  • Java 开发工具
Java 源码分析
Spring Boot 系列
  • Arthas 问题定位
  • JMH 基准测试
GitHub (opens new window)
  • HTML:CSS:JS

    • CSS - 使用CSS实现Mac窗口效果
      • Jquery - 使用jquery-easing.js实现页面锚点平滑滚动
    • HTML:CSS:JS
    • HTML:CSS:JS
    程序猿阿朗
    2018-08-15

    CSS - 使用CSS实现Mac窗口效果

    来不及了,直接贴代码。

    # HTML代码

    <div class="user-bio">
    	<div class="user-bio-top">
    		<div class="circle-red"></div>
    		<div class="circle-yellow"></div>
    		<div class="circle-green"></div>
    	</div>
    	<div class="user-bio-body">
    		Wait,i know you<br>
    		keep hungry keep foolish<br>
    		苍苍之天不可得久视,堂堂之地不可得久履,道此绝矣!<br/>
    		告后世及其孙子,忽忽锡锡,恐见故里,毋负天地,<br>
    		更亡更在,去如舍庐,下敦闾里!人固当死,慎毋敢佞。
    	</div>
    </div>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    # CSS代码

    主要是三个圆点

    .user-bio {
        font-size: 14px;
        color: #6a737d;
    }
    .user-bio .user-bio-top {
        height: 15px;
        background-color: #E3E3E3;
        padding: 8px 12px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }
    .user-bio .user-bio-body {
        background-color: #EEEEEE;
        width: 100%;
        font-size: 13px;
        color: #666666;
        overflow: auto;
        padding: 20px;
        font-family: "Source Code Pro", Consolas, Menlo, Monaco, "Courier New", monospace;
    }
    .user-bio .user-bio-top div{
        float: left;
        margin-right: 10px;
        width:13px;
        height:13px;
        background-color:#FF5F57;
        border-radius:50px;
    }
    .user-bio .user-bio-top .circle-yellow{
        float: left;
        margin-right: 10px;
        width:13px;
        height:13px;
        background-color:#FFBD2E;
        border-radius:50px;
    }
    .user-bio .user-bio-top .circle-green{
        float: left;
        margin-right: 10px;
        width:13px;
        height:13px;
        background-color:#28CA42;
        border-radius:50px;
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44

    # 最终效果

    MAC-Window-css

    订阅

    文章持续更新,订阅可以关注「 程序猿阿朗 」公众号或者未读代码博客。

    文章作者: 程序猿阿朗
    文章链接:https://www.wdbyte.com/2018/08/html-css/css-mac-window/
    版权声明:本网站当前文章采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 未读代码!
    #Css#Html
    上次更新: 2022/12/05, 08:18:32
    Jquery - 使用jquery-easing.js实现页面锚点平滑滚动

    Jquery - 使用jquery-easing.js实现页面锚点平滑滚动→

    最近更新
    01
    如何搭建一个自己的音乐服务器
    12-04
    02
    JUnit 5 单元测试教程
    11-17
    03
    使用 StringUtils.split 的坑
    11-02
    更多文章>

    提示:评论前请刷新页面,否则评论的可能不是当前文章。

    Theme by Vdoing | Copyright © 2018-2022 程序猿阿朗 | MIT License | 皖ICP备20000567号-1
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式