卡其漫画中间内容部分布局结构实现

411 阅读9分钟

前言:

在之前我们通过卡其漫画头部的讲解学习了HTML中一些常用的标签,如:超链接a标签、图片img标签、导航nav标签、无序列表ul标签、表单input标签等等。下面我们将继续学习HTML常用的一些其他的标签的使用。

话不多说,接下来我们一起来看看卡其漫画中间的主要内容块的做法,通过这个中间内容部分的做法学习HTML中的常用的标签的使用。

当页面的结构是如上结构的时候,在页面布局的时候通常采用左右分栏结构布局来处理。所谓的左右分栏结构就是将页面中的某一块内容部分在页面显示的时候分成左右两块来显示。

因为整个内容部分是在页面的中间位置显示,所以在页面中会先放一个版心的盒子(视频中详细讲解),然后在版心中再分左右栏来处理。具体结构如下:

以上的结构是中间的内容部分的大结构布局,接着看左右两栏中的具体的结构布局。先左边的一块,左边这一块又可以分成上中下三块,这里大家不用嫌麻烦,刚开始做页面的结构布局的时候我们都是这样的,先将一个完整的网页拆分成很多的小块,然后我们先处理每一个小块。我们一定要习惯化整为零、化繁为简。

下面看左边:分上、中、下这样的三块,在页面分成一块一块的布局我们基本都是使用div标签来处理,div本质就是用来分割网页的。

页面的展示效果是这样,我们使用代码如何来写呢?接下来看代码结构

  1. 对于上面的轮播图的结构,我们采用无序列表来处理

    <div class="carousel">
       <ul>
          <li><img src="images/carousel1.jpg" alt=""></li> 
          <li><img src="images/carousel2.jpg" alt=""></li>
          <li><img src="images/carousel3.jpg" alt=""></li>
          <li><img src="images/carousel4.jpg" alt=""></li>
          <li><img src="images/carousel5.jpg" alt=""></li>
          <li><img src="images/carousel6.jpg" alt=""></li>
       </ul>                
    </div>
    对于使用无序列表来实现轮播图的结构,在后续的视频中我给大家具体的讲解。
    
  2. 中间的游戏中心数据展示部分的做法,对于这样的外观样式效果相同,只是里面的数据不同,一般我们也会采用无序列表来展示数据。因为后面我们会使用js来动态的渲染数据。游侠中的结构如下:

     <div class="gamecenter mt22 clearfix">
         	<!--游侠中心是整个这一块的标题,所以我们单独使用header标签来处理-->
            <header class="title">
                游戏中心
            </header>
         	<!--下面列表部分才是真正的数据展示部分-->
            <ul>
                <li>
                    <a href='chapter.html'>
                        <img src="./images/lhsl_199x259.jpg" alt="">
                        <p class='bookname'>灵魂撕裂</p>
    
                    </a>
                </li>
                <li>
                    <a href='chapter.html'>
                        <img src="./images/lhsl_199x259.jpg" alt="">
                        <p class='bookname'>灵魂撕裂</p>
                    </a>
                </li>
                <li>
                    <a href='chapter.html'>
                        <img src="./images/lhsl_199x259.jpg" alt="">
                        <p class='bookname'>灵魂撕裂</p>
                    </a>
                </li>
                <li>
                    <a href='chapter.html'>
                        <img src="./images/lhsl_199x259.jpg" alt="">
                        <p class='bookname'>灵魂撕裂</p>
                    </a>
                </li>
    
                <li>
                    <a href='chapter.html'>
                        <img src="./images/lhsl_199x259.jpg" alt="">
                        <p class='bookname'>灵魂撕裂</p>
                    </a>
                </li>
                <li>
                    <a href='chapter.html'>
                        <img src="./images/lhsl_199x259.jpg" alt="">
                        <p class='bookname'>灵魂撕裂</p>
                    </a>
                </li>
                <li>
                    <a href='chapter.html'>
                        <img src="./images/lhsl_199x259.jpg" alt="">
                        <p class='bookname'>灵魂撕裂</p>
                    </a>
                </li>
                <li>
                    <a href='chapter.html'>
                        <img src="./images/lhsl_199x259.jpg" alt="">
                        <p class='bookname'>灵魂撕裂</p>
                    </a>
                </li>
            </ul>
        </div>
    
  3. 下面的最近更新部分的也是数据展示和上面的游戏中心的结构是非常相似的,所以我们也会采用无序列表ul来展示这块的数据,所以在结构上和上面的游戏中心是很相似的。最近更新的部分的代码结构如下:

    <div class="lastupdate mt22 clearfix">
            <header class="title">
                最近更新
            </header>
            <ul>
                <li>
                    <a href='chapter.html'>
                        <img src="./images/32x(1).jpg" alt="">
                        <div class="info">
                            <p class="bookname">晴空</p>
                            <p class="auther">半村良</p>
                            <p class="lastchapter">最后更新:193话</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href='chapter.html'>
                        <img src="./images/32x(1).jpg" alt="">
                        <div class="info">
                            <p class="bookname">晴空</p>
                            <p class="auther">半村良</p>
                            <p class="lastchapter">最后更新:193话</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href='chapter.html'>
                        <img src="./images/32x(1).jpg" alt="">
                        <div class="info">
                            <p class="bookname">晴空</p>
                            <p class="auther">半村良</p>
                            <p class="lastchapter">最后更新:193话</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href='chapter.html'>
                        <img src="./images/32x(1).jpg" alt="">
                        <div class="info">
                            <p class="bookname">晴空</p>
                            <p class="auther">半村良</p>
                            <p class="lastchapter">最后更新:193话</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href='chapter.html'>
                        <img src="./images/32x(1).jpg" alt="">
                        <div class="info">
                            <p class="bookname">晴空</p>
                            <p class="auther">半村良</p>
                            <p class="lastchapter">最后更新:193话</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href='chapter.html'>
                        <img src="./images/32x(1).jpg" alt="">
                        <div class="info">
                            <p class="bookname">晴空</p>
                            <p class="auther">半村良</p>
                            <p class="lastchapter">最后更新:193话</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href='chapter.html'>
                        <img src="./images/32x(1).jpg" alt="">
                        <div class="info">
                            <p class="bookname">晴空</p>
                            <p class="auther">半村良</p>
                            <p class="lastchapter">最后更新:193话</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href='chapter.html'>
                        <img src="./images/32x(1).jpg" alt="">
                        <div class="info">
                            <p class="bookname">晴空</p>
                            <p class="auther">半村良</p>
                            <p class="lastchapter">最后更新:193话</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href='chapter.html'>
                        <img src="./images/32x(1).jpg" alt="">
                        <div class="info">
                            <p class="bookname">晴空</p>
                            <p class="auther">半村良</p>
                            <p class="lastchapter">最后更新:193话</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href='chapter.html'>
                        <img src="./images/32x(1).jpg" alt="">
                        <div class="info">
                            <p class="bookname">晴空</p>
                            <p class="auther">半村良</p>
                            <p class="lastchapter">最后更新:193话</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href='chapter.html'>
                        <img src="./images/32x(1).jpg" alt="">
                        <div class="info">
                            <p class="bookname">晴空</p>
                            <p class="auther">半村良</p>
                            <p class="lastchapter">最后更新:193话</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href='chapter.html'>
                        <img src="./images/32x(1).jpg" alt="">
                        <div class="info">
                            <p class="bookname">晴空</p>
                            <p class="auther">半村良</p>
                            <p class="lastchapter">最后更新:193话</p>
                        </div>
                    </a>
                </li>
            </ul>
       </div>
    

    在这里我们发现和上面的游戏中心的结构几乎是一样的,所以以后在做其他的页面的时候,如果看到显示效果也是这样的,那么在布局的时候我们也是可以使用无序列表ul来实现这样的结构。

    这是整个内容部分左边的布局结构。从以上结构可以看出在页面布局中其实没有大家想象的那么难,只要我们把HTML常用的标签掌握的,那么在页面布局中就可以如鱼得水了。在后续的视频讲解中我们还会给大家拓展更多的标签相关的知识。

    下面来看看内容部分右边的布局,整个右边的布局其实就更加的简单了,也是一个简单数据展示,我们同样的时候使用无序列表标签来处理。那么有同学就会有疑问了。为什么页面这么多的都是使用无序列表呢?其实不是全是,只是我们当前的卡其漫画页面使用的比较多。其他的一些页面不一定使用这么,但是可以肯定的一点是无序列表ul非常重要的。

    废话少说,看内容部分右边的结构吧,首先看页面显示效果,如下:

那么代码结构是如何的呢?我们一起看看

 <div class="right box pull-right">
     <div class="gamecenter">
         <header class="title">
             游戏中心
         </header>
         <ul class='clearfix'>
             <li>
                 <a href='chapter.html'>
                     <img src="./images/20170110134148_5874741cc75d4.jpg" alt="">
                     <p>少女咖啡枪</p>
                 </a>
             </li>
             <li>
                 <a href='chapter.html'>
                     <img src="./images/20170110134148_5874741cc75d4.jpg" alt="">
                     <p>少女咖啡枪</p>
                 </a>
             </li>
             <li>
                 <a href='chapter.html'>
                     <img src="./images/20170110134148_5874741cc75d4.jpg" alt="">
                     <p>少女咖啡枪</p>
                 </a>
             </li>
             <li>
                 <a href='chapter.html'>
                     <img src="./images/20170110134148_5874741cc75d4.jpg" alt="">
                     <p>少女咖啡枪</p>
                 </a>
             </li>
         </ul>
     </div>
 </div>

不知道大家是否发现内容左边这块我们的布局和右边的部分的结构也是有点相似的哦。

从以上的结构上面来看,不知大家是否发现,其实页面的布局也没有像大家想象中的那么难,只不过是将我们学习的一些标签在重复使用罢了。相信通过大家的努力,大家一定是可以学习前端这门学科的。大家一起加油。