前端实战项目：网易云静态页面——主页面右侧部分

0202ohh

已于 2023-05-11 15:18:48 修改

阅读量1k

点赞数 1

分类专栏：前端项目学习文章标签：前端 css css3

于 2023-05-11 14:12:36 首次发布

本文链接：https://blog.csdn.net/weixin_62917800/article/details/130598967

版权

前端项目学习专栏收录该内容

4 篇文章 3 订阅

订阅专栏

文章目录

前言
main部分结构布局
用户登陆
右侧列表
总代码

前言

项目持续更新中～
网易云静态页面——导航栏
 网易云静态页面——轮播图
 Flex布局详解

所用到文件及文件夹
在这里插入图片描述

header：是对某些标题样式的封装
main：主要的css代码
reset：一些标签的重置
images：用来存放要用到的图片

main部分结构布局

<!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>main部分</title>
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/reset.css">
</head>
<body>
    <div class="main">
        <div class="area">
            <div class="area-left"></div>
            <div class="area-right"></div>
        </div>
    </div>
</body>
</html>

/* main */
.area{
    /* 浮动布局，让area-left和area-right在同一行排列 */
    display: flex;
    /* 内容部分 */
    width: 980px;
    height: 1425px;
    /* 内容水平居中 */
    margin: 0 auto;
    /* 加上边框总宽度也为980px */
    box-sizing: border-box;
    border: 1px solid #d3d3d3;
    /* 去掉上下边框，只保留左右边框 */
    border-width: 0 1px;
}

.area .area-left{
    width: 730px;
    border-right: 1px solid #d3d3d3;
    /* 算上右边框总宽度也是730px */
    box-sizing: border-box;
}

/* reset */
body{
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

页面如下：
在这里插入图片描述

用户登陆

完成如下页面的制作
在这里插入图片描述

            <div class="area-right">
                <div class="user_login">
                    <p class="desc">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                    <a href="#" class="btn">用户登陆</a>
                </div>
            </div>

/* reset */
a{
    text-decoration: none;
}

/* main */
/* 用户登陆整体部分设置 */
.area .area-right .user_login{
    width: 250px;
    height: 126px;
    /* 让desc和enter部分继承字体大小 */
    font-size: 12px;
    /* 背景 */
    background: url(../images/main_01.png) 0 0;
}

/* 用户登陆描述设置 */
.area .area-right .user_login .desc{
    width: 205px;
    color: #666;
    /* 设置内边距 */
    padding: 16px 0;
    /* 设置外边距 */
    margin: 0 auto;
    /* 设置行高，留出行距 */
    line-height: 22px;
}

/* 用户登陆按钮设置 */
.area-right .user_login .btn{
    /* enter是一个a便签，是行内级元素，将它转换为块级元素从而可以设置其宽高 */
    display: block;
    width: 100px;
    height: 31px;
    /* 文字颜色 */
    color: #fff;
    /* 设置行高跟height一样的值，使文字在btn中垂直居中 */
    line-height: 31px;
    /* 使文字水平居中 */
    text-align: center;
    /* 设置外边距，使这个部分在user_login中居中 */
    margin: auto auto;
    /* 设置图片背景 */
    background: url(../images/main_01.png) 0 -195px;
}

/* 鼠标放上用户登陆按钮背景高亮 */
.area-right .user_login .btn:hover{
    /* 鼠标放上按钮时更换其背景图 */
    background-position: -110px -195px;
}

页面如下：在这里插入图片描述

右侧列表

完成如下页面的制作
在这里插入图片描述
其内容可以大致分为两个列表，每个列表前面都有一个header，这两个header都差不多，所以我们可以对它的样式进行封装。

header的封装

settle_list是右边两个列表合成的一个整体，settle_singer是第一个list，它里面的header_type_01及其子元素就是我们对header的一个封装。

                <div class="settle_list">
                    <div class="settle_singer">
                        <div class="header_type_01">
                            <h3 class="title">入驻歌手</h3>
                            <a href="#" class="more">查看全部 &gt;</a>
                        </div>
                    </div>
                </div>

新建一个css文件并在html文件中引入

/* header */
.header_type_01{
    /* 浮动布局，让title和more在同一行排列 */
    display: flex;
    /* 分别处于main axis的两端 */
    justify-content: space-between;
    /* 让title和more垂直居中 */
    align-items: center;
    /* 设置header的高度 */
    height: 33px;
    /* 设置顶部的外边距，使其与用户登陆部分保持一定的间距 */
    margin-top: 10px;
    /* 设置底部边框 */
    border-bottom: 1px solid #ccc;
    font-size: 12px;
}

.header_type_01 .title{
    /* h3本身是有一个文字大小的设置的，所以不能继承父元素的字体大小，只能重新设置 */
    font-size: 12px;
}

.header_type_01 .more{
    color: #666;
}

.header_type_01 .more:hover{
    text-decoration: underline;
}

/* main */
/* 右侧对两个list整体的设置 */
.area-right .settle_list{
    /* 使整个内容距离两边有一定的距离 */
    margin: auto 20px;
}

页面如下：
在这里插入图片描述
封装好后，我们只需建立相应的标签并填入相应的内容就可以完成header的一个制作了

                <div class="settle_list">
                    <div class="settle_singer">
                        <div class="header_type_01">
                            <h3 class="title">入驻歌手</h3>
                            <a href="#" class="more">查看全部 &gt;</a>
                        </div>
                    </div>
                    <div class="settle_anchor">
                        <div class="header_type_01">
                            <h3 class="title">热门主播</h3>
                        </div>
                    </div>
                </div>

页面如下：在这里插入图片描述
下面继续列表的一个制作

歌手列表

完成如下页面的制作
在这里插入图片描述

                    <div class="settle_singer">
                        <div class="header_type_01">
                            <h3 class="title">入驻歌手</h3>
                            <a href="#" class="more">查看全部 &gt;</a>
                        </div>
                        <ul class="singer_list">
                            <li>
                                <a href="#" class="item">
                                    <div class="album">
                                        <img src="./images/singer_01.jpeg" alt="">
                                    </div>
                                    <div class="info">
                                        <div class="name">张惠妹aMEI</div>
                                        <div class="intro">台湾歌手张惠妹</div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>

标签之间的嵌套可能有点多，这里用文字来解释一下：这个歌手列表一共有5个子元素，也就是5个li标签，每个标签里有一个a标签，a标签里又有两部分内容，第一部分就是图片，第二部分就是描述，描述里又有两部分，分别是歌手的名字和简介。

/* reset */
body,h1,h2,h3,ul,li{
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

a{
    text-decoration: none;
}

ul{
    list-style: none;
}

/* main */
.area-right .singer_list{
    /* 歌手列表距离hearder的下边框有一定的距离 */
    margin-top: 20px;
}


/* 入驻歌手list设置 */
.area-right .singer_list .item{
    /* 浮动布局，让图片和info的内容在同一行排列 */
    display: flex;
    width: 210px;
    height: 62px;
    font-size: 12px;
}


.area-right .singer_list .info .name{
    color: #333;
    font-size: 14px;
    font-weight: 700;
}

.area-right .singer_list .info .intro{
    color: #666;
}

.area-right .singer_list .info{
    /* 浮动布局，让info的name和intro在同一行排列 */
    display: flex;
    /* 改变main axis的方向，使其竖直向下，这里改变方向是为了让justify-content在竖直方向上起作用 */
    flex-direction: column;
    /* 使name和info有一定的间距，且它们两个距离边框的距离为它们之间距离的一半 */
    justify-content: space-around;
    /* 不设置此属性边框只能包裹到文字结尾处，设置后边框可以包裹整个除图片部分外的整个item */
    flex: 1;
    /* 使info整体距离图片有一定的距离 */
    padding-left: 15px;
    border: 1px solid #e9e9e9;
    /* 添加背景颜色 */
    background-color: #fafafa;
}

页面如下：在这里插入图片描述
然后我们再复制刚才li标签及其里面的所有内容（复制4次），最后再换成相应的歌手图片和歌手名字、简介等就行了。

                        <ul class="singer_list">
                            <li>
                                <a href="#" class="item">
                                    <div class="album">
                                        <img src="./images/singer_01.jpeg" alt="">
                                    </div>
                                    <div class="info">
                                        <div class="name">张惠妹aMEI</div>
                                        <div class="intro">台湾歌手张惠妹</div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="item">
                                    <div class="album">
                                        <img src="./images/singer_02.jpeg" alt="">
                                    </div>
                                    <div class="info">
                                        <div class="name">吴莫愁Momo</div>
                                        <div class="intro">《中国好声音》选手吴莫愁</div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="item">
                                    <div class="album">
                                        <img src="./images/singer_03.jpeg" alt="">
                                    </div>
                                    <div class="info">
                                        <div class="name">孙楠</div>
                                        <div class="intro">歌手孙楠 代表作《你快回来》《燃烧》</div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="item">
                                    <div class="album">
                                        <img src="./images/singer_04.jpeg" alt="">
                                    </div>
                                    <div class="info">
                                        <div class="name">麦田老狼</div>
                                        <div class="intro">歌手，音乐人。代表作《同桌的你》等。</div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="item">
                                    <div class="album">
                                        <img src="./images/singer_05.jpeg" alt="">
                                    </div>
                                    <div class="info">
                                        <div class="name">陈楚生</div>
                                        <div class="intro">唱作歌手</div>
                                    </div>
                                </a>
                            </li>
                        </ul>

页面如下：在这里插入图片描述
可以看到人物介绍那里换行硬塞下了，但是原网页是这样的：
后面多的内容就省略了。添加如下css样式实现这个效果：

/* main */
.area-right .singer_list .info .intro{
    color: #666;

    white-space: nowrap;
    /* 超出intro部分的藏起来 */
    overflow: hidden;
    /* 显示的文本用省略号来表示 */
    text-overflow: ellipsis;
}

.area-right .singer_list .info{
    /* 浮动布局，让info的name和intro在同一行排列 */
    display: flex;
    /* 改变main axis的方向，使其竖直向下 */
    flex-direction: column;
    /* 使name和info有一定的间距，且它们两个距离边框的距离为它们之间距离的一半 */
    justify-content: space-around;
    /* 不设置此属性边框只能包裹到文字结尾处，设置后边框可以包裹整个除图片部分外的整个item */
    flex: 1;
    width: 148px;
    /* 使info整体距离图片有一定的距离 */
    padding-left: 15px;
    border: 1px solid #e9e9e9;
    /* 添加背景颜色 */
    background-color: #fafafa;

    /* 这里是要配合上面的省略内容使用，按理来说用上面三行代码就可以实现，目前不知道啥原因 */
    overflow: hidden;
}

页面如下：在这里插入图片描述

主播列表

                    <div class="settle_anchor">
                        <div class="header_type_01">
                            <h3 class="title">热门主播</h3>
                        </div>
                        <ul class="anchor_list">
                            <li class="item">
                                <div class="album">
                                    <img src="./images/anchor_01.jpeg" alt="">
                                </div>
                                <div class="info">
                                    <div><a href="#" class="name">陈立</a></div>
                                    <div class="intro">心理学家、美食家陈立教授</div>
                                </div>
                            </li>
                        </ul>
                    </div>

/* main */
.area-right .anchor_list{
    /* 使主播列表离header下面的线有一定的距离 */
    margin-top: 20px;
}

.area-right .anchor_list .item{
    /* 浮动布局，让album和info在同一行排列 */
    display: flex;
    /* 设置item的宽高 */
    width: 210px;
    height: 50px;
    /* 行距 */
    line-height: 21px;
}   

.area-right .anchor_list .info{
    /* 浮动布局，让info中的name和intro在同一行排列 */
    display: flex;
    /* 改变main axis的方向，使其竖直向下 */
    flex-direction: column;
    /* 使name和intro之间有一定的距离，且它们分别离边框的距离为它们之间距离的一半 */
    justify-content: space-around;
    /* 使info离图片有一定的距离 */
    padding-left: 10px;
}

.area-right .anchor_list .info .name{
    font-size: 12px;
    color: #000;
}

.area-right .anchor_list .info .intro{
    font-size: 12px;
    color: #666;
    padding-bottom: 10px;
}

/* 当鼠标放上name时文本出现下划线 */
.area-right .anchor_list .info .name:hover{
    text-decoration: underline;
}

页面如下：
在这里插入图片描述
然后我们再复制刚才li标签及其里面的所有内容（复制4次），最后再换成相应的主播图片和主播名字、简介等就行了。

同时修改如下css代码：

/* main */
.area-right .anchor_list .info{
    /* 浮动布局，让info中的name和intro在同一行排列 */
    display: flex;
    /* 改变main axis的方向，使其竖直向下 */
    flex-direction: column;
    /* 使name和intro之间有一定的距离，且它们分别离边框的距离为它们之间距离的一半 */
    justify-content: space-around;
    /* 使info离图片有一定的距离 */
    padding-left: 10px;

    overflow: hidden;
}

.area-right .anchor_list .info .intro{
    font-size: 12px;
    color: #666;
    padding-bottom: 10px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

页面如下：
在这里插入图片描述

到这里main右侧部分就制作完成了。

申请按钮

完成如下页面制作

正常情况：在这里插入图片描述
hover：

在这里插入图片描述
这个按钮的背景需要用原网页中提供的图片来做，图片如下：
我们只需用到前面的一小部分

在这里插入图片描述
可以看到这个按钮是由两个背景图共同拼凑而来的，一大一小就组成了一个完整的按钮背景，那么如何设置呢？

先看看html结构：在这里插入图片描述
我们可以在application里设置背景图小的一部分，然后再在btn里设置背景大的一部分，最后通过调整边距，使按钮可以完美地呈现出来

.area-right .settle_singer .application{
    /* 设置按钮的宽高 */
    width: 210px;
    height: 31px;
    /* 设置字体大小 */
    font-size: 12px;
    /* 设置行高与application高度一样，使文本垂直居中 */
    line-height: 31px;
    /* 使文本水平居中 */
    text-align: center;
    /* 使按钮离歌手列表有一定的距离 */
    margin-top: 15px;
    /* 使按钮离主播列表有一定的距离 */
    margin-bottom: 25px;
    /* application背景图设置的按钮最后那一小块，设置右内边距是为了不让btn把那一小部分覆盖掉了 */
    padding-right: 5px;
    /* 为了消除左上角的红色小点 */
    border-radius: 4px;
    background: url(../images/main_02.png) right -100px;
    /* 放上去的时候鼠标变小手 */
    cursor: pointer;
}

.area-right .settle_singer .application .btn{
    /* 转换成块级元素从而可以设置其宽高 */
    display: block;
    /* 继承父元素的高度 */
    height: inherit;
    /* 设置左边一大块的背景 */
    background: url(../images/main_02.png) 0 -59px;
    /* 使文本向右移动一点，从而更居中 */
    padding-left: 4px;
    color: #000;
    /* 文字加粗 */
    font-weight: 600;
}



.area-right .settle_singer .application:hover{
    background-position: right -182px;
}

.area-right .settle_singer .application .btn:hover{
    background-position: 0 -141px;
}

页面如下：在这里插入图片描述
到这里主页右侧部分就结束啦，如果有没讲清楚或者讲错了的地方，欢迎大家前来讨论。

总代码

main.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>main部分</title>
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/header.css">
</head>
<body>
    <div class="main">
        <div class="area">
            <div class="area-left">
                <div class="user_login"></div>
            </div>
            <div class="area-right">
                <div class="user_login">
                    <p class="desc">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                    <a href="#" class="btn">用户登陆</a>
                </div>
                <div class="settle_list">
                    <div class="settle_singer">
                        <div class="header_type_01">
                            <h3 class="title">入驻歌手</h3>
                            <a href="#" class="more">查看全部 &gt;</a>
                        </div>
                        <ul class="singer_list">
                            <li>
                                <a href="#" class="item">
                                    <div class="album">
                                        <img src="./images/singer_01.jpeg" alt="">
                                    </div>
                                    <div class="info">
                                        <div class="name">张惠妹aMEI</div>
                                        <div class="intro">台湾歌手张惠妹</div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="item">
                                    <div class="album">
                                        <img src="./images/singer_02.jpeg" alt="">
                                    </div>
                                    <div class="info">
                                        <div class="name">吴莫愁Momo</div>
                                        <div class="intro">《中国好声音》选手吴莫愁</div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="item">
                                    <div class="album">
                                        <img src="./images/singer_03.jpeg" alt="">
                                    </div>
                                    <div class="info">
                                        <div class="name">孙楠</div>
                                        <div class="intro">歌手孙楠 代表作《你快回来》《燃烧》</div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="item">
                                    <div class="album">
                                        <img src="./images/singer_04.jpeg" alt="">
                                    </div>
                                    <div class="info">
                                        <div class="name">麦田老狼</div>
                                        <div class="intro">歌手，音乐人。代表作《同桌的你》等。</div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="item">
                                    <div class="album">
                                        <img src="./images/singer_05.jpeg" alt="">
                                    </div>
                                    <div class="info">
                                        <div class="name">陈楚生</div>
                                        <div class="intro">唱作歌手</div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                        <div class="application">
                            <a href="#" class="btn">申请成为网易云音乐人</a>
                        </div>
                    </div>
                    <div class="settle_anchor">
                        <div class="header_type_01">
                            <h3 class="title">热门主播</h3>
                        </div>
                        <ul class="anchor_list">
                            <li class="item">
                                <div class="album">
                                    <img src="./images/anchor_01.jpeg" alt="">
                                </div>
                                <div class="info">
                                    <div><a href="#" class="name">陈立</a></div>
                                    <div class="intro">心理学家、美食家陈立教授</div>
                                </div>
                            </li>
                            <li class="item">
                                <div class="album">
                                    <img src="./images/anchor_02.jpeg" alt="">
                                </div>
                                <div class="info">
                                    <div><a href="#" class="name">刘维-Julius</a></div>
                                    <div class="intro">歌手、播客节目《维维道来》主理人</div>
                                </div>
                            </li>
                            <li class="item">
                                <div class="album">
                                    <img src="./images/anchor_03.jpeg" alt="">
                                </div>
                                <div class="info">
                                    <div><a href="#" class="name">莫非定律乐团</a></div>
                                    <div class="intro">男女双人全创作独立乐团</div>
                                </div>
                            </li>
                            <li class="item">
                                <div class="album">
                                    <img src="./images/anchor_04.jpeg" alt="">
                                </div>
                                <div class="info">
                                    <div><a href="#" class="name">碎嘴许美达</a></div>
                                    <div class="intro">脱口秀网络红人</div>
                                </div>
                            </li>
                            <li class="item">
                                <div class="album">
                                    <img src="./images/anchor_05.jpeg" alt="">
                                </div>
                                <div class="info">
                                    <div><a href="#" class="name">银临Rachel</a></div>
                                    <div class="intro"></div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

main.css

.area{
    /* 浮动布局，让area-left和area-right在同一行排列 */
    display: flex;
    /* 内容部分 */
    width: 980px;
    height: 1425px;
    /* 内容水平居中 */
    margin: 0 auto;
    /* 加上边框总宽度也为980px */
    box-sizing: border-box;
    border: 1px solid #d3d3d3;
    /* 去掉上下边框，只保留左右边框 */
    border-width: 0 1px;
}

.area .area-left{
    width: 730px;
    border-right: 1px solid #d3d3d3;
    /* 算上右边框总宽度也是730px */
    box-sizing: border-box;
}

/* 用户登陆整体部分设置 */
.area .area-right .user_login{
    width: 250px;
    height: 126px;
    /* 让desc和enter部分继承字体大小 */
    font-size: 12px;
    /* 背景 */
    background: url(../images/main_01.png) 0 0;
}

/* 用户登陆描述设置 */
.area .area-right .user_login .desc{
    width: 205px;
    color: #666;
    /* 设置内边距 */
    padding: 16px 0;
    /* 设置外边距 */
    margin: 0 auto;
    /* 设置行高，留出行距 */
    line-height: 22px;
}

/* 用户登陆按钮设置 */
.area-right .user_login .btn{
    /* enter是一个a便签，是行内级元素，将它转换为块级元素从而可以设置其宽高 */
    display: block;
    width: 100px;
    height: 31px;
    /* 文字颜色 */
    color: #fff;
    /* 设置行高跟height一样的值，使文字垂直居中 */
    line-height: 31px;
    /* 使文字水平居中 */
    text-align: center;
    /* 设置外边距，使这个部分在user_login中居中 */
    margin: auto auto;
    /* 设置图片背景 */
    background: url(../images/main_01.png) 0 -195px;
}

/* 鼠标放上用户登陆按钮背景高亮 */
.area-right .user_login .btn:hover{
    /* 鼠标放上按钮时更换其背景图 */
    background-position: -110px -195px;
}


/* 右侧对两个list整体的设置 */
.area-right .settle_list{
    /* 使整个内容距离两边有一定的距离 */
        margin: auto 20px;
}

.area-right .singer_list{
    /* 歌手列表距离hearder的下边框有一定的距离 */
    margin-top: 20px;
}


/* 入驻歌手list设置 */
.area-right .singer_list .item{
    /* 浮动布局，让图片和info的内容在同一行排列 */
    display: flex;
    width: 210px;
    height: 62px;
    font-size: 12px;
}


.area-right .singer_list .info .name{
    color: #333;
    font-size: 14px;
    font-weight: 700;
}

.area-right .singer_list .info .intro{
    color: #666;

    white-space: nowrap;
    /* 超出intro部分的藏起来 */
    overflow: hidden;
    /* 显示的文本用省略号来表示 */
    text-overflow: ellipsis;
}

.area-right .singer_list .info{
    /* 浮动布局，让info的name和intro在同一行排列 */
    display: flex;
    /* 改变main axis的方向，使其竖直向下 */
    flex-direction: column;
    /* 使name和info有一定的间距，且它们两个距离边框的距离为它们之间距离的一半 */
    justify-content: space-around;
    /* 不设置此属性边框只能包裹到文字结尾处，设置后边框可以包裹整个除图片部分外的整个item */
    flex: 1;
    width: 148px;
    /* 使info整体距离图片有一定的距离 */
    padding-left: 15px;
    border: 1px solid #e9e9e9;
    /* 添加背景颜色 */
    background-color: #fafafa;

    /* 这里是要配合上面的省略内容使用 */
    overflow: hidden;
}


/* 主播列表 */
.area-right .anchor_list{
    /* 使主播列表离header下面的线有一定的距离 */
    margin-top: 20px;
}

.area-right .anchor_list .item{
    /* 浮动布局，让album和info在同一行排列 */
    display: flex;
    /* 设置item的宽高 */
    width: 210px;
    height: 50px;
    /* 行距 */
    line-height: 21px;
}   

.area-right .anchor_list .info{
    /* 浮动布局，让info中的name和intro在同一行排列 */
    display: flex;
    /* 改变main axis的方向，使其竖直向下 */
    flex-direction: column;
    /* 使name和intro之间有一定的距离，且它们分别离边框的距离为它们之间距离的一半 */
    justify-content: space-around;
    /* 使info离图片有一定的距离 */
    padding-left: 10px;

    overflow: hidden;
}

.area-right .anchor_list .info .name{
    font-size: 12px;
    color: #000;
}

.area-right .anchor_list .info .intro{
    font-size: 12px;
    color: #666;
    padding-bottom: 10px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 当鼠标放上name时文本出现下划线 */
.area-right .anchor_list .info .name:hover{
    text-decoration: underline;
}

.area-right .settle_singer .application{
    /* 设置按钮的宽高 */
    width: 210px;
    height: 31px;
    /* 设置字体大小 */
    font-size: 12px;
    /* 设置行高与application高度一样，使文本垂直居中 */
    line-height: 31px;
    /* 使文本水平居中 */
    text-align: center;
    /* 使按钮离歌手列表有一定的距离 */
    margin-top: 15px;
    /* 使按钮离主播列表有一定的距离 */
    margin-bottom: 25px;
    /* application背景图设置的按钮最后那一小块，设置右内边距是为了不让btn把那一小部分覆盖掉了 */
    padding-right: 5px;
    /* 为了消除左上角的红色小点 */
    border-radius: 4px;
    background: url(../images/main_02.png) right -100px;
    /* 放上去的时候鼠标变小手 */
    cursor: pointer;
}

.area-right .settle_singer .application .btn{
    /* 转换成块级元素从而可以设置其宽高 */
    display: block;
    /* 继承父元素的高度 */
    height: inherit;
    /* 设置左边一大块的背景 */
    background: url(../images/main_02.png) 0 -59px;
    /* 使文本向右移动一点，从而更居中 */
    padding-left: 4px;
    color: #000;
    /* 文字加粗 */
    font-weight: 600;
}



.area-right .settle_singer .application:hover{
    background-position: right -182px;
}

.area-right .settle_singer .application .btn:hover{
    background-position: 0 -141px;
}

header.css

.header_type_01{
    /* 浮动布局，让title和more在同一行排列 */
    display: flex;
    /* 分别处于main axis的两端 */
    justify-content: space-between;
    /* 让title和more垂直居中 */
    align-items: center;
    /* 设置header的高度 */
    height: 33px;
    /* 设置顶部的外边距，使其与用户登陆部分保持一定的间距 */
    margin-top: 10px;
    /* 设置底部边框 */
    border-bottom: 1px solid #ccc;
    font-size: 12px;
}

.header_type_01 .title{
    /* h3本身是有一个文字大小的设置的，所以不能继承父元素的字体大小，只能重新设置 */
    font-size: 12px;
}

.header_type_01 .more{
    color: #666;
}

.header_type_01 .more:hover{
    text-decoration: underline;
}

reset.css

body,h1,h2,h3,ul,li{
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

a{
    text-decoration: none;
}

ul{
    list-style: none;
}