zoukankan      html  css  js  c++  java
  • H5(07体育新闻案例学习)

    标签复习:

      标题标签:

          h1~h6 :使网页更具有语义化,我们经常会在页面中用到标题标签。

      常用的两个标签:

         段落标签<p>:用于定义段落,他可以将整个网页分为若干个段落

         换行标签<br />:文本强制换行显示,就要使用换行标签<br />

    案例学习:体育新闻

    案例成品:

      

    素材:(新建html页面,复制一下文本,在浏览器打开)

     水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0

     数据统计:水花兄弟合砍61分

    库里22投11中,三分14投4中,罚球11罚全中得到37分8篮板8助攻,职业生涯季后赛得分30+次数来到35次,超过哈登排名现役第3位,仅次于詹姆斯和杜兰特。

    汤普森22投8中,三分8投4中得到24分3篮板2助攻,德拉蒙德-格林得到16分10篮板7助攻5盖帽,凯文-鲁尼得到14分7篮板2助攻,今天勇士有7名替补出场。

    兄弟对决升级:小库里给哥哥造成压力

    库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中,小库里没有给哥哥造成压力,他出场19分钟,7投1中只得到3分3篮板2助攻,在场期间输掉10分。

    但在西决第2场中,小库里攻防两端都打出杰出的表现,全场送出4次抢断,包括直接抢断自己的哥哥库里,在防守端给库里造成了极大的困扰。

    作者: pink老师

     2019-8-8

    案例分析:(运用我们学过的标签进行语义的构思)

    编写代码实现:(此处的小标题H4 是根据自己喜欢的弄就好了,区分主次标题就好了

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
        <h1>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0</h1>
        <h4>数据统计:水花兄弟合砍61分</h4>
       <p>库里22投11中,三分14投4中,罚球11罚全中得到37分8篮板8助攻,职业生涯季后赛得分30+次数来到35次,超过哈登排名现役第3位,仅次于詹姆斯和杜兰特。</p>
        
       <p>汤普森22投8中,三分8投4中得到24分3篮板2助攻,德拉蒙德-格林得到16分10篮板7助攻5盖帽,凯文-鲁尼得到14分7篮板2助攻,今天勇士有7名替补出场。</p>
        
        <h4>兄弟对决升级:小库里给哥哥造成压力</h4>
        <p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中,小库里没有给哥哥造成压力,他出场19分钟,7投1中只得到3分3篮板2助攻,在场期间输掉10分。</p>
        
        <p>但在西决第2场中,小库里攻防两端都打出杰出的表现,全场送出4次抢断,包括直接抢断自己的哥哥库里,在防守端给库里造成了极大的困扰。</p>
        
        <p>作者: pink老师<br />
            2019-8-8
        </p>
    </body>
    </html> 

    成品:(这样就完成了)

      

      每天打气:万丈高楼平地起,地基还得自己起,刚开始的繁琐简单,会为成就未来的你

  • 相关阅读:
    centos7无法上网问题
    git 笔记记录
    高级 JsRender 模板功能
    Xamarin 示例Standard Controls报错:xamarin Failed to compile interface file. See Build Output for details
    Xamarin学习资源收集
    Bootstrap学习笔记1
    动态样式语言Less学习笔记
    html5的发展历程和由此引起的政治斗争
    网页引用本地电脑的字体 css设置浏览器会不显示的解决办法
    css引入方式优先级以及不同选择器的优先级区别
  • 原文地址:https://www.cnblogs.com/czh333/p/13495590.html
Copyright © 2011-2022 走看看