<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Task</title> <style> #title { color: #230672; font-size: 24px; } p { font-size: 14px; } .name { color: #6D48D7; } button:hover { background: #cddc39; } * { margin: 0; padding: 0; } body { font-family: Roboto; } .block { background: #d9e9e5; padding: 10px; margin: 20px; } .title { font-size: 20px; font-weight: 700; margin-bottom: 10px; } .description { font-size: 16px; margin-bottom: 10px; } .block:hover { background: blue; } .title:hover { font-size: 30px; } table { border-collapse: collapse; border: 1px solid black; font-size: 20px; overflow: hidden; } th, td { border: 1px solid black; padding: 10px; text-align: center; position: relative; } td:hover { background-color: blue; } th:hover { background-color: blue; color: blue; } </style> </head> <body> <h2 id="title">Volcanoes</h2> <p><span class="name">Vesuvius</span>, Italy</p> <p><span class="name">Yellowstone</span>, USA</p> <p><span class="name">Nyiragongo</span>, Congo</p> <p><span class="name">Popocatepetl</span>, Mexico</p> <p><span class="name">Chaitén</span>, South America</p> <br> <hr> <button>Click on the button</button> <br> <hr> <div class="block block2"> <p class="title">Tula</p> <p class="description">Tula is a city in Russia, the administrative center of the Tula region and the urban district of the city of Tula. Hero city. Tula is located in the north of the Central Russian Upland on the banks of the Upa River, 180 km south of Moscow.</p> </div> </div> <div class="block block3"> <p class="title">Nizhny Novgorod</p> <p class="description">Nizhny Novgorod is a city in central Russia, the administrative center of the Volga Federal District and the Nizhny Novgorod Region. It is the second most populous city in the Volga Federal District and on the Volga River.</p> </div> <br> <hr> <br> <table> <tr> <!-- First row, table header --> <th>Product</th> <!-- header header --> <th>January</th> <th>February</th> <th>March</th> </tr> <tr> <!--Second line--> <th>Peaches</th> <td>86</td> <td>85</td> <td>89</td> </tr> <tr> <!-- Third line--> <th>Apples</th> <td>87</td> <td>90</td> <td>97</td> </tr> <tr> <!-- Fourth line--> <th>Bananas</th> <td>57</td> <td>53</td> <td>55</td> </tr> </table> </body> </html>
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容