酷漫屋首页都有哪些好看的?这几部千万别错过!

今天心血来潮,想搞搞酷漫屋首页的排版,记录一下整个过程,给以后留个参考。

我先用眼睛扫一遍人家的首页,大概瞅瞅布局。心里有个数,这玩意儿大概分几个大块。最上面应该是搜索框,然后下面是轮播图,再往下就是各种漫画分类推荐,什么“热门连载”、“新作速递”之类的。

然后,我就开始动手。先用几个空 <div> 把这几个大块给占住。就像搭积木一样,先把几个大框架给搭起来。每个 <div> 里面暂时啥也不放,就先用文字标一下,比如“这里是搜索框”,“这里是轮播图”。

酷漫屋首页都有哪些好看的?这几部千万别错过!

我开始往这些“空架子”里填东西。搜索框嘛简单,一个 <input> 就搞定。轮播图稍微麻烦点,得想想用啥实现,不过这也不是今天的重点,先随便放几张图占个位置。

  • 主要是下面那些漫画分类推荐,这个比较头疼。
  • 我先整个“热门连载”的标题,用 <h2> 标签包起来。

然后就是具体漫画的展示。我看一下,基本上都是一张图加几个字:漫画名、作者、最新章节啥的。

酷漫屋首页都有哪些好看的?这几部千万别错过!

我就琢磨着用一个一个的小格子来显示这些信息。每个小格子里面,上面放张图(<img>),下面用几个 <p> 标签分别显示漫画名、作者和最新章节。

比如,我看到有个叫《斗破苍穹》的漫画,就写上“斗破苍穹 天蚕土豆 第456回 深渊之秘”。还有什么《元尊》,就写上“元尊 Dr.大吉天蚕土豆 1296 第647话:含毒之蜜(下)”。

然后,我又看到一个叫《少女与布》的,下面写着“喜欢发明的女中学生桑波有一天遇到一个有点可爱的宇宙生物努诺。“狂飙”卧底无间道,双强极限推拉。”,我也照着样子给它弄上。

就这么一个一个地弄,把“热门连载”这个区域给填满。其他的“新作速递”、“少女漫画”、“少年漫画”啥的,也都照这个葫芦画瓢,复制粘贴,改改标题和内容就完事。

这只是个大概的样子,细节还差得远。比如图片怎么排得整整齐齐,文字怎么对齐,这些都得慢慢调。不过今天就先到这,总算是有个初步的成果,改天再继续折腾。

酷漫屋首页都有哪些好看的?这几部千万别错过!

整个过程就像搭积木,从无到有,一步一步来,虽然有点粗糙,但还是挺有成就感的。