HTML+CSS(练习)实现棋盘&&电话拨号盘&&红绿灯

本文链接：https://blog.csdn.net/weixin_61341342/article/details/130809154

棋盘

HTML+CSS版本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业2591实现棋盘效果</title>
		<style>
			.container {
				width: 600px;
				height: 600px;				
				border: 5px solid black;
				margin: auto;
				display: flex;
			}
			
			.black {
				background-color: black;
				width: 200px;
				height: 200px;
			}
			.white {
				background-color: white;
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div>
				<div class="black"></div>
				<div class="white"></div>
				<div class="black"></div>
			</div>
			<div>
				<div class="white"></div>
				<div class="black"></div>
				<div class="white"></div>
			</div>
			<div>
				<div class="black"></div>
				<div class="white"></div>
				<div class="black"></div>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

HTML+CSS+JavaScript版本

<!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>棋盘</title>
</head>

<body>
    <style>
        .parent-class {
            border: 10px chocolate groove;
        }

        .containereven,
        .containerodd {
            display: flex;
            background-color: dodgerblue;
        }

        .item {
            background-color: #f1f1f1;
            padding: 50px;
            font-size: 30px;
            flex: 1;
            height: 50px;
            text-align: center;
        }


        /* 偶数行 */
        .containereven>div:nth-child(odd) {
            background-color:black;
        }

        .containereven>div:nth-child(even) {
            background-color: white;
        }

        /* 奇数行 */
        .containerodd>div:nth-child(odd) {
            background-color: white;
        }

        .containerodd>div:nth-child(even) {
            background-color: black;
        }
    </style>


    <div class="parent-class">
        <section class="containereven" id="container1"></section>
        <section class="containerodd" id="container2"></section>
        <section class="containereven" id="container3"></section>
    </div>

    <!-- 使用 javascript 在相应的 id 的帮助下在这些部分标签内动态附加元素。 -->
    <script>
        let res1 = [],
            res2 = [],
            res3 = [];
        for (let i = 1; i <= 3; i++) {
            res1 += `<div class="item"></div>`;
            res2 += `<div class="item"></div>`;
            res3 += `<div class="item"></div>`;
        }

        document.getElementById('container1').innerHTML = res1;
        document.getElementById('container2').innerHTML = res2;
        document.getElementById('container3').innerHTML = res3;
    </script>
</body>

</html>

在这里插入代码片

在这里插入图片描述

电话拨号盘

<!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>电话拨号盘</title>
</head>

<body>

    <style>
        #css1 {
            text-decoration:underline;
            color: red;
            font-size: 17px;
        }
        #css2 {
            text-decoration: line-through;
            color: green;
            font-size: 17px;
        }
        #css3 {
            font-weight: bold;
            color: blue;
            font-size: 17px;
        }
        table {
            border-collapse: collapse;
        }

        td {
            width: 100px;
            height: 40px;
            border: 1px solid black;
            font-size: 12px;
            text-align: center;
        }
    </style>

    <table>
        <tr>
            <td id="css1">1</td>
            <td id="css1">2</td>
            <td id="css1">3</td>
        </tr>
        <tr>
            <td id="css2">4</td>
            <td id="css2">5</td>
            <td id="css2">6</td>
        </tr>
        <tr>
            <td id="css3">7</td>
            <td id="css3">8</td>
            <td id="css3">9</td>
        </tr>
    </table>
</body>

</html>

在这里插入图片描述

红绿灯

<!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>红绿灯</title>
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .parent {
            width: 200px;
            height: 600px;
            margin: 0 auto;
            background-color: gray;
            padding: 25px;
        }

        .one,
        .two,
        .three {
            width: 150px;
            height: 150px;
            border-radius: 50%;
        }

        .one {
            background-color: red;
        }

        .two {
            background-color: green;
            margin-top: 50px;
            /* 50px为上下两个圆的边距 */
        }

        .three {
            background-color: yellow;
            margin-top: 50px;
        }
    </style>
    <div class="parent">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>

</body>

</html>