整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
篇文章主要介绍了CSS样式更改篇中的字体设置Font&边框Border设置，这篇文章分享列表、表格和轮廓，一起来看看吧。
<ul style='list-style-type:square'><li></li></ul>
none 无标记
disc 实心圆
circle 空心圆
square 实心方块
decimal 数字
none 无<ul><li style='list-style-image:url(1.png)'></li></ul><ul><li style='list-style-position:inside'></li></ul>
inside 列表项目标记放置在文本以内
outside 列表项目标记放置在文本以外这三者属性可以放在list-style中统一设置。
table
{
border-collapse:collapse
}
separate 边框会被分开
collapse 边框合并为一个单一的边框设置水平对齐方式，比如左对齐、右对齐或者居中
td
{
text-align:right
}
设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐
td
{
vertical-align:bottom
}table
{
border-spacing:10px 50px
}
可以使用像素，不允许负值。
如果定义一个length 参数，那么定义的是水平和垂直间距
如果定义两个length 参数，那么第一个设置水平间距，而第二个设置垂直间距caption
{
caption-side:bottom
}
top 表格标题定位在表格之上
bottom 表格标题定位在表格之下table
{
empty-cells:hide
}
hide 不在空单元格周围绘制边框
show 在空单元格周围绘制边框table
{
table-layout:fixed;
}
automatic 列宽度由单元格内容设定
fixed 列宽由表格宽度和列宽度设定div
{
outline-color:red
}div
{
outline-style:dotted
}
和边框的风格是一样的div
{
outline-width:1px
}这篇文章主要介绍了CSS样式更改篇中的列表、表格和轮廓，希望让大家对CSS选择器有个简单的认识和了解。
****看完本文有收获？请转发分享给更多的人****
IT共享之家
想要学习更多，请前往Python爬虫与数据挖掘专用网站：http://pdcfighting.com/
家好，我是 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 图标和插图的代码。
样的地方，同样的时间，又跟大家见面了。
很多人问我，前端开发入门怎么开始？这里呢，先看下我之前发的文章有大体的概括思路跟流程在里面。今天主要分享入门第一篇： HTML。
由于时间有限，空间有限，关于HTML历史我就不唠叨了，大家去w3c，菜鸟教程都可以查看的到，我主要是跟大家讲讲怎么快速理解并且掌握HTML。在文章最后我会给出总体轮廓图，让大家看完能够清晰的带着思路收藏起来。
一样的老规矩，列出熟悉的流程：
1.HTML是什么
2.它跟浏览器有着什么样的关系
3.HTML在工作中常用的东西是哪些
这四个流程讲下来，你就知道我们打开的网页原来就是这个样子。
继续，长篇大论我就不讲了，感觉有点虚，直接进入主题关键是“懂”。那么首先第一步，HTML是什么？
这样理解吧，我们可以把浏览器，屏幕当成一张A4纸，你在纸上面写个人奖励，有头有尾，还有中心，那么网页也是一样，它也有头，有尾，组合在一起的。我们只不过换了个地方，换了种方法在写东西而已。这样在你的大脑里，HTML就相当于是A4纸了，正如HTML的定义也是相当如此，即：它是超文本标记语言（相当于可以理解为很高级的A4纸）。带着这种理解去开HTML的定义，你肯定收获很大，比起你脑袋一片空白去看代码要事半功倍的多。
第二点，这个HTML跟浏览器是怎么配合的？我们可以简单理解为，你的A4纸，写出来的东西，得让人看的懂吧，别人在看的时候是不是在分析你的文字或者图片。那么同样的，浏览器它作用于帮助大家把代买看懂，然后用大家看的懂得形式展现出来。起到一个解析你的HTML作用。那么总结下来就是你写的HTML，浏览器帮助你解析展现给大家。
到这里，说了这么多，一个代买没见着？笑话，这怎么分享啊！ 不，我觉得大家先大脑有个概念，这样下面的代码就几分钟理解透彻。
好了，小二，来份HTML！ 。。。好嘞客观稍等片刻。。。热腾腾的HTML上来了
菜名：HTML
这是一个标准的HTML5文档（不要怕，其实还是HTML，只是版本不同而已，不要想的太复杂），我们来用A4纸的例子解释下。首先第一行，文本类型HTML的意思，直接翻译就好，因为浏览器不只会读懂HTML，还会有其他的。第二行是这个文档解析标准英文。第三行head的意思就是头咯，那么这就是文档的头，相当于A4纸的title，里面有meta告诉浏览器用的，说我是中文，不要给我解析成什么俄罗斯语言。。。继续下面body，身子的意思，A4纸正文的意思。
为什么我不跟大家先说这些是标签呢？--因为，个人认为，先知道这些代表什么，然后再知道怎么组装他们更适合理解。
那么看完上面现在跟大家讲：标签是什么，其实理解简单点就是组合HTML的规则，比如这个标准的HTML文档，你要组合它，你的按规则来，不能乱写。那么组合方法是什么，其实呀，用HTML规定的东西拼接起来，HTML规定标签有两种，单标签跟双标签，单的就是上面的meta，双的就是head，成双成对出现的就是双的，单个出现的就是单的。这还不好理解呀，那么问题来了，有多少标签？ 网上搜索你就知道了，带着这样的理解思路，一看就懂咯。
现在回到流程第三步，最常用的在开发过程中的有哪些除了上面标准的格式。
以上就是最常用的了，仔细看可以看到有单标签，有双标签。这些标签组合上HTML标准格式，就是我们看到的网页了。
那么，有人就问了，我该怎么写呢？不急，继续往下看。
仔细重回上面看，可以看到body里面什么也没有，这里就是你可以写常用标签的地方，网页标签组合的规则是：由外到内。也就是说它们存在包含关系，比如：一个框框里面有文字
div就是框，就是拼接的砖块，它包含着你想表达的东西。那么，整个网页外层就是一个大大的div框，里面包含了文字，图片，选择框等等我们看到的东西。
理解方法思路大概就是这个样子，这些里面还有数多标签，大家可以去网上查查，然后这样去理解，基本一看就懂了。哦？原来网页就是这个样子。。。下面是我画的一张大体图片。
用HTML解释下上图（基本简单的网站模型），这个外面粉色的框是个大的DIV，包含了里面的头部，轮播图，还有三块内容．头部也是一个DIV块，里面包含了我们可以选择进入的导航。轮播图也是一个DIV，包含了我们看到的图片。下面三块内容也是一个DIV，包含了三块内容，三块内容分别又有DIV包含着。这下明白了，从最外层包含到最内层，就是前面讲的：由外到内。这样整个的结构清晰了，大家再去看些资料，就OK了。HTML文档其实就这么简单，没有逻辑成分，只要找到理解技巧，看下就会了，比起看几个小时的视频而且还很多的专业名词去理解要来的轻松些。
那么这些砖砖瓦瓦都砌上了，怎么把它们放到理想的位置上呢？其实呀，就是下一篇将要分享的CSS在搞的鬼！
*请认真填写需求信息，我们会在24小时内与您取得联系。
