近期碰到的前端样式问题

以下的问题及解决方案都是自己亲自试验过的

一、解决苹果微信audio标签（不能自动播放）

//苹果手机本机会把audio的自动播放禁用掉，解决方案如下：

<audio autoplay loop id="bgMusic" style="width:10rem; height:10rem;">
       <source src="victory.mp3">
              您的浏览器可能不支持音频噢，换个浏览器试试？
 </audio>

var music = document.getElementById("bgMusic");
document.addEventListener("WeixinJSBridgeReady",function(){//进入微信的WeixinJSBridgeReady注入你自己的js
     music.play();//用js让它触发播放
},false);

二、我们总会碰到多个li或其他标签，我们需要点击一个标签然后其他的层有相应的内容显示，代码如下：
//点击li对应的变化

<ul>
	<li class="a">测试1</li>
	<li class="a">测试2</li>
	<li class="a">测试3</li>
	<li class="a">测试4</li>
</ul>

 $(".a").click(function(){
            $(".a").removeClass("ch");//让所有a标签都移除类
            $(this).addClass("ch");  //只让点击的这个显示类  
 });

.ch{
	color:red;//这里写你想要的样式效果
}

三、当我们把某个层、文本框或者按钮等设置为圆形，那么我们点击后还是会显示原来的边框，去掉该边框的解决方案如下：

<div class="a">圆形按钮</div>

.a{
    width:30px;
    height:30px;
    border-radius:50%;
    outline:none;
}

四、当我们的标签有文字时，鼠标就会变成了一竖，那我们可以在css里面更改其样式，鼠标悬停的效果代码如下：

<ul>
      <li class="a">测试测试</li>
</ul>

.a{
    cursor:nw-resize;
}

//这是别人解释的15中鼠标效果，在此引用

hand是手型 
crosshair是十字型 
text是移动到文本上的那种效果 
wait是等待的那种效果 
default是默认效果 
help是问号 
e-resize是向右的箭头 
ne-resize是向右上的箭头 
n-resize是向上的箭头 
nw-resize是向左上的箭头 
w-resize是向左的箭头 
sw-resize是左下的箭头 
s-resize是向下的箭头 
se-resize是向右下的箭头 
auto是由系统自动给出效果
五、判断安卓手机或苹果手机再给相应的样式

 <!-- 手机端（判断） -->
    <script>
            var addStyleLink = function(href){
            var head = document.getElementsByTagName('head')[0];
            var styleLink = document.createElement('link');
            styleLink.setAttribute('rel','stylesheet');
            styleLink.setAttribute('href',href);
            head.appendChild(styleLink);
        }         
        // 苹果手机采用CSS1
        if(/iphone/i.test(navigator.userAgent))
            addStyleLink('css/pingguo.css');
        // 安卓手机采用CSS2
        if(/android/i.test(navigator.userAgent))
            addStyleLink('css/anzhuo.css');
      </script>

六、我们可能会用到插件，比如手机滑屏，我引用的插件是pageSwitch.js，但是没有效果，原因是我的布局有问题，它的布局应该是这样的

<div>
    <div></div>
    <div></div>
    <div></div>
</div>

像这样，只有同级的div，引用的那个插件才有效果。可以把它的类名写在上面那些层里面，再把你自己的每一个小页面的代码丢进相应的div里面

七、提示框有两个选择：

function logout(){
    if (confirm("你确定要关闭吗？是－选择确定，否-选择取消"))...{
    window.location.href="login.html?act=logout"
    }
}