html+css实现手机缩放,频幕转换
来源:互联网 发布:钢材贸易进销存软件 编辑:程序博客网 时间:2024/06/05 14:37
<strong><span style="font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>MyHtml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><style type="text/css">*{margin:0px;padding:0px;}body{background:url("imgs/img/bj.jpg")no-repeat fixed;background-size:cover;}#nav #logo{background:rgba(255,255,255,0.3)url("imgs/img/logo.png")center no-repeat;width:80px;height:80px;display:block;border:2px solid #00CC00;border-radius:40px;z-index:999;}#nav #ring a{display:inline-block;width:100px;height:40px;margin:15px 0px;}#nav #ring a:nth-child(1){background:rgba(255,255,255,1)url("imgs/img/1_28.png")top no-repeat;}#nav #ring a:nth-child(2){background:rgba(255,255,255,1)url("imgs/img/1_29.png")top no-repeat;}#nav #ring a:nth-child(3){background:rgba(255,255,255,1)url("imgs/img/1_30.png")top no-repeat;}#nav #ring a:nth-child(4){background:rgba(255,255,255,1)url("imgs/img/1_31.png")top no-repeat;}#nav #ring a:nth-child(5){background:rgba(255,255,255,1)url("imgs/img/1_32.png")top no-repeat;}#nav #ring a:nth-child(6){background:rgba(255,255,255,1)url("imgs/img/1_33.png")top no-repeat;}#nav #ring a:nth-child(7){background:rgba(255,255,255,1)url("imgs/img/1_34.png")top no-repeat;}#nav #ring a:nth-child(8){background:rgba(255,255,255,1)url("imgs/img/1_35.png")top no-repeat;}<span style="color:#ff0000;">@media screen and (min-width:880px){</span>#nav{width:100%;height:70px;}#nav #logo{position:absolute;top:0px;left:50px;}#nav #ring{width:865px;height:70px;background:#FFF;position:relative;margin:0px auto;}}<span style="color:#000099;">@media screen and (max-width:880px){</span>#nav{width:256px;height:256px;border-radius:50%;position:fixed;bottom:10px;left:10px;}#nav #ring{width:256px;height:256px;background:rgba(0, 0, 0, 0.5);position:relative;margin:0px auto;border-radius:50%;transform:scale(0.1) rotate(-27deg);transition:all 500ms ease-out;}#nav #logo{position:absolute;bottom:0px;left:0px;top:0px;right:0px;margin:auto;} #nav #ring a{display:block;width:40px;height:40px;border-radius:20px;position:absolute;margin-left:-20px;margin-top:-20px;}#nav:hover #ring{transform:scale(1.1) rotate(0deg);opacity:1;}}</style> </head> <body> <div id="nav"><a href="http://#" id="logo"></a><div id="ring"><a href="#" class="menuico"></a><a href="#" class="menuico"></a><a href="#" class="menuico"></a><a href="#" class="menuico"></a><a href="#" class="menuico"></a><a href="#" class="menuico"></a><a href="#" class="menuico"></a><a href="#" class="menuico"></a></div> </div> <script type="text/javascript">var ico=document.querySelectorAll('.menuico');for(var i=0,l=ico.length ;i<l ;i++ ){ico[i].style.left=(50-35*Math.cos(-0.5*Math.PI-2*(1/l)*i*Math.PI)).toFixed(4)+"%";ico[i].style.top=(50+35*Math.sin(-0.5*Math.PI-2*(1/l)*i*Math.PI)).toFixed(4)+"%";}</script> </body></html></span></strong>
1 0
- html+css实现手机缩放,频幕转换
- html禁止手机端缩放
- 禁止html在手机端自由缩放
- html css 适配手机
- css 实现图片的等比例缩放
- 用css实现图片等比例缩放
- CSS+JS实现图片无缩放旋转
- CSS实现等比例缩放的盒子
- 纯CSS实现宽高成比例缩放
- Html+css实现柱状图
- HTML+CSS实现loading
- Javascript实现HTML的字体缩放
- JavaWeb基础知识:Html和Css实战WebView实现手机显示网页
- html css 图片缩放等居中显示代码
- html 网页背景图片根据屏幕大小CSS自动缩放
- html/css手机网站基础代码
- CSS实现手机侧滑
- 【html&css】CSS圆角框的实现方法
- 《从0到1》之企业经营的三重境界
- Android相册中获取图片和路径
- [简单]使用docx4j制作简单的word(2007)小结
- [LeetCode OJ][009]Palindrome Number
- 算法导论上的quicksort实现
- html+css实现手机缩放,频幕转换
- ngix 环境中php程序以root身份执行linux命令
- 【Android】首次进入应用时加载引导界面
- c++ 模板之 抽象工厂
- Mybatis like查询的写法
- 单元测试——初识
- Hadoop计算中的Shuffle过程
- Swift计算字符串高度,宽度,size方法
- PHP中VC6、VC9、TS、NTS版本的区别与用法详解