通过事件操作页面

通过一个div去给它写一个大的盒子出来先，然后给它一个"set-con"类，里面就分为两个div

就可以了，一个"left-div"(左边的盒子)，"right-div"(右边的盒子)。

 

接着我们通过内部样式，首先我们先把大的盒子规划出来，给大盒子设置("set-con")，宽、高、圆角、外边距。里面的话我们写("left-div")的宽、高，因为我们右边的盒子右边一条边框所以我们还要设置边框border-rigth;那我们这一个地方就大概的划分出来了，划分出来后我们就开始往左边的div里面输写它的内容了，我们就直接用一个label去写它每一个的样式，第一个它的文字宽度，后面就是它的input文本框，后面的我们就直接复制，后面四个分别是高度、背景色、边框、圆角。还差一个设置按钮，我们就直接给他一个input因为input里面有一个text的类型button，现在基本上就都出来了，我们现在只需要调整了，获取一下left-div的label

设置它的宽、高和行高，因为它是行内元素我们需要给它添加左浮动，我们就找到input设置它的宽、高，在给.left-div添加一个内边距，同样一个添加一个上外边距 .left-div label在给文字进行水平居中，然后设置按钮给它一个ID名，一个文字然后给它设置宽、高，左边就完成了

 

接着来完成右边，我们找到("right-div")设置宽、高，然后设置里面的内容放一个div在里面然后给它一个id名然后设置它的样式给它一个宽、高、背景颜色、圆角、边框、外边距，然后找到("left-div")，在它的inupt里面添加value=""，在给它们添加id名。

 

 

开始js部分，js我们并没有使用fo循环，写一个加载事件，然后获取上面我们需要的元素，获取到之后我们通过box绑定点击事件然后就完成了