Web Technology网络技术LAB-4 CSS-博客blog

<!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
网络技术WebTechnology
Web Technology网络技术LAB-4 CSS

请登录后发表评论
