web前端开发技术储久良第三版第13章练习与实验答案

web前端开发技术储久良第三版答案整理(10-17章)

练习13

1.选择题

(1)C (2)A (3)D (4)C (5)A (6)D (7)B (8)D (9)C (10)D (11)C (12)A

2.填空题

(1)input、list、id。

(2) src、source。

(3) color、email、range、number。

(4) keygen、output、datalist。

实验13

1、源代码: exp_13_1演示

<!-- exp_13_1.html -->
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML5页面设计</title>
        <style type="text/css">
            h1,h3{text-align: center;}
            h1{background: #6699FF;color:white;margin:10px auto;height:46px;}
            p{text-indent:2em;
                column-count:3;/* 设置列数 */
                column-gap:50px;    /* 设置列间隙 */
                column-rule:4px outset #ff0000;/* 设置列宽度、线型、颜色 */
            }
        </style>
    </head>
    <body>
        <article style="margin:20px auto;width:850px;heigth:500px;background:#eeeeee;padding:30px;">
            <header>
                <hgroup>
                    <h1>提前探班:HUAWEI CONNECT 2016大透析</h1>
                    <h3>为什么华为要自主办HUAWEI CONNECT旗舰大会?</h3>
                    <figure style="text-align:center;">
                        <img src="xuwenwei.png" width="450" border="0" alt=""><br>
                        <figcaption>▲华为常务董事、战略Marketing总裁徐文伟</figcaption>
                    </figure>    
                    <p>徐文伟在采访中把HC2016大会的举办归结于华为历史的发展,他表示:“华为发展的过程,我认为可以分为三个阶段。第一个阶段,华为主要参加行业组织和外部机构举办的活动。比如每年的巴展、CeBIT和interop等等。第二个阶段,随着公司的发展,华为除了在继续参与这些活动之外,也开始自行组织一些有特定主题、面向特定受众的活动。比如HCC(华为云计算大会)、HNC(华为网络大会)、HDC(华为开发者大会)等。第三个阶段,华为开始筹划组织HUAWEI CONNECT这样的旗舰大会。华为希望通过构筑平台开放能力,最终释放整个ICT产业的生产力、推进社会进步。<br />
  关于本次大会的定位,徐文伟也表示:"华为认为作为一场旗舰大会应该拥有行业最前沿的内容,能吸引各类型、各层级的行业领袖和精英参会,成为企业高层商业与战略的交流平台。”<br />
  同时,徐文伟指出:“在这次HUAWEI CONNECT全联接大会上,华为将系统阐述华为业务战略方向、关键举措和实践,分享行业最前瞻的洞察,为行业领袖和精英提供一个商业与战略对话平台,全方位构建华为的行业领导力。华为将这次大会打造成一次生态大会,与客户、合作伙伴、产业组织、开发者共同引领并推动产业发展,发布创新领先的ICT产品与解决方案。”</p>
                </hgroup>                
            </header>
            <footer>            
                <h3><strong>标签:华为 ,云计算&nbsp;&nbsp;it168网站原创 &copy;2016-08-26 &nbsp;</strong></h3>
            </footer>
        </article>
    </body>
</html>

2、源代码: exp_13_2演示

<!-- exp_13_2.html 实验13-2 -->
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>弈心博客 https://www.yixzm.cn</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background: red;
      position: relative;
      animation: myfirst 5s;
      -webkit-animation: myfirst 5s;
      /* Safari and Chrome */
    }

    @keyframes myfirst {
      0% {
        background: red;
        left: 0px;
        top: 0px;
      }

      25% {
        background: yellow;
        left: 200px;
        top: 0px;
      }

      50% {
        background: blue;
        left: 200px;
        top: 200px;
      }

      75% {
        background: green;
        left: 0px;
        top: 200px;
      }

      100% {
        background: red;
        left: 0px;
        top: 0px;
      }
    }

    @-webkit-keyframes myfirst

    /* Safari and Chrome */
      {
      0% {
        background: red;
        left: 0px;
        top: 0px;
      }

      25% {
        background: yellow;
        left: 200px;
        top: 0px;
      }

      50% {
        background: blue;
        left: 200px;
        top: 200px;
      }

      75% {
        background: green;
        left: 0px;
        top: 200px;
      }

      100% {
        background: red;
        left: 0px;
        top: 0px;
      }
    }
  </style>
</head>

<body>

  <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

  <div></div>

</body>

</html>
版权声明

弈心博客


首发 弈心博客,转载请附链接!

赞赏支持

感谢支持!


建站不易,感谢支持!

推荐阅读