通过一个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绑定点击事件然后就完成了