前端打卡Day10

综合案例

步骤

  1. 搭建HTML结构页面

  1. 修改CSS样式

HTML结构页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>日本体大生票选“最强体育漫画Top10”!《排球少年》、《灌篮高手》谁是冠军?</h1>
    <div>2022年8月24日15:33江苏</div>
    <hr>
    <p>日本节目《Junk Sports》日前公开了由现正就读日本知名体育大学的学生们,从多达2100部的体育漫画中,票选出的「最强体育漫画」名单。这次编辑就要带大家来看看「最强体育漫画的Top10」分别有哪些体育漫画!</p>
    <h3>日本最强体育漫画Top10.《DAYS》</h3>
    <p>由安田刚士所作的足球漫画《DAYS》,自2013年至2021年余《周刊少年杂志》连载,故事讲述足球技能为零的主角柄本尽司,在少年风间阵的邀请下参加了室内足球比赛后,开始喜欢上足球,而他的毅力也渐渐鼓舞了其他队友们!编辑也相当喜爱尽司和阵的互动喔(笑)。</p>
    <h3>日本最强体育漫画Top9.《足球小将》</h3>
    <p>《足球小将》于1981年开始连载,作者高桥阳一描述了拥有高超技术的足球少年大空翼,自小学六年级开始到成为职业选手后的成长故事。作品发行至今将近40年的时间,衍伸作品不尽其数,也能看到高桥老师在画风上的转变,是相当经典的足球作品。</p>
    <h3>日本最强体育漫画Top8.《闪电十一人》</h3>
    <p>《闪电十一人》原作为游戏公司LEVEL5打造的超能力足球游戏,而由薮野展也作画的漫画版,则是从2008年开始在《快乐快乐月刊》上连载。浮夸的足球必杀技「黄金神掌」、「大岩壁」等,都成为了当时大家课后讨论的热门话题,实在太怀念了~</p>
    <h3>日本最强体育漫画Top7.《BLUE LOCK 蓝色监狱》</h3>
    <h3>日本最强体育漫画Top6.《青之芦苇》</h3>
    <p>《青之芦苇》自2015年开始连载于《Big Comic Spirits》,由小林有吾所作的足球漫画,以日本青年杯作为背景,讲述足球少年青井苇人成为东京城市Esperion FC 青年军的一员后的成长故事。从分镜的表现方式,再到呈现动态的作画线条都能十足地感受到角色的躁动!</p>
    <h3>日本最强体育漫画Top5.《钻石王牌》</h3>
    <p>《钻石王牌》自2006年于《周刊少年Magazine》开始连载,作者寺嶋裕二靠著写实的剧情绘画,深深打入了读者们的心。以主角泽村荣纯收到棒球名校的邀请为开端,在遇上捕手御幸一也后,便坚定了继续打棒球的决心。不仅是剧情上的转折、强烈的带入感、激励人心的棒球精神,都不禁让人直呼高中生们实在太热血啦(泪)。</p>
    <h3>日本最强体育漫画Top4.《黑子的篮球》</h3>
    <p>奇迹世代的「幻之第六人」!《黑子的篮球》自2009年至2014年连载于《周刊少年Jump》,作者藤卷忠俊将角色的篮球技能开至最高点,创作出有别于现实层面的独特世界观。不只浮夸的超能力篮球,角色鲜明的性格塑造、队友之间的互动也都获得了大家的喜爱。</p>
    <h3>日本最强体育漫画Top3.《棒球大联盟》</h3>
    <p>由满田拓也所作的《棒球大联盟》,自1994年至2010年在《周刊少年Sunday》上连载。不管是主角茂野吾郎对棒球的热爱、追求和同样身为职业棒球选手父亲脚步,以及继承父亲那无所畏惧的棒球魂,都让它成为了棒球系列中的经典之作!</p>
    <h3>日本最强体育漫画Top2.《灌篮高手》</h3>
    <p>堪称是最经典的高中篮球漫画!《灌篮高手》自1990年至1996年于《周刊少年Jump》连载,至今仍然风靡于各个世代。作者井上雄彦以当年流行的不良少年加上篮球的题材,在众多男孩们的心中种下了「篮球梦」的种子。不只描述了热血激昂的篮球赛事,更隐含了少年们正值青春期的叛逆、羞涩、莽撞,而官方最新公布的电影版也将在12月上映啰!</p>
    <h3>日本最强体育漫画Top1.《排球少年》</h3>
    <p>第一名由古馆春一所作的《排球少年!!》夺得!自2012年至2020年在《周刊少年Jump》上连载,无论漫画或动画都大获好评。主角和配角们之间的互动,就如同齿轮般牵动著整部作品的走向,加上激励人心的台词,以及那强而有力的比赛分镜和跨页,实在太难不喜欢上它了。在发行的10周年之际,《排球少年!!》也公开了动画第四季后的剧情,将以两集电影版的形式做结尾,我们相约电影院见!</p>
</body>

</html>

CSS样式修改

<style>
    body {
        font: 16px/28px 'Microsoft YaHei';
    }
    
    h1 {
        font-weight: 400;
        text-align: center;
    }
    
    div {
        color: #888888;
        font: size 12px;
        text-align: center;
    }
    
    p {
        text-indent: 2em;
    }
</style>

最终成果

Chrome调试工具

Chrome浏览器提供了一个非常好用的调试工具,可以用来调试我们的HTML结构和CSS样式。

打开调试工具

打开Chrome浏览器,按下F12键或者右击页面空白处→检查

使用调试工具

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值