综合案例
步骤
搭建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>最终成果
Chrome调试工具
Chrome浏览器提供了一个非常好用的调试工具，可以用来调试我们的HTML结构和CSS样式。
打开调试工具
打开Chrome浏览器，按下F12键或者右击页面空白处→检查。
使用调试工具
709
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
