1 .在页面上设置初始值
！ 文档类型html
html
头戴
meta 1charset='utf-8 '
title文档/title
部署link rel=' style sheet ' href=' CSS/style.CSS '//CSS文件
/head
body id='body '
divclass='setBC '
请选择class=' box text ' id=' box color '网页的背景颜色。 /p
//上的p标签的类名设为boxText，id名设为boxColor
divclass='box1' id='color1'/div
//上的p标签的类名设定为box1，id名设定为color1
divclass='box2' id='color2'/div
//上的p标签的类名设定为box2，id名设定为color2
divclass='box3' id='color3'/div
//上的p标签的类名设定为box3，id名设定为color3
divclass='box4' id='color4'/div
//上的p标签的类名设定为box4，id名设定为color4
divclass='box5' id='color5'/div
//上的p标签的类名设定为box5，id名设定为color5
divclass='box6' id='color6'/div
//上的p标签的类名设定为box6，id名设定为color6
/div//将当前div标签的类名设置为setBC
script src=' js/script.js '/script//部署js文件
/body
/html
在样式中设置元素的css样式
@charset'utf-8 '；
/* CSS文档* /
*{
padding: 0px；
margin: 0px；
}
.设置setBC{//类名为setBC的元素的css样式
width: 440px； 设定//宽440像素
高： 40px； //设定高度40像素
border : 1px固态硬盘； //边框设置1像素宽的指定颜色的直线
margin: 35px auto 0； //将上下页边距设定为35像素，适应左右页边距，将上下页边距设定为0
背景色： # fff； //使背景色为白色
}
. setBC .boxText{//设置类名为setBC的元素中类名为boxText的元素的css样式
line-height: 40px； //将行高设置为40像素
浮点：左； //设置元素的左浮动
margin: 0 20px 0 10px； //将左边距设置为10像素，右边距设置为20像素
color: #666； //将文字颜色设为指定颜色
}
. setBC.boxText:hover{
//设置类名为setBC的元素中类名为boxText的元素的伪类的css样式。 (相当于鼠标移动) ) ) ) ) ) ) ) ) )。
color: red； //文字的颜色是红色
}
. box1， box2， box3， box4， box5， box6{
//将类名设置为box1或box2或box3或box4或box5或
box6的元素的css样式width: 30px;//设置宽为30个像素
height: 26px;//设置高为26个像素
float: left;//设置元素左浮动
margin: 8px 5px;//设置上下外边距为8个像素，左右外边距为5个像素
background: yellow;//设置背景颜色为黄色
cursor: pointer;//设置鼠标移事件
}
.box1{//设置类名为box1的元素的css样式
background: #0181cc;//设置背景颜色为指定颜色
}
.box2{//设置类名为box2的元素的css样式
background: #00b9f1;
}
.box3{//设置类名为box3的元素的css样式
background: #ef8201;
}
.box4{//设置类名为box4的元素的css样式
background: #8fc320;
}
.box5{//设置类名为box5的元素的css样式
background: #e84191;
}
.box6{//设置类名为box6的元素的css样式
background: #ee87b4;
}
.box1:hover{//设置类名为box1的元素的伪类的css样式(相当于鼠标移入事件)
background: hsla(202,99%,40%,0.55);//上方指定颜色的透明度为55%
}
.box2:hover{//设置类名为box2的元素的伪类的css样式(相当于鼠标移入事件)
background: hsla(194,100%,47%,0.55);
}
.box3:hover{//设置类名为box3的元素的伪类的css样式(相当于鼠标移入事件)
background: hsla(33,99%,47%,0.55);
}
.box4:hover{//设置类名为box4的元素的伪类的css样式(相当于鼠标移入事件)
background: hsla(79,72%,45%,0.55);
}
.box5:hover{//设置类名为box5的元素的伪类的css样式(相当于鼠标移入事件)
background: hsla(331,78%,58%,0.55);
}
.box6:hover{//设置类名为box6的元素的伪类的css样式(相当于鼠标移入事件)
background: hsla(334,75%,73%,0.55);
}
3. 在script内写上js代码
// JavaScriptDocument
window.onload =function(){//页面加载事件
var qcolor = document.getElementById("boxColor");
//声明一个变量并命名为qcolor，该变量获取的是id名为boxColor的元素
var qcolor1 =document.getElementById("color1");
//声明一个变量并命名为qcolor1，该变量获取的是id名为color1的元素
var qcolor2 =document.getElementById("color2");
//声明一个变量并命名为qcolor2，该变量获取的是id名为color2的元素
var qcolor3 =document.getElementById("color3");
//声明一个变量并命名为qcolor3，该变量获取的是id名为getElementById的元素
var qcolor4 =document.getElementById("color4");
//声明一个变量并命名为qcolor4，该变量获取的是id名为color4的元素
var qcolor5 =document.getElementById("color5");
//声明一个变量并命名为qcolor5，该变量获取的是id名为color5的元素
var qcolor6 =document.getElementById("color6");
//声明一个变量并命名为qcolor6，该变量获取的是id名为color6的元素
var yBody =document.getElementById("body");
//声明一个变量并命名为yBody，该变量获取的是id名为body的元素
qcolor.onclick = function(){//给变量qcolor绑定一个点击事件(点击后触发的事件)
yBody.style.backgroundColor ="#fff";//设置变量yBody的背景颜色为白色
}
qcolor1.onclick = function(){//给变量qcolor1绑定一个点击事件(点击后触发的事件)
yBody.style.backgroundColor ="#0181cc";//设置变量yBody的背景颜色为指定颜色
}
qcolor2.onclick = function(){//给变量qcolor2绑定一个点击事件(点击后触发的事件)
yBody.style.backgroundColor ="#00b9f1";
}
qcolor3.onclick = function(){//给变量qcolor3绑定一个点击事件(点击后触发的事件)
yBody.style.backgroundColor ="#ef8201";
}
qcolor4.onclick = function(){//给变量qcolor4绑定一个点击事件(点击后触发的事件)
yBody.style.backgroundColor ="#8fc320";
}
qcolor5.onclick = function(){//给变量qcolor5绑定一个点击事件(点击后触发的事件)
yBody.style.backgroundColor ="#e84191";
}
qcolor6.onclick = function(){//给变量qcolor6绑定一个点击事件(点击后触发的事件)
yBody.style.backgroundColor ="#ee87b4";
}
}
效果：