wu.ginnan asked 4 years ago
please explain the code, thanks!
<style>body {max-width: 300px;margin: 0pxauto;}
.switch {position:relative;display:inline-block;width:120px;height:68px}
.switchinput { display:none }
.slider {position:absolute;top:0;left:0;right:0;bottom:0;background-color:#ccc;border-radius:34px}
.slider:before {position:absolute;content:"";height:52px;width:52px;left:8px;bottom:8px;background-color:#fff;-webkit-transition:.4s;transition:.4s;border-radius:68px}
input:checked+.slider{ background-color:#2196F3 }input:checked+.slider:before {-webkit-transform:translateX(52px);-ms-transform:translateX(52px);transform:translateX(52px)}</style>
1 Answers
Sara Santos Staff answered 4 years ago
Hi.
That part of “code” is called CSS.
CSS is used to style HTML pages. In this case, that CSS is responsible for defining the width of the web page, placing the switch button in the desired position. And then, it also styles the color of the button, the size, etc…
However, creating HTML with CSS pages goes beyond the scope of the course. That could be an entire course.
Nonetheless, if you have a specific question, we might be able to help.
Just for a reference, this is the link for the code: https://github.com/RuiSantosdotme/ESP-MicroPython/tree/master/code/WiFi/Web_Server_Output
Regards,
Sara