整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。
产品设计时细节是产品经理最头疼的问题，一个button，一个链接都要考虑太多的细节问题。作者整理了常见的一些功能设计问题，一篇文章看懂这些功能设计。来学习吧。
链接也称为超链接，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。
链接可以是一个字或是一段字这样的文本，也可以是一个按钮，一张图片，当你点击后跳转到另一个目标，当你把鼠标指针移到某个链接时会变成一个小手，当然在手机上没有这一特点。
文本样式的链接一般在搜索引擎的网站呈现蓝色字样，大多会在下面加上下划线以便识别，不过现如今考虑到不影响文本的可读性与用户体验，逐渐取消了下划线。而在一些别的网站考虑到界面设计风格各方面的因素而不用蓝色。
谷歌的文本链接是蓝色，没有下划线
百度的文本链接也是蓝色，关键词是红色，有下划线
而京东的文本链接有灰色，有白色，有黑色
按钮样式的链接比文本样式的更容易识别，每一个按钮都是一样链接。
按钮样式链接
图片样式的链接可以是单独的一张图片，也可以是文字与按钮一起组成一张图片，只是鼠标指针扫过图片的任何一个部位都会变成小手。
如桌面弹出这种游戏小窗口的图片式链接
由文字/图/按钮样式一起构成的一张图片式按钮，鼠标可以点击图中任何一部位
链接打开的方式有三种：第一种是在当前页面刷新跳转，国外的网站大多是这样的打开式；第二种是在新标签页面打开链接，国内大多采用这种；第三种是提示用APP打开。当然现在出现了一种新的打开方式，那就是二维码扫描。
提示用美拍APP打开
按照连接路径的不同，网页中超链接一般分为以下3种类型：内部链接，锚点链接和外部链接。
链接还可以分为动态链接和静态链接。动态超链接指的是可以通过改变HTML代码来实现动态变化的链接，例如我们可以实现将鼠标移动到某个文字链接上，文字就会象动画一样动起来或改变颜色的效果，也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态链接，顾名思义，就是没有动态效果的链接。
与外部链接（即反向链接）相反，内部链接是指同一网站域名下的内容页面之间互相链接。如频道、栏目、终极内容页之间的链接，乃至站内关键词之间的Tag链接都可以归类为内部链接，因此内部链接我们也可以称之为站内链接，对内部链接的优化其实就是对网站的站内链接的优化。
HTML中的链接，正确的说法应该称作"锚点"，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。
外部链接，又常被称为：“反向链接”或“导入链接”，是指通过其他网站链接到你的网站的链接。
外部链接指的是针对搜索引擎，与其它站点所做的友情链接。高质量的外部链接指：和你的网站建立链接的网站知名度高，访问量大，同时相对的外部链接较少，有助于快速提升你的网站知名度和排名的其他网站的友情链接。
如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。
链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。
链接在交互上一般会呈现4种状态，即默认状态/悬停时状态/点击时状态/点击后状态。比如谷哥网站的交互体验。如下图：
点击前
悬停时，下面浮现半透明线条
点击时，有波纹晕开的动态效果
点击后，下面线条粗
有时候是3种状态，比如百度网和知乎应用：
默认状态
点击时链接变红
点击后链接变成紫色
IOS系统知乎应用的3种状态，而在Android系统没有用力点击这一状态。
默认状态
点击状态
用力点击会弹出预览小窗口
有些时候只有2种状态，如下图谷歌网：
默认和点击后状态一样
鼠标悬停时出现下划线
默认状态
点击时
而有时候比如在APP里有时候就一直只有一种状态，也可以称静态链接，之前的可以称之为动态链接。在不同的使用场景会因为当时的情况选择最合适的交互体验设计。有的情况下还会加上点击的音效，使用户体验更畅快，这在移动端用的使用情况多一些。
总之链接是网页不可缺少的构成部分，每一个链接的呈现都是经过深思熟虑的。
作者：潘瑶琼（简书作者）
本文由 @潘瑶琼 授权发布于人人都是产品经理，未经作者许可，禁止转载。
字是网页展示的重要内容之一，所以对文字的修饰也是CSS重点关注的一部分， CSS提供了以下常用的样式属性来修饰文字。
color 用来设置文字颜色。
设置方式支持以下几种格式
<style>
.box {
color: red;
}
</style>
<div class="box">文字颜色</div><style>
.box {
color: #ff0000;
}
.box1 {
color: #f00;
}
</style>
<div class="box">文字颜色</div>
<div class="box1">简写形式</div><style>
.box {
color: rgb(255, 0, 0);
}
</style>
<div class="box">文字颜色</div><style>
.box {
color: rgba(255, 0, 0, 0.5);
}
</style>
<div class="box">文字颜色</div>font-size 属性用来设置字体大小，单位通常为px 也可以为em,rem
单位的解释
<style>
.box {
font-size: 30px;
}
</style>
<div class="box">文字大小</div>设置字体的粗细程度，常用的属性有 normal 和 bold 两个值。
可以用以下值表示，也可以用数字表示。
值 | 意义 |
normal | 正常粗细，和400值相等 |
bold | 加粗，与700数值相等 |
lighter | 比 正常粗细还细， 不常用 |
bolder | 比 加粗还粗，不常用 |
100 200 300 400 500 600 700 800 900 | 使用数字定义字体粗细 |
inherit | 从父元素继承字体粗细 |
<style>
.box_normal {
font-weight: normal;
}
.box_bold {
font-weight: bold;
}
.box_lighter {
font-weight: lighter;
}
.box_bolder {
font-weight: bolder;
}
.box_number {
font-weight: 600;
}
</style>
<body>
<div class="box_normal">font-weight演示：正常粗细</div>
<div class="box_bold">font-weight演示，加粗</div>
<div class="box_lighter">font-weight演示，更细</div>
<div class="box_bolder">font-weight演示， 更粗</div>
<div class="box_number">font-weight演示， 数字</div>
</body>设置字体的倾斜程度
值 | 意义 |
normal | 正常字体， 不带倾斜效果 |
italic | 倾斜字体（常用，使用倾斜字体） |
oblique | 倾斜字体（用常规字体模拟倾斜，不常用） |
<style>
.box1 {
font-style: normal;
}
.box2 {
font-style: italic;
}
.box3 {
font-style: oblique;
}
</style>
<body>
<div class="box1">正常字体</div>
<div class="box2">倾斜字体</div>
<div class="box3">倾斜字体2</div>
</body>设置文本的修饰线的样式
示例 | 意义 |
none | 无线(a标签去除下划线会用到) |
underline; | 下划线 |
line-through; | 删除线 |
…等等 | 还有很多，可自行百度 |
<style>
.decoration-none {
text-decoration: none;
}
.decoration-underline {
text-decoration: underline;
}
.decoration-line-through {
text-decoration: line-through;
}
</style>
<body>
<div class="decoration-none">无线修饰</div>
<div class="decoration-underline">下划线</div>
<div class="decoration-line-through">删除线</div>
</body>指定使用的字体族，操作系统一般自带很多字体；
例如：window操作系统中的 ‘微软雅黑’ ，黑体等。
字体文件的格式有很多，比如 eot,woff2,woff,ttf,svg等。
font-family 可以一次指定多个字体， 后面的字体属于后备字体，只有前面的字体没有找到，才会使用后面的字体。
<style>
div {
font-family: serif, "Time New Roman", "微软雅黑"
}
</style>
<body>
<div>字体</div>
</body>自定义字体
某些时候，我们的字体比较个性化，或者我们的字体是一个图标字体（一种用符号表示图片的方式）。那么此时，需要我们使用 @font-face 自定义字体
自定义的字体一般是随着网页发布在服务器端，操作系统中并没有。
推荐一个比较好用的字体库网站：https://www.iconfont.cn/（具体使用方式请自行百度）。
全栈攻城狮-每日更新原创IT编程技术及日常实用视频。
主要内容：这是HTML课程的第四课，主要讲解HTML的文字标签和格式标签。在今天我们做一个属于自己的简历。
在上一节中主要讲解了HTML的标题标签（h1~h7）以及加粗、斜体、下划线、上下标等格式的标签。上节请戳→HTML电脑编程03 标题物理字体标签的使用，大学生学编程
HTML
font标签通过字面意思来看，就是字体的意思。是的这是一个用来显示文字的标签。不过值得说的是，这个文字可以通过属性的方式，指定颜色和字体大小。比如：
font标签的写法
效果：
font标签的显示效果
从书写的HTML代码可以看出，font标签包括两个参数：
color（字体的颜色）：颜色的值可以为英文，也可以为RGB数值。
size（字体的大小）：通过数字1~7可以控制字体的大小。
face（文字的显示字体）：这个属性可以设置显示的字体。如可以写为：face="楷体"
在HTML中包括两种颜色体系。一种就是直接写颜色的英文，如：red（红色）、blue（蓝色）、green（绿色）等。
不同颜色
另外一种颜色体系是RGB。由R（Red）、G（Green）、B（Blue）三种颜色组成。相信小时候很多人都知道两种不同的颜料，可以转换为不同的颜色。RGB就是通过红绿蓝不同的明暗程度。来表示所有的颜色的。
RGB
RGB中的每一个颜色都是以六位十六进制进行表示。数值越大颜色越深。如：000000表示黑色。FFFFFF表示白色。RGB的表示形式一般前面增加#号。
段落标签为p。会为里面的文字自动分段显示：
p标签自动分段
换行标签为br，这是个单标签。写法为：<br/>。
br标签的形式
效果：
换行标签的效果
默认情况下，HTML的文档排列形式为自上而下，自左而右。标签包括行级标签和块级标签。如果想要对块级标签进行换行，你就需要使用br标签。
下面是几个标签，大家直接Sublime中写入看一下效果哦。在以后就直接使用啦
居中预格式化标签
*请认真填写需求信息，我们会在24小时内与您取得联系。
