Google案例

谷歌logo

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type = "text/css">span{font-size: 100px;}.logo_g{color: blue;}.logo_darkred{color: darkred}.logo_o2{color: orange}.logo_l{color: darkgreen}</style></head><body><span class="logo_g">G</span><span class="logo_darkred">o</span><span class="logo_o2">o</span><span class="logo_g">g</span><span class="logo_l">l</span><!-- <span class="logo_o">e</span> --><span class="logo_darkred">e</span></body>
</html>

注意点：

命名规则：见名知意

span是小盒子，不会换行

实现谷歌logo的网页显示。

如何用html + css 绘制Google logo相关推荐

用css实现Google logo图标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
如何用纯 CSS 绘制一颗闪闪发光的璀璨钻石
效果预览按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. 在线演示 https://codepen.io/zhang-ou/pen/qYqwQp 可交互视频教程此视 ...
前端每日实战：64# 视频演示如何用纯 CSS 绘制一个足球场
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BVqXwJ 可交互视频此视频是可 ...
如何用纯 CSS 绘制一个世界上不存在的彭罗斯三角形
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RyvgMZ 可交互视频教 ...
前端每日实战：28# 视频演示如何用纯 CSS 绘制一个世界上不存在的彭罗斯三角形...
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RyvgMZ 可交互视频教程此视频 ...
【圣诞节限定】今天教你如何用Html+JS+CSS绘制3D动画圣诞树
一.前言应CSDN的邀请,这次给大家展示一波,如何用H5技术绘制3D圣诞树. 二.创意名只采用简单的Html+JS+CSS 技术绘制. 三.效果展示圣诞树修过如下: 四.编码实现将源码复制保存 ...
如何用css绘制一个五角星并添加旋转动画
关于三角形的绘制,大家已经贡献过诸如将五角星切割成三个三角形来绘制等的更加标准简洁的画法,这篇文章权当抛砖引玉,为大家贡献一些不一样的思路吧,当然这个五角星的完成度也不是特别完美,有任何意见也欢迎大佬 ...
HTML5绘制国际象棋,如何用纯CSS实现一副国际象棋
这篇文章主要介绍了关于如何用纯CSS实现一副国际象棋 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下源代码下载每日前端实战系列的全部源代码请从 github 下载: https:/ ...
如何用css绘制一个三角形？
一.前言通常我们在开发过程中,像一些播放器的暂停按钮.或者是一些下拉框等等,都会用到三角形. 一般我们会使用一些svg或者是icon图标来替代,那么有没有想过该怎么去绘制一个三角形呢? 废话不多说 ...

如何用html + css 绘制Google logo

Google案例

如何用html + css 绘制Google logo相关推荐

最新文章

热门文章