整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
们来先来分析一下这个案例。
标题容器左对齐，有固定的宽高。标题文字白色，水平垂直居中。
正文共四个段落，每个段落都有固定的宽度，右侧边界对齐。
前三个段落首行空两个字。每个段落里都有一段高亮的文本，有颜色和下划线修饰，也有文本斜体和加粗效果。
段落中的一些文字还有颜色、加粗、下划线以及倾斜等修饰效果。
第四个段落起始有个吉他图标，英文字体有外发光效果。
下面我们来制作这个网页。
创建 007-css-case-1 文件夹，在文件里创建一个 case-text-fonts.html 页面文件和 case-1.css 样式文件。
在 html 文件内创建基础代码，在 head 标签内部引入外部样式 case-1.css。
首先来制作标题。
添加一个 h1 元素，填入标题文本。
在编写标题样式之前，假设 UI 设计师给你的是一篇文章的图片，你可能就犯难了，如何获得标题的宽高、背景颜色和文字大小呢？
大家打开电脑里的QQ，登录进去，Mac电脑按下键盘 Control + Command + A，Windows电脑按下ctrl+alt+a，圈选页面标题，点击对号按钮，完成截屏。
在浏览器中输入 ps.gaoding.com，打开在线版 PS。点击文件，新建，再点击创建按钮。最后，Control + V，将截屏的图片粘贴过来。
应用选框工具，发现标题选区的宽度和高度分别为 200 和 50 像素，文字的大小为 24 像素。
应用吸管工具，点击标题框吸取背景色，点击前景色按钮，得到十六进制颜色值 #a52a2a。
有了这三个值，就可以定义标题的样式了。
h1 {
width: 200px;
height: 50px;
background-color: #a52a2a;
color: white;
line-height: 50px;
font-size: 24px;
text-align: center;
}定义 h1 选择器，声明样式 width: 200px，height: 50px，background-color: #a52a2a，color: white，font-size: 24px,text-align:center
在浏览器中查看页面，标题的效果基本上都实现了。接下来完成文本的垂直居中对齐。
可以通过给文本声明 line-height 行高属性，来间接实现文本的垂直居中，那行高的值设置为多少呢？根据前面学习的行高知识，将行高的值设置为 50px，也就是文本所在容器的高度。这样，文本在容器中恰好就垂直居中了。
接下来制作四个段落。
在 HTML里添加四个 p 元素，填入一些文本。下面给这些段落添加样式。
p {
width: 500px;
text-indent: 2em;
text-align: justify;
word-spacing: 10px;
text-transform: capitalize;
line-height: 28px;
}定义 p 选择器，声明样式：width: 500px，让每一个段落都有固定的宽度。text-indent: 2em，每个段首空两格。text-align: justify，实现段落右侧边界对齐。给最后一段英文添加样式：word-spacing: 10px，添加单词间距。text-transform: capitalize，每个单词首字母大写。最后再添加 line-height: 28px，给段落设置一个行间距。
四个段落基本上制作完毕了。接下来装饰个别段落和文字。
分别使用三个 span 元素将这三部分文字包裹起来。给第一个和第三个 span 元素定义 class 属性，值为 mark1。(第一个段落里面的带有下滑划线区域,和第三个段落中的下划线区域)
在CSS中定义 mark1 选择器，声明样式 color: red，text-decoration-line: underline，text-decoration-style: double。
我们看，这两部分文本被红色、双下划线修饰了。
实际效果第三部分文本还带有一个波浪线。需要再定义一个样式覆盖一下。
给这个 span 的样式类再添加一个 mark2。
定义选择器 mark2，声明样式 text-decoration-style: wavy。
效果实现了。
给第二个 span 添加 class 属性，值为 mark3。
定义选择器 mark3，声明样式 color: orange。
第二部分文本变成了橙色。
案例还要求这两部分文字为倾斜效果。使用 span 元素把他们包裹起来，定义 class 等于 mark4。
定义选择器 mark4，声明样式 font-style: italic。
文本倾斜效果实现了。
实际上，千锋全部学科的名称和被特殊修饰的文本都有加粗效果，给全部学科再添加一个 span元素包裹在外层。给所有需要加粗的 span 都添加 mark0 样式类名。
定义选择器 mark0，声明样式 font-weight: bold。
文本加粗效果实现了。
.mark0 {
font-weight:bold
}
.mark1 {
color: red;
text-decoration-line: underline;
text-decoration-style: double;
}
.mark2 {
text-decoration-style: wavy;
}
.mark3 {
color:orange;
}
.mark4 {
font-style: italic;
}最后，给英文段落定义特殊字体并添加外发光的效果。
.p1 {
font-family: "Sofia", sans-serif;
text-indent: 0;
}在 head 里添加引用谷歌字体的 css 链接，和自定义 icon 图标的 js 地址。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=outline">
<script src="https://kit.fontawesome.com/772ccfd500.js" crossorigin="anonymous"></script>
给英文的段落元素定义 class 属性，值为 p1 font-effect-outline。
添加 p1 选择器，声明样式：font-family: "Sofia", sans-serif。
字体效果实现了！在段首还有一个 icon 图标。
如何查找自己心仪的图标呢？大家可以访问 fontawesome 官网这个地址，海量图标就任你选择了。guitar 就在这里。 （https://fontawesome.com/search?p=2&favorites=staff）
在段落头部添加 i 元素，定义 class属性，值为 fas fa-guitar。 （注意中间有空格）。
我们发现，真正使用这个图标时，样式类的值，要求在官网查找到的图标名字前，加上 fa- (读作：fa杠)，并且还需要添加 fas。
图标添加好了！实际的效果，最后一行没有缩进。
在 .p1 (注意这里有点) 选择器里添加 text-indent: 0，来覆盖 p 元素的样式。
为什么能覆盖呢？答对了，因为作用的优先级—— class 选择器要大于元素选择器。
这样，就取消了最后一行的段首缩进！
文章配套视频链接：https://www.bilibili.com/video/BV1oU4y1278g?p=68
家好，我是 Echa。
今天来分享 50 个超实用的 Chrome 浏览器扩展！
JSON Viewer Pro 用于可视化JSON文件。其核心功能包括：
输入界面如下：
格式化之后：
JSONVue 是一个JSON数据查看器，主要用来格式化JSON数据：
Library Sniffer 是一款给开发者使用的工具，能够探测当前网页所使用的类库、框架和服务器环境，为开发者提供了方便。
Wappalyzer 扩展可以用来识别网站背后的底层技术。通过此扩展，可以了解特定应用程序是否是用 React、Vue、Angular、PHP等编写的。还可以访问有关 Web 服务器、编程语言、框架、内容管理系统、分析的信息工具、数据库等。
WhatRuns 扩展程序只需单击一下即可找到任何网站上使用的技术。
使用PerfectPixel插件可以将设计图加载至网页中，与已成型的网页进行重叠对比，以帮助开发和设计人员规范网页像素精度。这是一款可以优化前端页面显示的Chrome插件。
可以使用此扩展程序快速清除缓存，无需任何确认对话框、弹出窗口等。可以在选项页面上自定义要清除的数据和数量，包括：应用程序缓存、缓存、Cookie、下载、文件系统、表单数据、历史记录、索引数据库、本地存储、插件数据、密码和 WebSQL。
VisBug 是一个使用 JavaScript 构建的开源网页设计调试工具，它可以让用户使用点击式和拖放式界面来查看网站的元素。
Debug CSS 是一个帮助调试CSS的插件。他可以显示出页面元素的轮播，按住Ctrl，并将鼠标悬浮在元素上，即可查看其信息：
CSS Viewer 是一款适用于 Web 开发人员的高效 Chrome 扩展。顾名思义，CSS 查看器可以显示将鼠标悬停在任何网页上的元素的 CSS 属性。
EditThisCookie 是一个 cookie 管理器。可以添加，删除，编辑，搜索，锁定和屏蔽cookies。
React Developer Tools 是开源 JavaScript 库 React 的 Chrome DevTools 扩展。它允许我们在 Chrome 开发者工具中检查 React 组件层次结构。安装此插件之后，将在 Chrome DevTools 中获得两个新选项卡："?? Components" 和 "?? Profiler"：
Vue.js devtools 是一款基于chrome浏览器的用于调试Vue.js应用程序的插件，可以使得开发人员大大提高调试效率。支持用户对DOM结构数据结构进行解析和调试功能。
Augury 可以帮助开发人员在 Google Chrome 浏览器中调试和分析 Angular 应用程序。
Firebug Lite是火狐浏览器中著名的开发者工具firebug插件移植到Chrome中的插件，在Chrome中安装了Firebug Lite插件以后，开发人员可以像在火狐浏览器中使用firebug一样熟悉的方式来调试网页内容，其包含了基本的HTML、CSS以及Javascript的调试功能，用于帮助网页前端开发工程师快速地调试网页，以便及时地找到网页中的BUG并及时修复。
HTML Validator 在 Chrome 的开发者工具中添加了 HTML Validator。HTML 页面的错误数通过浏览器状态栏中的图标显示，详细信息可以在浏览器的开发者工具中查看。
Web Developer 扩展为带有各种 Web 开发工具的浏览器添加了一个工具栏按钮。该扩展适用于 Chrome 和 Firefox，并且可以在这些浏览器支持的任何平台上运行，包括 Windows、macOS 和 Linux。
Requestly 是一款Chrome和Firefox浏览器插件，提供URL转发、修改HTTP请求和结果、插入脚本等功能。
Window Resizer 主要用来调整浏览器窗口的大小以模拟各种屏幕分辨率。
Responsive Viewer 是在一个视图中显示多个屏幕的 Chrome 扩展程序。该扩展将帮助前端开发人员在开发响应式网站/应用程序时测试多个屏幕。
此插件允许直接从浏览器发送跨域请求，而不会收到跨域错误。可以使用此插件覆盖 Request Origin 标头，并将 Access-Control-Allow-Origin 设置为 *.
ColorPick Eyedropper 是一个放大的吸管和颜色选择器工具，可让从网页等中选择颜色值。
CSS Peeper 用于检查和复制元素样式的优秀工具，使用 CSSPeeper 可以将鼠标悬停在网页中的任何元素上，然后单击鼠标即可复制元素的样式。
24. Dimensions
Dimensions是一款能帮助使用者对网页上各种元素属性之间的距离进行测量的Chrome页面元素测量插件，该插件在点击启动插件图标后，可以对页面中图像、输入字段、按钮以及视频等页面元素之间上下左右的方位尺寸进行测量，同时还可以通过使用快捷键来快速启用或关闭该插件的功能，简单实用。
Site Palette 用于生成调色板。设计师和前端开发人员必备的工具。可以通过这款插件轻松获取网站的配色方案。
ColorZilla 是一款功能强大地提取网页色彩的工具；也是个快速的对颜色进行调节的Chrome插件，许多的用户将这款软件称呼为颜色吸取插件，它提取的颜色是非常的多样化，还可生产css颜色的代码等。
当我们想查看网页中文字的字体时，最常用的方法就是在控制台查看文字的字体样式。那还有没有更简单的方法呢？WhatFont 就是一个查看网页字体的Chrome扩展。只需要的点击扩展图标，再点需要查看为文字即可：
Fonts Ninja 可以从任何网站识别字体、添加书签、试用并购买它们。
使用 BrowserStack 快速启动扩展在任何浏览器中启动一个新的测试会话。最多可设置 12 个浏览器以实现快速访问并最大限度地减少切换浏览器所花费的时间。
Toby 是一款 Chrome 新标签页工具，能够将未读的标签页分组显示在新标签页中，这样就能把所有未看完的标签页都关闭了。分组相当于多个 Chrome 窗口，将你的标签页都拖进 Toby 中，就不需要实时开着占地方了。
该扩展提供了每日热门开发者新闻，不需要再浪费时间搜索高质量的文章了。
Momentum 拥有漂亮的新标签页面，每日更新精彩背景壁纸图片，可设置每日新鲜事焦点以及跟踪待办事项，无广告，无弹窗。
The Great Suspender 是一个轻量级的扩展用来减少 Chrome 的内存占用。如果同时打开许多选项卡，在可配置的时间之后未查看的选项卡将在后台自动挂起，从而释放该选项卡消耗的内存和 CPU。
Session Buddy是一个可以帮助用户查看、新增、编辑当前网站Session状态的Chrome插件。用户可以利用该插件保存网站当前的状态以便在关闭Chrome或关闭计算机后恢复，从而达到节省内存的作用。
Octotree 旨在让 GitHub 体验更好。通常，为了检查 Github 中的子文件夹，需要手动单击文件夹并导航。Octotree 扩展解决了这个问题。此扩展在项目的左侧显示存储库的目录结构，这有助于更好地理解文件夹结构。
1_EKF88oqIyX6FzgueCKdtXg.gif
File Icons for GitHub and GitLab 可以将 GitHub 和 GitLab 上的原始文件图标替换为特定文件类型的图标。
ax DevTools 是一个快速、轻量级但功能强大的测试工具，由 Deque 开发的世界上最值得信赖的可访问性测试引擎 axe-core 驱动。使用 ax DevTools 在网站开发过程中查找并修复更多可访问性问题。
OctoLinker 可以将特定语言的语句（如 include、require 或 import）转换为链接。当打开一个包含多个导入语句的文件并且想要快速打开它时，只需将鼠标悬停在链接的文件上并单击即可打开。
此扩展可帮助 Web 开发人员分析网页是否违反最佳实践。
Check My Links 是一个链接检查器，它可以抓取网页并查找损坏的链接。
Checkbot 是用于验证一组HTML页面上的链接的工具。Checkbot可以检查一个或多个服务器上的单个文档或一组文档。它会创建一个报告，该报告汇总了引起某种警告或错误的所有链接。
Google Page Speed Insighs 是一款旨在优化所有设备上的网页、提高网页加载速度的工具。
META SEO inspector是一款可以帮助用户分析网页的meta信息并得到SEO评估的谷歌浏览器插件。
Ghostery 是强大的隐私保护扩展程序。其主要有以下功能：
AdBlock 用来在YouTube、Facebook、Twitch和其他你喜爱的网站上拦截广告和弹窗。
番茄工作法（Pomodoro?）时间管理助理。? 长短两种休息时间 ? 带有倒计时显示的工具栏图标 ? 追踪Pomodoro历史和统计讯息 ? 可配置的长休间隔 ? 可配置的定时器时长 ? 桌面与新标签页通知 ? 超过20种音效可选的声音通知 ? 计时器秒针走动音效
Loom 可以用来快速录制视频，并且能够将录制的视频上传到指定的网页中，Loom还支持在用户点击启动插件时，立即捕捉屏幕图像，同时开始视频录制操作，还可以将录制好的视频复制到粘贴板中存储。
GoFullPage 是一款全屏截图插件（整个网页截图），完整捕获您当前页面的屏幕，进行滚动截图，而无需任何额外的权限。单击扩展程序图标，然后将其传输到屏幕快照的新标签页中，可以在其中将其下载为图像或PDF，甚至只需拖动即可，保存到桌面。
BetterViewer 可以提供更好的图像查看体验，旨在替代基于 Chrome 浏览器中内置的图像查看模式。使用时，只需在页面右键点击图片，选择“在新标签页中打开图片”即可。
svg-grabber 是一个快速预览并从网站获取所有 svg 的工具。可以用来预览、下载和复制网站中所有 SVG 图标和插图的代码。
天设计达人网小编为大家分享的是Material Design图标字体版，有了这个Web端上使用图标就更加方便了。
除了多出图标字体素材外 ，还推荐了图标下载专题页，用户可以通过这个页面对图标单个下载，包括SVG、PNG、图标字体，相当方便。
1. 打开Material icons下载页
2. 选择要下载的图标 （目前不能多选>_<）
3.选择要下载的格式即可
【方法一】
STEP 1: 引入字体文件和样式文件，下面这个是直接引用google的字体托管文件，如果国内使用建议不要用托管的，会访问慢，把字体下载到自己的服务器上，详细看【方法二】
<link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”>
STEP 2: HTML代码，在HTML标签上加入class=”material-icons”以及写上图标名称即可，如下：
<i class=”material-icons”>face</i>
【方法二】
如果你不想使用Google托管的CSS文件和图标字体，可以下载到本地。
STEP 1: 下载字体文件到本地
STEP 2 : 为你的CSS引入字体
@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'), url(https://example.com/MaterialIcons-Regular.woff) format('woff'), url(https://example.com/MaterialIcons-Regular.ttf) format('truetype'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } STEP 3: HTML代码
*请认真填写需求信息，我们会在24小时内与您取得联系。
