<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>UC新闻播报</title>
<style type="text/css">
html, body {width:100%;height:100%;min-width: 320px;} /*非常重要的样式让背景图片100%适应整个屏幕*/
@charset "utf-8";
body
{
padding:0;
margin:0;
font-family:微软雅黑;
border:none;
}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0; }
ul,ol,li{list-style-type:none;}
p,h2,h1,h3,h4{ padding:0; margin:0;}
a:link,a:visited{ text-decoration:none;}
a{color: inherit;text-decoration:none;}
.clear{ clear:both;}
/*********************************************************************************************************************************************************
**
*/
.wrapper{
color: #333;
margin: 20px auto;
background-color:#C3D6F3 ;
padding: 15px;
border-radius: 5px;
}
span{
color: #3399ff;
font-size: 15px;
background-color: #fff;
padding: 1px;
border: solid 1px #3399ff;
}
input{
color: #fff;
background-color: #3399ff;
border: solid 1px #fff;
cursor: pointer;
padding: 2px 3px;
}
h4{
color: #333;
margin-top: 20px;
}
p{
font-size: 14px;
color: #555;
margin-top: 30px;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
</head>
<body>
<div class="wrapper">
<span>大红</span>
<span>小蓝</span>
<input type="submit" value="护眼模式"/>
<input type="submit" value="关灯模式"/>
<h4>震惊!王思聪居然破产了,不看后悔!</h1>
<p>你们以为名下有很多负债就是穷人了？负债的作用之一是杠杆，放大所得或者所亏。而他们亏是很难很难的，就像我们富起来一样困难。而像他们这种顶级精英不是一个人在玩，你看到昨天一带一路峰会王健林先生坐在峰会会场了吗？而且给了特写镜头。别意淫了。大额负债是富人的专利。</p>
</div>
<script>
var wrap = function(){
$('.wrapper').width(250).height(auto);
}
wrap();
</script>
<script>
$(document).ready(function(){
$('span:first').click(function(){
$('span:last').removeAttr('style')
$('span:first').attr('style','color:#fff;background-color: #000;')
$('p').css({'color':'red','font-size':'20px'});
})
$('span:last').click(function(){
$('span:first').removeAttr('style')
$('span:last').css({'color':'#fff','background-color': '#000'})
$('p').css({'color':'blue','font-size':'12px'})
})
$('input:first').click(function(){
$('.wrapper').css('background-color','#56c5ff')
$wrap()
})
$('input:last').click(function(){
$('.wrapper').css('background-color','#000')
$wrap()
})
})
</script>
</body>
</html>jquery!很强大很暴力.
removeAttr('style); 移除css属性.
attr('style','background-color:red');,添加背景attr
css('color','red'); css添加一个属性.
css({'background-color':'red','font-size':'20px'});css添加多个属性
var wrap =function(){
$('.div').width().height();
}
wrap();//调用函数