项目实战7：豆瓣首页-小组

最新推荐文章于 2024-05-31 09:45:22 发布

guai_guai_guai

最新推荐文章于 2024-05-31 09:45:22 发布

阅读量335

点赞数 6

分类专栏： # 前端知识总结文章标签： html 前端

本文链接：https://blog.csdn.net/guai_guai_guai/article/details/134319804

版权

前端知识总结专栏收录该内容

24 篇文章 0 订阅

订阅专栏

我们就继续开始制作豆瓣网页吧，这次是小组读书部分

小组

小组区域又分为三个部分，aside-left，aside-right以及main，同样，里面还是先包括container，外加特殊类名（group-area），首先是aside-left，里面包括标题和菜单，标题的样式之前写过，复制粘贴改变名字即可，菜单之前也写过，故这里也是粘贴，因为之前写过很多的通用样式，后续需要该样式时直接引用类名即可，这样的话会越写越觉得轻松，aside-left部分代码如下：

<div class="aside-left">
                    <div class="title">
                        <h2>
                            <a href="">小组</a>
                        </h2>
                    </div>
                    <ul class="left-menu">
                        <li><a class="new" href="">精选</a></li>
                        <li><a href="">文化</a></li>
                        <li><a href="">娱乐</a></li>
                        <li><a href="">Dolores.</a></li>
                        <li><a href="">Quas.</a></li>
                        <li><a href="">Mollitia.</a></li>
                        <li><a href="">Quibusdam?</a></li>
                        <li><a href="">Amet.</a></li>
                        <li><a href="">Doloribus?</a></li>
                        <li><a href="">Architecto.</a></li>
                        <li><a href="">Atque.</a></li>
                    </ul>
                </div>

接着是aside-right，这个部分有很多小组组成，在这里我们只需要做一个小组即可，后续的复制粘贴改变内容即可，一个小组包括section-title，group,group里又包括group-name，以及aside-right,aside-right里又包括right-menu-list，里面有很多横向排列的菜单，先说group-name吧，兴趣后有个特殊符号，可以给group-name里的a元素设置伪元素选择器

.group-area .group .group-name a::after{
    content: "»";
}

给right-menu-list设置margin-right隔开每个菜单

.group-area .group .right-menu-list li{
    margin-right: 10px;
}

aside-right部分代码：

<div class="aside-right">
                    <div class="section-title">
                        <h3 class="title">小组分类</h3>
                    </div>
                    <div class="group">
                        <div class="group-name">
                            <a href="">兴趣</a>
                        </div>
                        <div class="aside-right">
                            <ul class="right-menu-list clearfix">
                                <li><a href="">旅行</a></li>
                                <li><a href="">摄影</a></li>
                                <li><a href="">影视</a></li>
                                <li><a href="">Lorem.</a></li>
                                <li><a href="">Sint.</a></li>
                                <li><a href="">Dolores.</a></li>
                                <li><a href="">Provident.</a></li>
                                <li><a href="">Esse.</a></li>
                                <li><a href="">Libero.</a></li>
                                <li><a href="">Excepturi.</a></li>
                                <li><a href="">Veritatis.</a></li>
                                <li><a href="">Molestiae.</a></li>
                                <li><a href="">Itaque!</a></li>
                                <li><a href="">Mollitia!</a></li>
                                <li><a href="">Praesentium?</a></li>
                                <li><a href="">Officia?</a></li>
                                <li><a href="">Explicabo!</a></li>
                                <li><a href="">Ab?</a></li>
                                <li><a href="">Optio.</a></li>
                                <li><a href="">Voluptates!</a></li>
                                <li><a href="">Omnis.</a></li>
                                <li><a href="">Ullam!</a></li>
                                <li><a href="">Cum?</a></li>
                            </ul>
                        </div>
                        <div class="group-name">
                            <a href="">兴趣</a>
                        </div>
                        <div class="aside-right">
                            <ul class="right-menu-list clearfix">
                                <li><a href="">旅行</a></li>
                                <li><a href="">摄影</a></li>
                                <li><a href="">影视</a></li>
                                <li><a href="">Lorem.</a></li>
                                <li><a href="">Sint.</a></li>
                                <li><a href="">Dolores.</a></li>
                                <li><a href="">Provident.</a></li>
                                <li><a href="">Esse.</a></li>
                                <li><a href="">Libero.</a></li>
                                <li><a href="">Excepturi.</a></li>
                                <li><a href="">Veritatis.</a></li>
                                <li><a href="">Molestiae.</a></li>
                                <li><a href="">Itaque!</a></li>
                                <li><a href="">Mollitia!</a></li>
                                <li><a href="">Praesentium?</a></li>
                                <li><a href="">Officia?</a></li>
                                <li><a href="">Explicabo!</a></li>
                                <li><a href="">Ab?</a></li>
                                <li><a href="">Optio.</a></li>
                                <li><a href="">Voluptates!</a></li>
                                <li><a href="">Omnis.</a></li>
                                <li><a href="">Ullam!</a></li>
                                <li><a href="">Cum?</a></li>
                            </ul>
                        </div>
                        <div class="group-name">
                            <a href="">兴趣</a>
                        </div>
                        <div class="aside-right">
                            <ul class="right-menu-list clearfix">
                                <li><a href="">旅行</a></li>
                                <li><a href="">摄影</a></li>
                                <li><a href="">影视</a></li>
                                <li><a href="">Lorem.</a></li>
                                <li><a href="">Sint.</a></li>
                                <li><a href="">Dolores.</a></li>
                                <li><a href="">Provident.</a></li>
                                <li><a href="">Esse.</a></li>
                                <li><a href="">Libero.</a></li>
                                <li><a href="">Excepturi.</a></li>
                                <li><a href="">Veritatis.</a></li>
                                <li><a href="">Molestiae.</a></li>
                                <li><a href="">Itaque!</a></li>
                                <li><a href="">Mollitia!</a></li>
                                <li><a href="">Praesentium?</a></li>
                                <li><a href="">Officia?</a></li>
                                <li><a href="">Explicabo!</a></li>
                                <li><a href="">Ab?</a></li>
                                <li><a href="">Optio.</a></li>
                                <li><a href="">Voluptates!</a></li>
                                <li><a href="">Omnis.</a></li>
                                <li><a href="">Ullam!</a></li>
                                <li><a href="">Cum?</a></li>
                            </ul>
                        </div>
                        <div class="group-name">
                            <a href="">兴趣</a>
                        </div>
                        <div class="aside-right">
                            <ul class="right-menu-list clearfix">
                                <li><a href="">旅行</a></li>
                                <li><a href="">摄影</a></li>
                                <li><a href="">影视</a></li>
                                <li><a href="">Lorem.</a></li>
                                <li><a href="">Sint.</a></li>
                                <li><a href="">Dolores.</a></li>
                                <li><a href="">Provident.</a></li>
                                <li><a href="">Esse.</a></li>
                                <li><a href="">Libero.</a></li>
                                <li><a href="">Excepturi.</a></li>
                                <li><a href="">Veritatis.</a></li>
                                <li><a href="">Molestiae.</a></li>
                                <li><a href="">Itaque!</a></li>
                                <li><a href="">Mollitia!</a></li>
                                <li><a href="">Praesentium?</a></li>
                                <li><a href="">Officia?</a></li>
                                <li><a href="">Explicabo!</a></li>
                                <li><a href="">Ab?</a></li>
                                <li><a href="">Optio.</a></li>
                                <li><a href="">Voluptates!</a></li>
                                <li><a href="">Omnis.</a></li>
                                <li><a href="">Ullam!</a></li>
                                <li><a href="">Cum?</a></li>
                            </ul>
                        </div>
                        
                    </div>
                    
                </div>

接下来就是main区域，main中的section-title和之前电影区域写的setion一样，复制粘贴即可，接着就是图片的排列了，这里只写一个就行，基本结构如下：

<ul class="item-list">
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="./imgs/小组1.webp" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">我爱三毛</a>
                                <span>
                                    16265个成员
                                </span>
                            </div>
                        </li>
                    </ul>

先给li区域定宽，设置字体大小，margin-bottom，这里要注意一个问题：

这里我们想要的效果如上；不管文字为多少，文字均会避开浮动盒子，这里就要让li元素创建bfc，创建bfc元素的元素会避开浮动盒子，会解决文字环绕图片的问题，所以给li里添加overflow即可

.group-area .main .item-list li{
    width: 248px;
    /* 创建bfc解决高度坍塌问题 */
    overflow: hidden;
    /* 行块盒本身就能创建bfc */
    margin-bottom: 30px;
    font-size: 13px;
}

给span设置块盒样式独占一行。

设置分散对齐

text-align：justify，给item-list添加伪元素，让伪元素独占一行，解决了justify不让最后一行分散对齐的问题

.group-area .main .item-list::after{
    content: "";
    display: inline-block;
    width: 100%;
}

给图片定宽，浮动，给文字添加overflow:hidden.

.group-area .main .item-list li .img{
    float: left;
    width: 48px;
    margin-right: 15px;
}
.group-area .main .item-list li .words{
    /* 创建bfc，避开浮动盒子 */
    overflow: hidden;
}
.group-area .main .item-list li .words span{
    display: block;
    color: #999;
    font-size: 12px;
    margin-top: 5px;
}

目前的效果如下：