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截图_动力节点Java学院整理
Jul 11 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
html form表单基础入门案例讲解
Jul 15 HTML / CSS
详解CSS3浏览器兼容
Dec 24 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
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
php数组编码转换示例详解
2014/03/11 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
js用图作提交按钮或超连接
2008/03/26 Javascript
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
js实现日期级联效果
2014/01/23 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
Python函数参数操作详解
2018/08/03 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
django云端留言板实例详解
2019/07/22 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
某科技软件测试面试题
2013/05/19 面试题
什么是方法的重载
2013/06/24 面试题
优秀女职工事迹材料
2014/02/06 职场文书
高三复习计划
2015/01/19 职场文书
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js
Java获取字符串编码格式实现思路
2022/09/23 Java/Android