改变超简单网页颜色的简单布局效果如下。
布局分析：
1、提高body的背景色
2、设置大箱子宽600，高50，不小于隐藏
3、在span标签上包裹h5标题标签，右边的颜色按钮用ul、li标签设定
布局代码如下。
div class='box'spanh3选择颜色：/H3/spanulclass=' ul box ' id=' ul box ' Li style=' background-color 3360 # 099 ff；'/Lili style=' background-color : # 00ff 99；'/Lili style=' background-color : # 6666 ff；'/Lili style=' background-color : # 993333；'/Lili style=' background-color : # cc 0033；'/Lili style=' background-color : # ccff 66；'/Lili style=' background-color : # ffff 00；'/Lili style=' background-color : # ff 0066；'/Lili style=' background-color : # ff 66 ff；' /li/ul/div Css样式代码如下：
沥的颜色一个也没有。 用内联样式的方法添加了
style/* body背景色*/body { background : RGB (9，243，231 )； (Li )列表样式： none； /*删除默认无序列表*/}.box{width: 600px； height: 50px； line-height: 50px； 后台： # FFf； margin : 50px自动； Overflow :隐藏； /*部分隐藏*/}span{display: block； 玛姬- right : 30px； 浮点：左； }.ulbox {height: 50px； }.ulboxli { display : inline-block； /*内联块级元素*/width: 30px； 高： 30px； margin-right: 15px； margin-top: 10px； border : 1px固态# CCC； cursor: pointer； /*鼠标手势*/}h3，ul{margin: 0； (}/style本机js实现分析：
1、通过【查询选择器】获取符号元素的ID
2、在父元素中添加【addEventlistener】事件，点击后父元素ul中一个Li标签都不会出现
3、在事件对象e.target中找到当前点击的li标签，通过设置的内联样式style.backgroundColor获取他的颜色
4、获取li色，将body设置为背景色，即可完成这个简单的背景更换颜色
//方法一：为每个元素js//标记单击事件varulbox=document.query selector (# ul box ) )。 ulbox.addeventlistener('click '，function(e ) e ) varstr=(e.target ).style.backgroundcolordocument.body ) 方法2:JQ方法
1、首先下载jq的最新版本，导入文件
2、getComputedStyle获取了元素的风格属性
3、$ ()“”) .为获取类，#为获取id，标签名称全部获取】
4， css ) )是jq中封装的一种方法
//Li标记加上单击事件$(Li ).click ) function ) {//getComputedStyle中获取的元素的样式属性varstr=getcomputedstyle(this ) . )；