CSS实现：红绿灯效果/横向布局/考试表单页

红绿灯效果

使用HTML+CSS实现如图所示的红绿灯效果。

从图中我们可以知道有三个不同颜色的圆，并且三个圆都在灰色矩阵之中

<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>

横向布局

基于 flex 布局来实现横向布局

实现效果如图所示：

图中布局分为四个小部分，我们可以使用flex布局来实现

<style>
        * {
            margin: 0;
            padding:0;
            box-sizing: border-box;
        }
        .parent {
            background-color: gray;
        }
        .nav {
            background-color: red;
            color: white;
            text-align: center;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
        }
        .body {
            display: flex;
        }
        .content {
            width: 80%;
            height: 500px;
            background-color: gray;
            color: white;
            text-align: center;
            font-size: 20px;
            line-height: 500px;
        }
        .left, .right {
            width: 20%;
            height: 500px;
            background-color: green;
            color: white;
            text-align: center;
            font-size: 20px;
            line-height: 500px;
        }
    </style>
    <div class="parent">
        <div class="nav">我是导航区</div>
        <div class="body">
            <div class="left">我是左边栏</div>
            <div class="content">我是内容区</div>
            <div class="right">我是右边栏</div>
        </div>
    </div>

考试表单页

考试表单页CSS样式制作
实现效果如图所示：

HTML5.html

<h1>HTML测试一  
    <button class="one">
        <!-- tagget设置新窗口打开 -->
        <span><a target="_blank" style=text-decoration:none href="css3.html"><div class="two">同学1的测试页</div> </a></span>
    </button>
    <button class="one">
        <span><a style=text-decoration:none href="css3.html"><div class="two">同学2的测试页</div> </a></span>
    </button>
    </h1>
    <p>
        学号：<input type="text" name="xh">
        姓名：<input type="text" name="xm">
        班级：
        <select>
            <option>2020级软件一班</option>
            <option>2020级软件二班</option>
            <option>2020级软件三班</option>
            <option>2020级软件四班</option>
            <option>2020级软件五班</option>
        </select>
    </p>
   

    <thead>
        <h5>一.单选题</h5>
        <tr>
            <td><P>1.根据选择器表示所修饰的内容类别，CSS选择器分为标签选择器、（ ）、ID选择器。</P></td>
            <td>
                <input type="radio">A. 元素选择器
            </td>
            <td><input type="radio">B. 类选择器</td>
            <td><input type="radio">C.图片选择器</td>
            <td><input type="radio">D.文字选择器</td>
        
            <td><p>2.下列的HTML中哪个是最大的标题？</p></td>
            <td><input type="radio">A.&lt;h6&gt;</td>
            <td><input type="radio">B.&lt;h3&gt;</td>
            <td><input type="radio">C.&lt;h4&gt;</td>
            <td><input type="radio">D.&lt;h1&gt;</td>
        </tr>

        <h5>二.多选题</h5>
        <tr>
            <td><p>1.下面是html5新增的元素的是（）</p></td>
            <td>
                <input type="checkbox" id="front">
                <label for="front">li</label>
                <input type="checkbox" id="backend">
                <label for="backend">iframe</label>
                <input type="checkbox" id="test">
                <label for="test">charset</label>
                <input type="checkbox" id="test2">
                <label for="test2">section</label>
                <input type="checkbox" id="test3">
                <label for="test3">aside</label>
            </td>
            <td><p>2.我们不可以在下列哪个HTML元素中放置JavaScript代码？</p></td>
            <td>
                <input type="checkbox" id="front">
                <label for="front">&lt;script&gt;</label>
                <input type="checkbox" id="backend">
                <label for="backend">&lt;javascript&gt;</label>
                <input type="checkbox" id="test">
                <label for="test">&lt;js&gt;</label>
                <input type="checkbox" id="test2">
                <label for="test2">&lt;scripting&gt;</label>
            </td>
        </tr>
        <h5>三.填空题</h5>
        <tr>
            <td>1.在HTML中，标记＜font＞的Size属性最大取值可以是:<input type="text" name="qz"> </td>
            <td><p>2.不用发布就可以在本地计算机上浏览的页面编写语言是:<input type="text" name="qz"> </p></td>
        </tr>
        <h5>四.判断题</h5>
        <tr>
            <td>1.超文本标记语言就是HTML。</td>
            <td><p><input type="radio">对<input type="radio">错</p></td>
            <td>2.Web 标准的制定者是微软公司。</td>
            <td><p><input type="radio">对<input type="radio">错</p></td>
        </tr>
        <h5>五.简答题</h5>
        <tr>
            <td><p>1.前端页面有哪三层构成，分别是什么?</p></td>
            <td>
                <textarea cols="50" rows="5"></textarea>
            </td>
            <td><p>2.HTML与CSS之间的区别</p></td>
            <td>
                <textarea cols="50" rows="5"></textarea>
            </td>
        </tr>
    </thead>
    <p>
        <a href="web.html">
            <button>提交试卷</button>
        </a>       
    </p>

test.css

body{
    /* 加载背景图 */
    background:url(tp.webp)  no-repeat center center;
    /* 让背景图基于容器 */
    background-size:70%;
    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
    background-attachment:fixed;
    /* 设置背景颜色，背景图加载过程中会显示背景色 */
    background-color:#CCCCCC;
    /* 背景图片不重复 */
    background-repeat: no-repeat;

 }

h3 {
    color: rgba(0, 204, 255, 0.685);
}
.one {
    background-color:rgba(0, 204, 255, 0.685);
}
.button {
    color: red;
}
.two {
    text-decoration: none;
    color: #eee;
}