@设置图形

设置图形

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： HTML CSS JavaScript

作者：爱吃章鱼烧的ChrisTina贺

撰写时间：2021/6/7

 

写完以下代码之后检查效果时如果没有显示效果请检查是否写错，检查错误时一定要认真检查哦，以防第二次检查疏漏！

 

HTML源代码：

1.在HTML里面写入三个div，前两个div里面，第三个不用，再写入label标签和input标签，label标签中间写入宽度，（第一个div包括所有内容）如：

1. 在写下面的内容时不用写入三个div，只写一个div，不用令名，在写入宽度，如：

3.以此类推，在写入背景颜色即可，如：

1. 在div里面写入label标签与input标签，在label标签里面写入边框，如：

1. 在div里面写入label标签与input标签，在label标签里面写入圆角，如：

1. 在div里面写入button令名，在写入设置即可，再在下面写入一个div标签里面在写入一个div标签，同时class和ID令名，如：

 

 

CSS代码：

1. 写入通配符：

1. 在设置第一个div，如：

1. 设置第二个div，如：

1. 再设置最后一个div，如：

1. 设置第一个div里面的label和input、button标签，如：

1. 最后设置最后一个外部div包含在里面的div，如：

 

JS代码：

1. 页面加载事件，获取元素，给button按钮添加点击事件，获取每个input标签的id，赋予value值，如：