综合案例
步骤
搭建HTML结构页面
修改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>
最终成果
![](https://img-blog.csdnimg.cn/img_convert/8588dfcde652f4d2a4f51241d549ab40.png)
Chrome调试工具
Chrome浏览器提供了一个非常好用的调试工具,可以用来调试我们的HTML结构和CSS样式。
打开调试工具
打开Chrome浏览器,按下F12键或者右击页面空白处→检查。
使用调试工具
![](https://img-blog.csdnimg.cn/img_convert/7f5fe316b55e03a1faf473b0f9999ffb.jpeg)