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 给背景设置渐变色的方法
Sep 12 HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
CSS3实现多背景展示效果通过CSS3定位多张背景
Aug 10 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
CSS3实现时间轴特效
Nov 02 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 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与javascript的两种交互方式
2006/10/09 PHP
php xml文件操作代码(一)
2009/03/20 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
php简单实现数组分页的方法
2016/04/30 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
Python下线程之间的共享和释放示例
2015/05/04 Python
Python编程中的for循环语句学习教程
2015/10/14 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
python编程羊车门问题代码示例
2017/10/25 Python
Python多项式回归的实现方法
2019/03/11 Python
numpy库reshape用法详解
2020/04/19 Python
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
幼儿园大班毕业教师寄语
2014/04/03 职场文书
高中语文课后反思
2014/04/27 职场文书
思想作风建设心得体会
2014/10/22 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python