css3简单练习实现遨游浏览器logo的绘制


Posted in HTML / CSS onJanuary 30, 2013

原来CSS3是这么回事,抓紧学啊
css3简单练习实现遨游浏览器logo的绘制

复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>CSS3</title>
<style type="text/css">
* {margin:0; padding:0}
.main {width:800px; margin:110px auto 0}
.main_wrapper {width:240px; height:240px; border-radius:120px; background:#B1E4FF; border:2px solid #789CB6; box-shadow:5px 5px 7px #999}
.main_wrap {width:230px; height:230px; border-radius:115px; position:relative; top:5px; left:5px; background:#3B99E3}
.white_1 {width:150px; height:100px; background:#FFF; position:relative; left:42px; top:70px; border-radius:3px 20px 3px 3px}
.white_2 {width:35px; height:45px; background:#FFF; position:relative; left:33px; top:30px; border:25px solid #3B99E3}
</style>
</head>
<body>
<div class="main">
<div class="main_wrapper">
<div class="main_wrap">
<div class="white_1">
<div class="white_2"></div>
</div>
</div>
</div>
</div>
</body>
</html>
HTML / CSS 相关文章推荐
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
HTML5 Canvas 起步(2) - 路径
May 12 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
Apr 15 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 HTML / CSS
HTML中link标签属性的具体用法
May 07 HTML / CSS
IE滤镜与CSS3效果(详细整理分享)
Jan 25 #HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 #HTML / CSS
纯css3无js实现的Android Logo(有简单动画)
Jan 21 #HTML / CSS
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 #HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 #HTML / CSS
css3 box-sizing属性使用参考指南
Jan 08 #HTML / CSS
css3背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 #HTML / CSS
You might like
如何去掉文章里的 html 语法
2006/10/09 PHP
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
逆序二维数组插入一元素的php代码
2012/06/08 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
python版简单工厂模式
2017/10/16 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
python中使用np.delete()的实例方法
2021/02/01 Python
荟萃全球保健品:维他购
2018/05/09 全球购物
ORACLE第二个十问
2013/12/14 面试题
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
年终自我鉴定
2013/10/09 职场文书
咨询公司各岗位职责
2013/12/02 职场文书
大学生职业生涯规划书模板
2014/01/03 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
简历中的自我评价范文
2014/02/05 职场文书
新闻发布会主持词
2014/03/28 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
员工担保书范本
2015/09/22 职场文书
MySQL实现配置主从复制项目实践
2022/03/31 MySQL
Python利用zhdate模块实现农历日期处理
2022/03/31 Python