CSS项目实战-名称标签(名片)

最新推荐文章于 2024-07-01 17:42:31 发布

CodeRanger

最新推荐文章于 2024-07-01 17:42:31 发布

阅读量744

点赞数 3

分类专栏： web学习与开发文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_62272360/article/details/125743627

版权

web学习与开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

“但使龙城飞将在，不教胡马度阴山。”

效果类似于某站的名称标签，但是里面的某些内容是可以点击的。

--------------------------------------------------------------------------------------------------------------------------------

类似的，我们在自己做标签的时候，要先定好样式，分好区域然后再写代码，这是我设计的：

成品

经过一下午的笨蛋操作终于完成了简易的名称标签。

框架

解释下各个区域代表的含义及代码中的实现：

---上边框是文字内容，存放的是时间等信息。

---下大边框里面圆形是存放个人头像，右边的文字是个人简介之类的，其中部分内容可链接。

<body>
    <div class="user-card">
        <div class="user-card-head"></div>
        <div class="user-card-body">
            <div class="user-card-body-photo"></div>
            <div class="user-card-body-info">
                <div class="user-card-body-info-username"></div>
                <div class="user-card-body-info-reputation"></div>
            </div>
        </div>
    </div>
</body>

代码解释：最外面是大边框起名为user-card，里面各部分的包含关系参考上图，head标签表示上部分边框，body标签是下半部分方框。

信息添加

我们按照从上往下，从左向右的顺序逐个添加我们需要的信息。

1.首先是个人简介的添加：直接输入你的简介。

<div class="user-card-head">
    --前人种树，后人乘凉--
</div>

2.头像的添加：在user-card-body-photo模块里添加图片即可，样式修改为：

.user-card-body-photo img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

3.名称的添加：到了user-card-body-info模块了，也就是下面的大方块。这里需要加超链接的，链接到我的主页（夹带私货）：

<div class="user-card-body-info-username">
    <a href="https://blog.csdn.net/qq_62272360?spm=1018.2226.3001.5343">历历越越同学</a>
</div>

字体样式的修改：

.user-card-body-info-username>a {
    font-size: 14px;
    color: #0074CC;
    text-decoration: none;
}

4.码龄的添加：没有链接的3操作：

<div class="time">码龄：1年</div>

字体样式的修改：

.time {
    font-size: 7px;
}

5.博客信息的添加：名称可以加粗，然后数量用红色醒目，由于两者颜色不同需要分开定义，所以可以用span标签单独修改。

<div class="user-card-body-info-reputation">
    <span class="space">博客 : </span>
    33
    <span class="space">阅读 : </span>
    7000+
    <span class="space">排名 : </span>
    6.0W+
</div>

字体样式的修改：

.user-card-body-info-reputation {
    font-size: 1px;/*这里的size直接最小号就可*/
    color: red;
    font-weight: bold;
}

格式控制

上面说完了基本操作和布局，下面解释一下细节格式问题。由于我们的user-card-body-info模块和user-card-body-photo模块要在同一行上，所以要对模块之间做一下定义：

.user-card-body-photo {
    float: left;
}

.user-card-body-info {
    float: left;
    margin-left: 10px;
}

即浮动左对齐达到同行目的。

--------------------------------------------------------------over-------------------------------------------------------------

下面附上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>
    <link rel="stylesheet" href="/static/css/style.css">
</head>

<body>
    <div class="user-card">
        <div class="user-card-head">
            --前人种树，后人乘凉--
        </div>
        <div class="user-card-body">
            <div class="user-card-body-photo">
                <img src="/static/images/项目。1.png" alt="">
            </div>
            <div class="user-card-body-info">
                <div class="user-card-body-info-username">
                    <a href="https://blog.csdn.net/qq_62272360?spm=1018.2226.3001.5343">历历越越同学</a>
                </div>
                <div class="time">码龄：1年</div>
                <div class="user-card-body-info-reputation">
                    <span class="space">博客 : </span>
                    33
                    <span class="space">阅读 : </span>
                    7000+
                    <span class="space">排名 : </span>
                    6.0W+
                </div>
            </div>
        </div>
    </div>
</body>

</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>
    <link rel="stylesheet" href="/static/css/style.css">
</head>

<body>
    <div class="user-card">
        <div class="user-card-head">
            <div class="change">
                <a href="#">...</a>
            </div>
        </div>
        <div class="user-card-body">
            <div class="left">
                <div class="photo">
                    <img src="/static/images/项目。1.png" alt="GG">
                </div>
            </div>
            <div class="right">
                <div class="right-text">
                    <div class="username">
                        CodeRanger
                        <span style="color: rgb(8, 218, 237); font-weight: bold;">
                            ♂
                            <img src="/static/images/lve.png" alt="GG">
                        </span>
                    </div>
                    <div class="reuptation">
                        <span class="gai">
                            <span>19</span>
                            <span>关注</span>
                        </span>
                        <span class="gai">
                            <span>1W</span>
                            <span>粉丝</span>
                        </span>
                        <span class="gai">
                            <span>87W</span>
                            <span>点赞</span>
                        </span>
                    </div>
                </div>
                <div class="right-button">
                    <button>关注</button>
                    <button>私聊</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

.user-card {
    width: 300px;
    height: 200px;
    background-color: rgb(244, 241, 238);
    box-shadow: 2px 2px 5px black;
    margin: 50% auto;
}

.user-card-head {
    background-image: url('/static/images/beijing.png');
    background-size: cover;
    width: 100%;
    height: 80px;
}


.user-card-body {
    height: calc(100% - 85px);
    width: 100%;
    box-sizing: border-box;
    padding-top: 12px;
    padding-left: 8px;
}


.left {
    width: 70px;
    height: 100%;
    float: left;
}

.right {
    width: calc(100% - 70px);
    height: 100%;
    float: left;
}

.photo img {
    width: 65px;
    height: 65px;
    border-radius: 50%;

}

.change>a {
    font-size: 25px;
    margin-top: 1%;
    margin-left: 80%;
    text-decoration: none;
    color: white;
}

.change:hover {
    transform: scale(1.1);
    transition: 200ms;
}

.right-text {
    width: 100%;
    height: 70%;
}

.username {
    font-size: 16px;
    color: rgb(246, 8, 119);
    font-weight: bold;
}

.username:hover {
    transform: scale(1.1);
    transition: 200ms;
}

.leve img {
    width: 28px;
    height: 10px;
}

.gai {
    margin-right: 20px;
}


.gai>span:nth-child(1) {
    font-size: 10px;
    color: #222222;
}

.gai>span:nth-child(2) {
    font-size: 5px;
    color: #9499a0;
}

.reuptation {
    padding-top: 10px;
}

.right-button>button {
    width: 70px;
    height: 30px;
    border: none;
    border-radius: 5px;
    margin-right: 5px;
}

.right-button>button:nth-child(1) {
    background-color: #00b5e5;
    color: white;
}

.right-button>button:nth-child(2) {
    border: #ccd0d7 solid 2px;
    color: #6d757a;
}

.right-button>button:nth-child(2):hover {
    border-color: #00b5e5;
    color: #00b5e5;
    transition: 200ms;
}

顺便复习一下伪类标签，名称和关注会改变哦~