练习：完成试卷的页面设计

最新推荐文章于 2023-12-18 21:14:12 发布

axinawang

最新推荐文章于 2023-12-18 21:14:12 发布

阅读量369

点赞数

分类专栏： javaweb 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/daqi1983/article/details/132919053

版权

javaweb 专栏收录该内容

122 篇文章 45 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #exam-page{
            width: 800px;
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 10px
        }
        #big-title{
            padding: 5px;
            border: 2px solid black;
            display: flex;
            width: 100%;
            font-size: x-large;

        }
        #small-title{
            display: block;
            font-size: larger;
            text-align: center;
            padding: 10px;
        }
        .question-type-title{
            font-size: larger;
        }
        .choice-question-input{
            border-style: none none solid none;
            width: 20px;
        }
    </style>
</head>
<body>
    <div id="exam-page"><!--代表整张试卷-->
        <div id="big-title"><!--试卷的大标题-->
            <div style="float:left;width: 20%;">超级全能生</div>
            <div style="width: 60%;text-align: center">
                <div>浙江省新高考信息技术科目基础</div>
                <div>夯实卷（一）</div>
            </div>
            <div style="float: right;width:20px;border-style: solid;text-align: center">1</div>
        </div>
        <div id="small-title"><!--试卷的小标题-->
            <div>信息技术</div>
            <div>本试卷满分50分，考试时间45分钟。</div>
        </div>
        <div class="question-type-title"><!--每类题目的标题-->
            <div style="margin-bottom: 10px">一、选择题（本大题共12小题，每小题2分，共24分。在每小题给出的四个选项中，
                只有一个是符合题目要求的）
            </div>
        </div>
        <div><!--代表所有选择题-->
            <div><!--代表一道选择题-->
                <div style="display: flex;margin-bottom: 10px"><!--每道选择题的小标题-->
                    <div style="float: left"><span style="font-weight: bolder;margin-right: 2px">1.</span>下列有关数据、信息、知识、智慧等说法中，正确的是</div>
                    <div style="float: right;">(<input class="choice-question-input" type="text"/>)</div>
                </div>
                <div style="display: inline"><!--展示4个选项-->
                    <div style="padding-left: 10px">
                        <div style="margin-bottom: 10px">A.计算机可以处理文本、图像、声音、视频等数据，数据量大时，只能使用计算机来处理</div>
                        <div style="margin-bottom: 10px">B.计算机可以处理文本、图像、声音、视频等数据，数据量大时，只能使用计算机来处理</div>
                        <div style="margin-bottom: 10px">C.计算机可以处理文本、图像、声音、视频等数据，数据量大时，只能使用计算机来处理</div>
                        <div style="margin-bottom: 10px">D.计算机可以处理文本、图像、声音、视频等数据，数据量大时，只能使用计算机来处理</div>

                    </div>
                </div>
            </div>

            <div>。。。。。。。</div>
        </div>

    </div>
</body>
</html>