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教程(7):CSS3嵌入字体
Apr 02 HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
CSS3实现swap交换动画
Jan 19 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 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
wamp安装后自定义配置的方法
2014/08/23 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
php中this关键字用法分析
2016/12/07 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
js数组去重的hash方法
2016/12/22 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
python基础教程之对象和类的实际运用
2014/08/29 Python
python入门教程之识别验证码
2017/03/04 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
python将时分秒转换成秒的实例
2019/12/07 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
基于FME使用Python过程图解
2020/05/13 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
python实现简单的学生管理系统
2021/02/22 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
煤矿班组长的职责
2013/12/25 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
HTML基础详解(下)
2021/10/16 HTML / CSS
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers