考生姓名                                        准考证号                   
2019年下半年        Web前端开发初级        实操考试
（考试时间14：00-16:30 共150分钟）
1. 本试卷共4道题，满分100分。
2. 请在指定位置或开发环境下作答。
试题一（20分）
阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（10）代码。
【说明】
在当今互联网技术高速发展的时代，搜索引擎是用户使用率最高的网络服务工具之一。本项目为“搜索引擎”网站。
项目名称为Search，包括搜索主页面index.html、第一个标签页tab1.html、第二个标签页tab
2.html和img文件夹，其中，img文件夹包括图片logo.png。
页面布局和内容为：
（1）index.html为搜索主页，分为三部分，自上而下依次是：搜索框、分类标签和搜索结果。其中，搜索结果使用iframe标签定义，显示tab1.html或tab2.html。
（2）tab1.html为搜索结果页，是“标签页1-网页”的搜索结果，第一部分是搜索结果列表，第二部分是分页页码。其中，使用2个table进行布局。
（3）tab2.html为搜索结果页，是“标签页2-资讯”的搜索结果，第一部分是搜索结果列表，第二部分是分页页码。其中，使用1个table进行布局。
选择不同的类别标签，会显示该类别下的搜索结果。
【效果图】
（1）打开index.html效果如图1所示。
图1-1
（2）点击“标签页2-资讯”，搜索结果显示为tab2.html，效果如图2所示。
图1-2
【代码：搜索主页index.html】
<!（1） html>
<html>
    <head>
        <meta content="text/html;" （2）="utf-8">S
        <title>搜索</title>
        <style>
              .search_val {width: 400px;margin-bottom: 20px;}/*设置搜索框为400px，底部外边距为20px*/
              a{margin-right: 20px}/*设置a链接的右边距为20px*/
        </style>
    </head>
    <body>
        <form （3）="index.html" method="get">
            <input type="text" class="search_val">
            <input type="（4）" value="搜索"/>
        </form>
        <table>
            <tr><td><a href="tab1.html" （5）>标签页1-网页</a></td>
                <td><a href="tab2.html" （5）>标签页2-资讯</a></td></tr>
        </table>
        <hr/>       
       
        <iframe name="main" id="main" （6） width="500px" height="280px"
                frameborder="0" ></iframe>       
    </body>
</html>
【代码：第一个标签页tab1.html】
<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html;" charset="utf-8">
        <title>搜索</title>
        <style>
            body {font-size: 13px;}/*设置页面字体大小为13px*/
            p {width: 380px;}/*设置p元素的宽度为380px*/
            p,h3 {margin: 0;padding: 0;}/*设置内边距和外边距均为0 */
            .noPic{width: 460px;}/*设置类名为noPic的元素的宽度为460px*/
jquery在线免费学习技术
            img{ padding: 10px;}/*设置图片的内边距为10px*/
        </style>
    </head>
    <body>
        <table border="0" width="290px">
            <tr><td>
                <table>
                    <tr><td （7）>
                        （8）
                    </td></tr>
                    <tr><td rowspan="2">
                       
                        <img （9） width="40px"></td>
                        <td><p>超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接等...</p>
                    </td></tr>
                    <tr><td><a href="#">HTML</a></td></tr>
                </table>
            </td></tr>
            <tr><td colspan="2">
                <h3>HTML Standard</h3>
                <p class="noPic">1.2 Is this HTML5?This section is non-normative.In short: Yes.In more length: the term "HTML5" is widely used as a buzzword to refer ...</p>
                <a href="#">HTMLStudy</a>
                </td></tr>
        </table>
        <a href="#">1 </a><a href="#">2 </a><a href="#">3 </a><a href="#">4 </a>
    </body>
</html>
【代码：第二个标签页tab2.html】
<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html;" charset="utf-8">
        <title>搜索</title>
        <style>
            body {font-size: 13px;}/*设置页面字体大小为13px*/
            td {padding: 10px;}/*设置td单元格的内边距为10px*/
            p {width: 450px;}/*设置p元素的宽度为450px*/
            p,h3 {（10）}/*设置内边距和外边距均为0 */
        </style>
    </head>
    <body>
        <table border="0" width="290px">
            <tr><td><h3>实现实时Html编辑器</h3>
                    <p>给大家介绍一种很简单的无限制在线Html编辑器,实现所写即所得UI和样式实时刷新,JS代码也能进行热加载执行重新渲染,而且这些实现都非常简单...</p>
                    <a href="#">HTML</a></td></tr>
            <tr><td><h3>html中q标签(短的引用)的详细介绍</h3>
                    <p>本篇将介绍html中q标签(短的引用)的详细用法,有兴趣的朋友可以了解一下! 学习html其实就是学习标签的用法,今天小编要介绍的是... </p>
                    <a href="#">HTMLStudy</a></td></tr>
        </table>
        <a href="#">1 </a><a href="#">2 </a><a href="#">3 </a><a href="#">4 </a>
    </body>
</html>
【问题】（20分，每空2分）
进行静态网页开发，补全代码，在（1）至（10）处填入正确的内容。
试题二（30分）
阅读下列说明、效果图、HTML代码和CSS代码，开发网页动态页面样式，填写（1）至（15）代码。
【说明】
这是“Web技术社区”网站，该网站致力于推广和分享各种前端技术，如HTML、CSS、JavaScript和jQuery，现在我们需要编写该网站首页样式。
项目名称为web_skill，包含首页index.html、css文件夹和img文件夹，其中，css文件夹包含index.css文件，img文件夹包含html.png、css.png、js.png和jquery.png图片。
首页（index.html）内容分为两部分，一是【网站介绍】，位于页面上端，内容为【欢迎语】和【网站内容介绍】，以文字的形式展示；二是【技术介绍】，位于页面下端，展示
四项【技术】，每项都包括【技术logo】和【技术特点】，以图片和列表的形式展示。
对页面样式进行设计，要求为：
（1）页面全局样式：设置页面全局属性，页面外边距和内边距为“0”，字体为“宋体”，字体大小为“35px”。为页面设置透明度动画，在页面加载时执行，透明度从“0”到“1”，动画持续时间为“1s”，动画次数为“1”次。
（2）【网站介绍】样式：为页面上端【网站介绍】部分添加背景颜“#000000”，并设置宽度为“100%”、高度为“400px”、字体颜为“#FFFFFF”。另外，为【欢迎语】和【网站内容介绍】内容设置“绝对布局”、距顶部边缘“16%”、距左边缘“16%”、宽度为“68%”、文本内容“居中”。
（3）【技术介绍】样式：为页面下端【技术介绍】设置“弹性布局”、文本内容“居中”。另外，为【技术】设置宽度为“17%”、外边距为“4%”；为【技术logo】设置高度为“200px”、宽度为“200px”、边框颜为“#000000”、边框为“1px、实线”、边框设置“20px圆角”；为【技术特点】中列表设置文本内容“居左”。
【效果图】
图2-1
【代码：首页index.html】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。