设置图形
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术: HTML CSS JavaScript
作者:爱吃章鱼烧的ChrisTina贺
撰写时间:2021/6/7
写完以下代码之后检查效果时如果没有显示效果请检查是否写错,检查错误时一定要认真检查哦,以防第二次检查疏漏!
HTML源代码:
1.在HTML里面写入三个div,前两个div里面,第三个不用,再写入label标签和input标签,label标签中间写入宽度,(第一个div包括所有内容)如:
- 在写下面的内容时不用写入三个div,只写一个div,不用令名,在写入宽度,如:
3.以此类推,在写入背景颜色即可,如:
- 在div里面写入label标签与input标签,在label标签里面写入边框,如:
- 在div里面写入label标签与input标签,在label标签里面写入圆角,如:
- 在div里面写入button令名,在写入设置即可,再在下面写入一个div标签里面在写入一个div标签,同时class和ID令名,如:
CSS代码:
- 写入通配符:
- 在设置第一个div,如:
- 设置第二个div,如:
- 再设置最后一个div,如:
- 设置第一个div里面的label和input、button标签,如:
- 最后设置最后一个外部div包含在里面的div,如:
JS代码:
- 页面加载事件,获取元素,给button按钮添加点击事件,获取每个input标签的id,赋予value值,如: