您好,欢迎访问本站博客!登录后台查看权限
  • 转载文章需要注意是否有转载标识,未经允许谢绝转载
  • 发贴请联系站长提权

第四课作业-小猪佩奇网站

作业 adminXiongmao 2019-08-24 57 次浏览 0个评论
网站分享代码

请根据要求制作小猪佩奇介绍网页(务必看完所有要求及提示):

需要的文本内容

Peppa Pig

Peppa Pig is a British preschool animated television series directed and produced by Astley Baker Davies in association with Entertainment One, Nick Jr. and Channel 5. The show revolves around Peppa, an anthropomorphic female pig, and her family and peers. The show originally aired on 31 May 2004 and there have been six series as of 2019, the most recent of which commenced broadcasting in February 2019 in the UK. The series is shown in 180 territories including the US and UK.[1] It also aired reruns on the Nick Jr on Nick block starting on December 25, 2017. However, reruns have been removed on February 4, 2019.

Background

Peppa Pig is a children's television programme broadcasting on Channel 5and Nick Jr. in the UK, Nickelodeon/Nick Jr. in the USA, ABC 4 Kids in Australia and Discovery Kids in Latin America, including Brazil. Each episode is approximately five minutes long. The show revolves around Peppa, an anthropomorphic female pig, and her family and friends. Each of her friends is a different species of animal. Peppa's friends are her age, and Peppa's younger brother George's friends are his age. Episodes tend to feature everyday activities such as attending playgroup, going swimming, visiting their grandparents, cousins, going to the playground or riding their bikes.


Books

There is a line of personalised books in which any child can be added into the story with Peppa and her friends.[4]There is also a series of books based on Peppa Pig, one of which, Peppa Meets the Queen, was written to coincide with the Queen's Diamond Jubilee.


Awards and nominations

Awards

  • British Academy Children's Awards

    • 2012, Winner for Best Pre-School Animation[33]

    • 2011, Winner for Best Pre-School Animation[34]

    • 2011, Winner for Best Performer (Harley Bird)

    • 2005, Winner for Best Pre-School Animation series

  • Annecy International Animated Film Festival 2005, Winner of the Grand Prize, The Crystal for Best TV Production[35]

  • Bradford Animation Film Festival 2005, Winner of Best Children's Animation Series

  • Cartoons on the Bay Festival 2005, Winner of Pulcinella Award for Best European Programme of the Year

  • Cartoons on the Bay Festival 2005, Winner of Pulcinella Award for Best Pre-School Series

  • Cartoons on the Bay Festival 2005, Children's audience award for Best Pre-School series

Nominations

  • British Academy Children's Awards

    • 2013, Nomination for Best Pre-School Animation[36]

    • 2013, Nomination for Best Writing[36]

    • 2013, Nomination for Best Multiplatform (Peppa Pig's Holiday game)[36]

    • 2010, Nomination for Best Pre-School Animation

    • 2010, Nomination for Best Writing

    • 2009, Nomination for Best Pre-School Animation

    • 2009, Nomination for Best Writing

    • 2008, Nomination for Best Pre-School Animation

    • 2007, Nomination for Best Pre-School Animation

    • 2004, Nomination for Best Pre-School Animation


图片Demo



page1.png

page2.png

page3.png


视频Demo




例子参数

    导航栏部分:

    背景颜色:                         rgb(249, 163, 166)

    边框:                                1px 虚线 lightblue

    字体:                                英文: "curlz mt"  中文:“默认”  

    样式:                                全大写首字母加大字号、加粗

    字号:                                英文:24px  中文:16px

    文字颜色:                         文字部分:rgb(253, 248, 218)    链接按钮:rgb(255, 250, 230)

    文章部分:

    字体:                                 "palatino linotype"

    字号:                                 大标题:36px,中标题:h2默认,正文:默认

    背景颜色:                          奇数块:rgb(249, 163, 166)  偶数块:rgba(111, 167, 152)

    文本块间隔:                       50px(上一个块到下一个块之间的距离)

    文本块宽度:                       屏幕宽度的70%,居中

    内容宽度(文字+图片):      文本块的70%,居中(文字非居中)

    页脚部分:

    字体:                                 "curlz mt"

    高度:                                 60px

    背景颜色:                           rgb(249, 163, 166)


所需的图片

    

background.jpg

book.png

footer1.png

George.png

pig2.jpg

peppapig.png


提示

    1-图片和文字一排时会遇到文字底部与图片平齐的情况,这时为文字添加

vertical-align: top;

        即可变成文字顶部与图片顶部平齐。

    2-设置标题前的竖杠可以使用before(当然也可以在前面加一个标签画出来,但会有点麻烦)

            因此可以将下列代码放入css(标题部分需要改成标题对应的选择器),下列代码画出的长方形的位置需要自行微调

                

 标题:before{
            content: "";
            display: inline-block;
            height: 30px;
            width: 5px;
            background: royalblue;
       }

      3-我们设置百分比时,这个百分比通常是以父级为基准的。当父级宽度为100%,我们为其子级设置宽度70%,实际上是父级的70%。   

      4-我们可以通过

text-decoration: none;

           来取消下划线,可以通过

text-decoration: underline;

            来添加下划线

 注意

            1-背景是不随着滚动一起滚动的。

            2-通过视频我们可以发现,右侧部分有一只小猪乔治始终存在与右侧的文字块中。

            3-文字和图片整体始终位于区域的块中间。

            

已有 57 位网友参与,快来吐槽:

发表评论

分享:

支付宝

微信

站点统计