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中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 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
Php图像处理类代码分享
2012/01/19 PHP
php实现点击可刷新验证码
2015/11/07 PHP
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
详解DeBug Python神级工具PySnooper
2019/07/03 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
使用python计算三角形的斜边例子
2020/04/15 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
经典而简洁的婚礼主持词
2014/03/13 职场文书
食品销售计划书
2014/04/26 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
个性发展自我评价2015
2015/03/09 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
银行求职信怎么写
2019/06/20 职场文书