“但使龙城飞将在,不教胡马度阴山。”
效果类似于某站的名称标签,但是里面的某些内容是可以点击的。
--------------------------------------------------------------------------------------------------------------------------------
类似的,我们在自己做标签的时候,要先定好样式,分好区域然后再写代码,这是我设计的:
成品
经过一下午的笨蛋操作终于完成了简易的名称标签。
框架
解释下各个区域代表的含义及代码中的实现:
---上边框是文字内容,存放的是时间等信息。
---下大边框里面圆形是存放个人头像,右边的文字是个人简介之类的,其中部分内容可链接。
<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;
}
顺便复习一下伪类标签,名称和关注会改变哦~