学习纯CSS打造银色MacBook Air（一）代码部分

最新推荐文章于 2022-02-15 11:39:15 发布
最新推荐文章于 2022-02-15 11:39:15 发布
阅读量247 收藏
点赞数
分类专栏： CSS 文章标签： css
原文链接：https://mp.weixin.qq.com/s?__biz=MzIzNTU2ODM4Mw==&mid=2247492052&idx=2&sn=dcc973c10cad2042e200d99e3e62180d&chksm=e8e78c44df9005522a799e705c9ccf09c6b926fb2b476f55f9020897c36aa9d32a068586f569&mpshare=1&scene=1&srcid=&sharer_sharetime=1592476391069&sharer_sh
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<div class="board">
    <title>Document</title>
</head>
<body>
  <div class="board">

    <div class="blackbar">
    </div>
    <div class="keyboard">
      <ul>
      
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li><span>!</span><span>1</span></li>
        
        <li><span>@</span><span>2</span></li>
        
        <li><span>#</span><span>3</span></li>
        
        <li><span>$</span><span>4</span></li>
        
        <li><span>%</span><span>5</span></li>
        
        <li><span>^</span><span>6</span></li>
        
        <li><span>&</span><span>7</span></li>
        
        <li><span>*</span><span>8</span></li>
        
        <li><span>(</span><span>9</span></li>
        
        <li><span>)</span><span>0</span></li>
        
        <li><span>—</span><span>-</span></li>
        
        <li><span>+</span><span>=</span></li>
        
        <li></li>
        
        <li></li>
        
        <li>Q</li>
        
        <li>W</li>
        
        <li>E</li>
        
        <li>R</li>
        
        <li>T</li>
        
        <li>Y</li>
        
        <li>U</li>
        
        <li>I</li>
        
        <li>O</li>
        
        <li>P</li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li>A</li>
        
        <li>S</li>
        
        <li>D</li>
        
        <li>F</li>
        
        <li>G</li>
        
        <li>H</li>
        
        <li>J</li>
        
        <li>K</li>
        
        <li>L</li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li>Z</li>
        
        <li>X</li>
        
        <li>C</li>
        
        <li>V</li>
        
        <li>B</li>
        
        <li>N</li>
        
        <li>M</li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li>By Pure CSS.To Be Continued.</li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
        <li></li>
        
      </ul>
    
    </div>
    
    <div class="touch">
    
     
    
    </div>
    
    </div>
    
    
</body>
</html>

<style>
  .board{

    margin: 0 auto;

    padding: 0 auto;

    width: 600px;

    height: 450px;

    margin-top: 50px;

    background: rgb(210,210,210);

    border-radius: 20px;

    position: relative;

    box-shadow: 0px 5px 6px rgb(160,160,160);

    

    background:-webkit-linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1));

  }

  .board:before{

    content: '';

    display: block;

    width: 780px;

    height: 20px;

    background: rgb(210,210,210);

    border-radius: 0px 0px 3px 3px;

    border-top-left-radius: 390px 18px;

    border-top-right-radius: 390px 18px;

    position: absolute;

    top:-20px; 

    left: -90px;

    border-bottom: 2px solid rgb(0,0,0); 

    background:-webkit-linear-gradient(top,rgb(210,210,210) 50%,rgb(255,255,255));

  }

  .blackbar{

    width: 450px;

    height: 18px;

    position: absolute; 

    left: 75px;

    border-radius: 2px;

    border-bottom: 2px solid #ffffff; /* 小白边 */

    border-right: 2px solid #ffffff;

    background: -webkit-linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%);

    background: -linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%);

  }

  .keyboard{

    position: absolute;

    width:530px;

    height: 216px;

    left: 35px;

    top: 35px;

    border: 1px solid rgb(180,180,180);

    border-radius: 8px;

    background:rgba(250,250,250,1);

    box-shadow:2px 0px 2px rgb(180,180,180) inset,

    0px 3px 3px rgb(180,180,180) inset,

    -5px -0px 1px rgb(255,255,255) inset,

    0px -3px 3px rgb(180,180,180) inset;
    
    }
  ul,li{

    list-style: none;

    margin:0 auto;

    padding:0 auto;

    display: block;

    font-family: "Vrinda";

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

  }

  ul{

    width:530px;

    margin-top: 8px;

    padding-left: 8px;

    /* border:2px solid black; */

  }



  li{

    width:29px;

    height:29px;

    float: left;

    /* padding-left: 0px; */

    margin-right: 5px;

    margin-bottom: 5px;

    background-color: rgb(30,30,30);

    color: rgb(200,200,200);

    text-align: center;

    line-height: 28px;

    font-size: 12px;

    border-radius: 4px;

    border: 1px solid rgb(70,70,70);

    box-shadow: 1px 0px 0px rgb(0,0,0),

    0px 1px 0px rgb(0,0,0),

    -1px 0px 0px rgb(0,0,0),

    0px -1px 0px rgb(0,0,0);

  }
  li:nth-child(-n+14):nth-child(n+1){

    width:30px;

    height:15px;

  }

  li:nth-child(-n+27):nth-child(n+16) span,li:nth-child(40) span,li:nth-child(41) span,li:nth-child(42) span,

  li:nth-child(53) span,li:nth-child(54) span,li:nth-child(-n+66):nth-child(n+64) span{

      display: block;

      margin-top: 5px;

      line-height: 0.5; 

  }
  li:nth-child(28),li:nth-child(29){

    width:45px;

  }

  li:nth-child(43),li:nth-child(55){

    width:55px;

  }

  li:nth-child(56),li:nth-child(67){

    width:73px;

  }

  li:nth-child(-n+74):nth-child(n+68){

    height:33px;

  }

  li:nth-child(72){

    width:173px;

  }

  li:nth-child(71),li:nth-child(73){

    width:37px;

  }

  li:nth-child(75),li:nth-child(77),li:nth-child(78){

    margin-top: 18px;

    height: 14px;

  }



  li:nth-child(76){

    height: 13px;

    margin-top: 19px;

  }



  li:nth-child(78){

    position: absolute;

    bottom: 22px;

    right:38px;

  }
  .touch{

    position: absolute;

    width:200px;

    height:150px;

    border: 2px solid rgb(190,190,190);

    bottom: 23px;

    left: 200px;

    border-radius: 8px;

  }
</style>

效果如图：
在这里插入图片描述

 梦晓天明
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html银白色,纯CSS打造银色MacBookAir（二）_html/css_WEB-ITnose
weixin_42571444的博客
06-15 626
上一篇：《纯CSS打造银色MacBook Air(一)》 写在前面上一篇我们谈了《纯CSS打造银色MacBook Air(一)》，今天我们接着谈。First注：如果图片过大没有完全显示，请F5或Ctrl+F5。Double注：本文为Markdown+少量html编辑。Triple注：没有查看第一部分的可以猛戳上方查看第一部分。 三、第三步这一步来做屏幕旋转轴，也就是屏幕下方的那条黑色矩形black...
css博客模版(银色风格)
03-03
漂亮的css博客模版页面。不会做美工也不愁，页面非常漂亮精致。。
CSS颜色名称和值
bettersun00的专栏
12-03 375
CSS颜色名称和值 效果见附件或复制代码保存为HTML文件 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;CSS颜色名称和值&lt;/title&gt; &lt;style&gt; BOD
【html】css字体渐变
Leijiang0504的博客
02-15 241
可以自己修改需要的颜色代码 -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));//银色
CSS标准颜色值查找 16进制10进制颜色值表 颜色中英文名称 在线颜色配色对比效
cui_angel的专栏
06-20 1万+
名称背景 数值背景 颜色名称 中文名称 十六进制RGB 十进制RGB 粗细字体配色参考   aliceblue 艾利斯兰 #f0f8ff 240,248,255 艾利斯兰[中国搜]     antiquewhite 古董白 #faebd7 250,235,215 古董白[中国搜]
CSS 颜色代码大全 CSS颜色对照表
hnyanzijun1的博客
07-20 4万+
HTML及CSS常用颜色英文词汇 黑色 银色 灰色 白色 茶色 红色 紫色 紫红 black silver gray white maroon red purple fuchsia #000000 #C0C0C0
银色 rgb_前端纯CSS打造银色MacBook Air（完整版）
weixin_39640904的博客
11-28 1419
前段时间自己用CSS绘制了一个银色的MacBook Air，今天把它从电脑硬盘深处挖了出来，我把我的思路和想法写下来和小伙伴们分享分享。先把最后的效果给大家。文章末尾附上完整的源码MacBook Air效果图零、第零步这里使用了CSS的before、after伪元素、渐变gradient、阴影、nth-child选择器等相关内容，阴影和渐变效果从图片上可能看的不太清楚，小伙伴们可以去上面的Code...
纯css打造漂亮蓝白色横向导航条特效代码
03-20
一份纯CSS loading动画效果代码示例
09-24
本篇文章主要介绍了一份纯CSS loading效果代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
纯CSS3打造粒子模糊随机显示动画特效代码
03-20
纯CSS3打造粒子模糊随机显示动画
纯CSS3打造动感鼠标悬停特效特效代码
03-20
纯CSS3打造动感鼠标悬停特效是一款鼠标移到图片上动画显示文字描述特效。
纯CSS打造Bubble气泡提示框实现代码
12-13
答案是可以的，而且就用纯CSS来来实现，当然在没出效果之前你有权去怀疑这件事情，但出了效果后，你必须坚定的认识：楼主是老实人，出家人是不打诳语的。其实呢这个方法是我以前收藏在另一个博客中的，现在为了能让...
CSS颜色代码大全
热门推荐
dear_zx的博客
01-16 4万+
CSS颜色代码大全         FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 #000000 #FFB7DD #FF88C2 #FF44AA  #FF0088  #C10066  #A20055  #8C0044 
学习纯CSS打造银色MacBook Air（二）笔记部分——length值
tigerwxm630的博客
06-21 211
长度 <length> 用于表示距离尺寸的 CSS 数据类型。 语法：<length> 数据类型由一个 <number> 和一个长度单位构成。 单位： 相对长度单位 相对长度代表着以其它距离为单位的一种尺寸。这个单位可以是指定字符的大小，行高，或者是 视口(viewport)（详见学习纯CSS打造银色MacBook Air（二）笔记部分——视口(viewport)）的大小。 字体相对长度 cap： 表示元素字体 font 的“上限高度”（cap height，大
颜色代码查找
mark_shuai的博客
06-06 2062
最近找到了一个网站，学css的，有个东西不错，点击一个颜色就可以查询代码，分享出来^_^https://www.baidu.com/search/hi/hi_css.html

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值