css制作桌面上的两个球

HTML页面开发中，有时候需要呈现一些场景，有的用图片来完成，有的用css来模拟完成。
下面一起来看下，怎样用css来模拟显示一张桌面上的两个球。

操作方法

  • 01

    首先是html代码，这里的代码如图，主要是用三个div来模拟，样式名为 y1,y2的是两个圆， zm是桌面 <div class="y1"></div> <div class="y1 y2"></div> <div class="zm"></div>

  • 02

    接着看下y1的样式代码，主要是通过设置border-radius边角弧度来让div显示成圆形，再添加上背景色background-color来设置圆的颜色， display: inline-block 是为了让两个圆显示在同一水平线上 background-color: #4caef0; border-radius: 100px; display: inline-block; height: 200px; width: 200px;

  • 03

    y2第二个圆同样用 .y1的样式，所不同的是，他有自己的样式，就是设置高度和宽度，这使第二个圆比较小一点 .y2{ height: 80px; width: 80px; }

  • 04

    先看下目前代码的页面效果，就是两个并排的圆。

  • 05

    再加上桌面的样式代码，其实就是一个有背景色的div长方形 .zm { background-color: #66aef0; border-radius: 4px; height: 30px; width: 400px; }

  • 06

    页面效果显示如图

  • 07

    从上图可以看到，圆和长方形有点间隔，我们在样式上加上负的margin，让这个间隔消失掉， margin-top: -3px;

  • 08

    现在的效果好点了。

  • 09

    再为两个圆加一点修饰，添加投影效果。样式为 box-shadow: 5px 7px 10px #666;

  • 10

    完成了。看下现在的效果，

赞 (0)

相关推荐

  • 小米手机怎么让桌面上有两个微信图标

    小米手机怎么让桌面上有两个微信图标

    小米手机怎么让微信分身,有两个图标,下面小编介绍一下.具体如下:1. 打开手机后,点击[设置]图标2. 向下滑动页面,找到[应用双开]打开3. 列表中显示的就是可以双开的应用,点击微信后面的按钮4. ...

  • WIN7如何在一个桌面上显示两个窗口

    有的时候,我们可以在桌面上显示两个窗口,同时操作.下面我就来演示一下一个桌面显示两个窗口. 操作方法 01 我们先打开一个CAD,然后再打开一个WPS文字来演示. 02 如图所示,右键单击任务栏,弹出 ...

  • win7桌面上的两个desktop.ini文件千万不要删除

    win7系统里的desktop.ini文件是有用的 操作方法 01 使用win7一段时间后,在清理垃圾时发现系统盘有许多desktop.ini,其中在win7桌面上竟然同时有两个,以为是病毒作怪,毫不 ...

  • 怎么在一个手机上登录两个QQ聊天软件

    有时候有多个qq账号情况下,来回退出切换账户比较麻烦,可以设置手机上两个qq聊天软件同时登录. 操作方法 01 首先点开手机设置,进入设置界面. 02 下拉设置菜单,从中选择应用双开功能. 03 选择 ...

  • 去除Win7桌面上快捷方式图标的小箭头

    问： 我的电脑升级为Windows 7系统了，现在想去掉桌面上那些图标左下角的小箭头，看着挺碍眼，但不想用什么优化工具，免得把我的系统给搞得一团糟，我只想去掉那些图标的小箭头，不需要做其他什么，请告知 ...

  • 美图秀秀使用情侣照制作桌面壁纸

    想不想打开电脑就看见自己和TA甜蜜的模样呢?那就用你们的情侣照做一张可爱壁纸吧!这种壁纸的制作过程非常简单哦,用普通的情侣随拍照配上"美图秀秀"里自带的可爱背景可以就搞定了!效果还 ...

  • div+css制作导航下拉菜单

    div+css制作导航下拉菜单 操作方法 01 首先看如下代码: 02 预览效果: 03 新增如下代码: 04 预览效果如下: 05 发现样式乱了,这是因为新增的li继承了原本的 Float:left ...

  • 在Linux桌面上随意使用Windows文档的方法

    在Windows系统中，我们喜欢把自己编制的各种文档保存在“我的文档”中，在安装 Windows和Linux双系统的机器中，我们在Linux中也经常要用到“我的文档”中的文档，我们也希望在Linux中 ...

  • win7 64位系统桌面上计算机图标不见了无法进入资源管理器

    桌面上的计算机图标不见了如何找回分享给大家，大家都知道电脑的桌面都会放置一些通用图标或者程序快捷方式的图标，我们会经常打开计算机进入资源管理器界面，而桌面上的计算机图标是win7和win8才有的，不过 ...