前言

目的：实战1：实现如下图所示的个人名片，名片原链接为个人名片

实战2. 实现个人名片设计，如下图所示

实战 1 具体实现

一、步骤

定好 html 结构
调整样式 css
最后写逻辑 js

二、定义 html 结构

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="/css实战_名片/static/style.css">
</head><body><!-- 样式结构定义 --><!-- 类命名时一个技巧是不断往后加后缀 --><div class="user-card"><div class="user-card-head">asked Feb 9, 2019 at 18:18</div><div class="user-card-body"><div class="user-card-body-photo"><img src="" alt=""></div><div class="user-card-body-info"><div class="user-card-body-info-name">yjx</div><div class="user-card-body-info-repution">1,05531425</div></div></div></div>
</body></html>

预览结果如下

三、定义 css 样式

顺序：从外边框开始一层一层逐步往内分解

设置外边框宽、高、背景颜色

.user-card {width: 200px;height: 67.35px;background-color: #D9EAF7;margin: 100px auto;
}

往里面走，设置内边距

.user-card {width: 200px;height: 67.35px;background-color: #D9EAF7;margin: 100px auto;padding: 5px 6px 7px 7px;box-sizing: border-box;
}

往里面走，时间区域

.user-card-head {font-size: 12px;color: #6A737C;margin: 1px 0 4px 0;
}

往下走，头像和个人信息区域

.user-card-body-photo img {width: 32px;height: 32px;border-radius: 2px;
}.user-card-body-photo {float: left;
}.user-card-body-info {float: left;margin-left: 8px;
}.user-card-body-info-username {height: 14px;/*使字体居中*/line-height: 16px;margin-bottom: 4px;
}.user-card-body-info-username>a {font-size: 13px;color: #0074CC;text-decoration: none;
}.user-card-body-info-repution {font-size: 12px;color: #838C95;height: 14px;line-height: 16px;
}.user-card-body-info-repution-item {width: 6px;height: 6px;display: inline-block;border-radius: 50%;margin: 0 3px 0 2px;position: relative;top: -2px;
}

四、实战 1 工程源码下载

整体实现效果如下图所示，点击下载实战1源码

实战 2 具体实现

一、布局

二、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="/css实战_名片2/static/bilibili.css">
</head><body><div class="user-card"><div class="user-card-head"></div><div class="user-card-body"><div class="user-card-body-left"><img src="https://cdn.acwing.com/media/user/profile/photo/2786_lg_8e2bd67e52.jpg" alt="个人头像"></div><div class="user-card-body-right"><div class="user-card-body-right-text"><div class="user-card-body-right-text-username">费曼笔记本<span style="font-size: 12px; color: #8BD29B; font-style: italic;">LV5</span></div><div class="user-card-body-right-text-repution"><span class="user-card-body-right-text-repution-item"><span>58</span><span>关注</span></span><span class="user-card-body-right-text-repution-item"><span>3</span><span>粉丝</span></span><span class="user-card-body-right-text-repution-item"><span>15</span><span>赞</span></span></div></div><div class="user-card-body-right-button"><button>+关注</button><button>发消息</button></div></div></div></div>
</body></html>

三、css 样式定义

.user-card {width: 366px;height: 215px;box-shadow: 2px 2px 5px lightgray;border-radius: 5px;
}.user-card-head {background-image: url(/css实战_名片2/images/mountain.jpg);background-size: cover;width: 100%;height: 85px;
}.user-card-body {width: 100%;height: calc(100% - 85px);box-sizing: border-box;padding-top: 12px;
}.user-card-body-left {width: 70px;height: 100%;float: left;text-align: center;
}.user-card-body-right {width: calc(100% - 70px);height: 100%;float: left;
}.user-card-body-left>img {width: 48px;height: 48px;border-radius: 50%;
}.user-card-body-right-text {width: 100%;height: 70%;
}.user-card-body-right-text-username {padding-left: 10px;font-size: 16px;color: #222222;font-weight: bold;
}.user-card-body-right-text-repution {padding-left: 10px;padding-top: 12px;box-sizing: border-box;
}.user-card-body-right-text-repution-item {margin-right: 20px;
}.user-card-body-right-text-repution-item>span:nth-child(1) {font-size: 12px;color: #222222;
}.user-card-body-right-text-repution-item>span:nth-child(2) {font-size: 12px;color: #9499A0;
}.user-card-body-right-button {padding-left: 10px;
}.user-card-body-right-button>button {width: 102px;height: 30px;border: none;border-radius: 5px;margin-right: 5px;cursor: pointer;
}.user-card-body-right-button>button:nth-child(1) {background-color: #00A1D6;color: white;font-weight: 400;
}.user-card-body-right-button>button:nth-child(1):hover {background-color: #00B5E5;/*设置渐变时间*/transition: 700ms;
}.user-card-body-right-button>button:nth-child(2) {background-color: white;border: 1px solid #CCD0D7;color: #6D757A;
}.user-card-body-right-button>button:nth-child(2):hover {border-color: #00B5E5;color: #00B5E5;
}

四、实战 2 工程源码下载

整体实现效果如下图所示，点击下载实战 2 源码

CSS 实战 - 个人名片设计相关推荐

40款奇特的名片设计，吸引大家的眼球《上篇》
我们都知道,任何企业如果想成功,品牌的形象是至关重要的.如果您的企业的标志是大胆,有创意和独特的,那么人们会记住你的,这意味着你实现你的目标.你经常会发现很多情况下,向初始的人传递您的详细信息,名片是 ...
实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI
系列文章实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目实战使 ...
[css] 说说响应式设计(responsive design)和自适应设计(adaptive design)的区别？
[css] 说说响应式设计(responsive design)和自适应设计(adaptive design)的区别? 响应式是通过视口分辨率识别不同客户端展现不同的布局和内容,一套代码.自适应是通过 ...
[css] 你是怎么设计css sprites（精灵图）的？有哪些技巧？
[css] 你是怎么设计css sprites(精灵图)的?有哪些技巧? 首先肯定不会去用PS量,那太费时间了~ 没有webpack以前,用Gulp的gulp.spritesmith插件,这里附上配置 ...
[css] 当拿到一个新的项目，让你对这个项目的css做下架构设计，你该如何下手？
[css] 当拿到一个新的项目,让你对这个项目的css做下架构设计,你该如何下手? 公共变量(主题色/主要空隙/主要字号字体等) 编译器(scss/less/postcss/stylus) 自适应方案 ...
CSS可以实现可视化设计吗？要如何实现？
作为一个多年经验的WEB前端爱好者,我知道好的可视化设计可以大大提高工作效率,那么CSS可以实现可视化设计吗?要如何实现? 1.有哪些概念 1.块级元素(block-level element)和行内 ...
35款非常有创意的透明名片设计作品
名片是陌生人之间建立联系的最便捷.最有效的工具.随着网络的发展,现在已经有了电子名片,很多社交网站也推出了交换名片的功能.今天这篇文章将向大家展示35款非常有创意的透明名片设计作品,一起欣赏吧. 您可 ...
12款很酷的使用大头照的国外名片设计作品
名片的设计多种多样,作为陌生人之间建立联系的最便捷.最有效的工具,名片它是给你的客户留下正面的印象第一步,另外名片也是一个企业和个人最重要和最符合成本效益的营销工具之一.下面的列表向大家展示12款很酷 ...
HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码...
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...

CSS 实战 - 个人名片设计

文章目录

前言

实战 1 具体实现

一、步骤

二、定义 html 结构

三、定义 css 样式

四、实战 1 工程源码下载

实战 2 具体实现

一、布局

二、html 定义

三、css 样式定义

四、实战 2 工程源码下载

CSS 实战 - 个人名片设计相关推荐

最新文章

热门文章