最近我想稍微改变一下这个网站，我想在里面放一个工具提示。 这很简单，但我希望工具提示上有一个三角形箭头。 然而，当你认为你需要使用图片，并且你必须设计无数种各种颜色和方向的箭头时，这几乎是一场灾难。幸运的是，MooTools 核心开发人员 Darren Waddell 告诉我一个伟大的
使用纯CSS，只需要很少的代码就可以创建兼容各种浏览器的三角箭头！
CSS代码
复制代码
代码如下所示：
/* 创建一个向上的箭头 */
分区向上箭头{
宽度：0；
高度：0；
左边框：5px实心透明； /* 向左箭头倾斜 */
右边框：5px实心透明； /* 右箭头倾斜 */
底部边框：5px 实线#2f2f2f； /* 底部，在这里添加背景颜色 */
字体大小：0；
行高：0；
/* 创建一个向下的箭头 */
分区向下箭头 {
宽度：0；
高度：0；
左边框：5px实心透明；
右边框：5px实心透明；
顶部边框：5px 实线#2f2f2f；
字体大小：0；
行高：0；
/* 创建一个指向左的箭头 */
分区向左箭头 {
宽度：0；
高度：0；
border-bottom：5px实心透明； /* 向左箭头倾斜 */
顶部边框：5px实心透明； /* 右箭头倾斜 */
右边框：5px 实线#2f2f2f； /* 底部，在这里添加背景颜色 */
字体大小：0；
行高：0；
/* 创建一个指向右侧的箭头 */
分区向右箭头 {
宽度：0；
高度：0；
border-bottom：5px实心透明； /* 向左箭头倾斜 */
顶部边框：5px实心透明； /* 右箭头倾斜 */
左边框：5px 实线#2f2f2f； /* 底部，在这里添加背景颜色 */
字体大小：0；
行高：0；
绘制这种三角形的关键是在箭头方向的两侧都有粗边框。 远离箭头的一侧也是相同的粗边框，并且该侧的颜色是三角形的颜色。 边框越粗，三角形就越大。 通过这些技术，您可以绘制各种颜色、大小和方向的箭头。 最重要的是，您只需要几行 CSS 代码即可实现这些效果。
使用 :before 和 :after 绘制 CSS 三角形的轮廓
上面的CSS例子使用了真实的页面元素来勾勒css 箭头，但是有时候这个真实的元素还有其他用途，你无法进去直接操作它。 我应该怎么办？ 纯CSS三角形也可以使用伪元素（pseudo-element）来进行素描。 绘制方法如下：
复制代码
代码如下所示：
分区工具提示{
/* 此处的工具提示内容样式； 与箭头无关*/
/* 之前和之后共享 */
div.tooltip：之前，div.tooltip：之后{
内容： ' ';
高度：0；
位置：绝对；
宽度：0；
边框：10px实心透明； /* 箭头大小 */
/* 这些箭头将指向上方 */
/* 顶部堆叠css 箭头，较小的箭头 */
分区工具提示：之前{
边框底部颜色：#fff； /* 箭头颜色 */
/* 定位 */
位置：绝对；
顶部：-19px；
左：255 像素；
z 索引：2；
/* 充当背景阴影的箭头 */
分区工具提示：{ 之后
边框底部颜色：#333； /* 箭头颜色 */
/* 定位 */
位置：绝对；
顶部：-24px；
左：255 像素；
z 索引：1；
远离箭头的左边框的颜色是三角形箭头的颜色。 您不需要同时使用 :before 和 :after 伪元素来绘制箭头——一个就足够了。 另一种，您可以将其用作前一种的背景阴影或背景边缘。
应该早点知道这些技术！ 我相信这些简单且无麻烦的技术在将来进行界面改进时会派上用场
有时需要在网页中添加在线测试功能，例如在线调查、在线测试各种知识等应用，这需要大量的前端技能。 今天给大家分享一个基于jQuery的后端应用——测试答题功能。
超文本标记语言
首先加载jquery库文件和quiz.js以及所需的CSS样式文件styles.css。
复制代码
代码如下所示：
然后在需要放置试题的地方添加div#quiz-container。
复制代码
代码如下所示：
jQuery
首先，我们定义问题和答案选项，其中question为问题，answers为答案选项， CorrectAnswer为正确答案。 可以看到，定义的init是json数据格式。
复制代码
代码如下所示：
var init={'questions':[{'question':'什么是 jQuery？','answers':['JavaScript 库','CSS 库','PHP 框架','以上都不是'],' CorrectAnswer ':1},{'question':'找到不同的项目？','answers':['desk','sofa','TV','tablecloth'],' CorrectAnswer':3}, {' Question':'陆地面积最大的国家是：','answers':['美国','中国','俄罗斯','加拿大'],' CorrectAnswer':3},{'question': ' 月球距离月球有多远？','answers':['18万公里','38万公里','100万公里','180万公里'],' CorrectAnswer':2}]};
接下来我们直接调用quiz.js提供的插件方法，然后打开页面看看页面上是否已经生成了在线测试项目。
复制代码
代码如下所示：
$(函数(){
$('#quiz-container').jquizzy({
问题：init.questions
});
});
然后，要更改自定义测试问题的样式和布局，您可以在 quiz.js 和 styles.css 文件中进行适当的更改。
怀疑
此时，细心的同学就会发现问题来了：
1、直接在js代码中标记问题的正确答案不安全吗？ 正式测试题的答案是否应该在后台进行判断，以免有人查看源码直接得到正确答案。
2.如何与后台交互？ 例如，答题前验证身份，答题后将结果发送至后台。
我想说的是，这是一个后端代码演示项目，真正的应用答案不会出现在后端代码中； 虽然测验。 详细介绍
1.什么是字体
字体是文字的外在形式、文字的风格、文字的外衣。 例如隶书、楷书、草书都是字体的一种。 同一个字，每个人写出来的字都是不一样的。 可以说，每个人都有一套潜在的字体库。 对于网页来说，字体是计算机上存储的一组文本显示方式。 通过对文本做一些特殊的处理（如终端强化），提高文本在不同环境下的可读性。
例如，相同大小的文本在不同字体下的可读性不同。
一般来说，一个字库的诞生需要经过字体设计师的创意设计、字体制作人员的一一制作和修改、技术开发人员对字符进行编码、添加程序指令、安装字库、程序开发安装，测试人员校对字体、软件测试、兼容性测试，制作部门进行字体的最终产品化、包装等几个环节。 一般情况下，文本与字体库之间是一对多的关系，因此对于多语言支持的网页，要求设计者在选择字体时不能只考虑一种语言的情况。
2. 字体系列
大多数关于font-family的介绍只是表明他可以设置字体名称在文本中的顺序。 事实上，font-family的真正作用是按照优先级顺序形成一系列相似字体的列表，浏览器从第一项开始搜索，以找到第一个可用的字体来显示文本。
字体系列：Times New Roman、“open-sans”、“young round”、sans-serif
当浏览器显示一个字符时，它会首先从 Times New Roman 中查找该字符，如果找到，就会以 Times New Roman 字体显示该字符。 如果没有找到，可以去open-sans中查找。 如果找到，请使用该字体来显示该字符。 框架）。
时间就是金钱 时间就是金钱。
比如前面的代码中，对于某些汉字，浏览器会先在Times New Roman中搜索，但是找不到，然后在open-sans中搜索，还是找不到，继续在“Youyuan”中搜索，你可以在友源中找到，如果找到对应的字符，就会用这个字体显示。 对于英文部分，可以在Times New Roman中找到，并且会以这种字体显示。
在 font-family 中，字体有时会添加冒号，有时则不会。 区别在于字体名称中空格的处理方式不同。 当不添加冒号时，字体左右两端的空白字符将被忽略，并且单词之间的空白字符被解释为单个空白字符。 例如，字体系列：Times New Roman、sans-serif。 解释为字体系列：Times New Roman、sans-serif。 添加冒号时，需要保留冒号内的所有空格。 例如，字体系列：“Times New Roman”、无衬线字体。 浏览器将查找字体“Times New Roman”。
3.通用字体家族
w3c建议在定义字体时以类别结尾，例如sans-serif，以保证网页在不同操作系统下都能正确显示。 常见的字体系列有 serif（衬线字体）和 sans-serif（无衬线字体）。 可以简单理解为当所有字体都无效时，浏览器从字体族中选择一种字体进行显示。
一个字体家族代表了多种具有一定特征的字体，字体家族中字体的选择完全由浏览器决定。 设计者给出的字体应该尽可能覆盖所有系统，而不应该依赖于字体家族。 字体系列必须放置在 font-family 的最后一个位置。
serif 衬线字体，通常指使用末端强化原理的字体，通过在文本末尾添加小的变化来改变大文本的可读性。
以上字体均为衬线字体，并且在文本末尾使用衬线。 辰贤字体可读性较高，通常用于报纸、书籍等以大文字为表现形式的作品中。 常见的衬线字体有Georgia、Garamond、Times New Roman、Chinese HeiTi等。
sans-serif 无衬线字体，除了衬线字体之外的所有字体都成为无衬线字体。 无衬线字体的腰线比较均匀，通常多用于艺术字和标题中。
由于无衬线字体的条带比较均匀，因此在大文本中它们的可读性不如衬线字体。 常见的无衬线字体有Trebuchet MS、Tahoma、Verdana、Arial、Helvetica、中文有源、隶书等。
综上所述，衬线字体适合大文本的显示。 如果使用非衬线字体，必须保证font-size足够大，以保证文本内容的可读性。 11px以下的英文建议使用衬线字体。 对于英文来说，无论如何不建议在11px以下显示。
4.@font-face
@font-face是链接服务器上字体的一种形式，就像制定图片链接一样，浏览器会根据这个指令下载相应的字体到本地缓存，并用它来修改文本。
: 字体名称
：该值指的是你自定义字体的存储路径，可以是相对路径，也可以是绝对路径
：这个值指的是你自定义字体的格式，主要是用来帮助浏览器识别的。 其取值主要包括以下类型：truetype、opentype、Web Open Font Format、embedded-opentype、svg等。
：定义字体的相关样式，符合该样式设置的文本将以该字体显示。
truetype (.ttf) 和 opentype (.otf) 格式在大多数浏览器上都可以正常工作。 Web 开放字体格式 (.woff) 是 Web 字体中最好的格式。 它是TrueType/OpenType的开放压缩版本，还支持元数据包的分离。 Embedded Open Type (.eot) 是 IE 的私有字体格式。 svg (.svg) 字体是一种基于 SVG 字体渲染的格式。 下表列出了此格式的浏览器兼容性。
CSS 代码将内容复制到剪贴板
》关注后端开发社区，回复“1”加入后端技术交流群，回复“2”免费发放500G后端干货！
来源 |
CSS居中是前端工程师经常面临的问题，也是基本功之一。 今天有时间整理整理CSS居中方案。 目前有水平居中、垂直居中、水平垂直居中等15种方案。 如有遗漏，会陆续补充。 可以算是一个备忘录。
1.水平居中 01.行内元素水平居中
使用 text-align: center 实现块级元素内行内元素的水平居中。 该方法对于内联元素（inline）、内联块（inline-block）、内联表（inline-table）和内联-flex元素的水平居中有效。
演示代码：
<html><head><meta charset="utf-8"><title>42度空间-内联元素水平居中-测试1</title><style>div {height:60px;border: 2px dashed #f69c55;}.center-text {text-align: center;}</style></head><body><div class="center-text">简单是稳定的前提。</div></body></html>
02.块级元素水平居中
通过将固定长度块级元素的 margin-left 和 margin-right 设置为 auto，可以使块级元素水平居中。
演示代码：
<html><head> <meta charset="utf-8"> <title>42度空间-块级元素水平居中</title> <style> div { height:100px; border: 2px dashed #f69c55; } .center-block { margin: 0 auto; width: 8rem; padding:1rem; color:#fff; background:#000; }</style></head><body><div> <p class="center-block"> 简单不先于复杂，而是在复杂之后。 </p></div></body></html>03.多块级元素水平居中。 使用内联块。 如果一行中有两个或两个以上块级元素，则设置块级元素的显示类型为inline-block，并设置父容器的text-align属性，使Multi-block元素水平居中。
演示代码：
<html><head><meta charset="utf-8"><title>42度空间-多块级元素水平居中-inline-block</title><style>.container {height:100px;padding: 8px;text-align: center;border: 2px dashed #f69c55;}.inline-block {padding: 8px;width: 4rem;margin: 0 8px;color: #fff;background: #000;display: inline-block;}</style></head><body><div class="container"><div class="inline-block">简单不先于复杂</div><div class="inline-block">而是在复杂之后</div><div class="inline-block">简单不先于复杂，而是在复杂之后。</div></div></body></html>
04.多块级别元素水平居中，使用display:flex
使用弹性布局（flex）实现水平居中，其中justify-content用于设置弹性包元素在主轴（横轴）方向的对齐方式。 在本例中，子元素设置为水平居中显示。
演示代码：
<html><head><meta charset="utf-8"><title>42度空间-多块级元素水平居中-弹性布局</title><style>.flex-center {padding: 8px;display: flex;justify-content: center;border: 2px dashed #f69c55;}.flex-center >div {padding: 8px;width: 4rem;margin: 0 8px;color: #fff;background: #000;}</style></head><body><div class="flex-center"><div>简单不先于复杂。</div><div>简单不先于复杂，而是在复杂之后。</div><div>而是在复杂之后。</div></div></body></html>
2. 垂直居中 05. 单行内联（inline-）元素垂直居中
通过将内联元素的高度设置为等于列的行高，使元素垂直居中。
演示代码：
<html><head><meta charset="utf-8"><title>42度空间-单行内联元素垂直居中-line-height</title><style>#box {height: 120px;line-height: 120px;border: 2px dashed #f69c55;}</style></head><body><div id="box">软件在能够复用前必须先能用。</div></body></html>
06.多行元素垂直居中，使用表格布局（table）
使用垂直对齐：表格布局的中间来实现子元素的垂直居中。
演示代码：
<html><head><meta charset="utf-8"><title>42度空间-多行内联元素垂直居中-table</title><style>.center-table {display: table;height: 140px;border: 2px dashed #f69c55;}.v-cell {display: table-cell;vertical-align: middle;}</style></head><body><div class="center-table"><p class="v-cell">The more technology you learn, the more you realize how little you know.</p></div></body></html>
07.多行元素垂直居中css中居中，使用弹性布局（flex）
使用flex布局实现垂直居中，其中flex-direction:column定义主轴方向为水平。 由于flex布局是在CSS3中定义的，因此在旧浏览器中存在兼容性问题。
演示代码：
<html><head><meta charset="utf-8"><title>42度空间-多行内联元素垂直居中-flex</title><style>.center-flex {height: 140px;display: flex;flex-direction: column;justify-content: center;border: 2px dashed #f69c55;}</style></head><body><div class="center-flex"><p>Dance like nobody is watching, code like everybody is.</p></div></body></html>
08.多行元素垂直居中，使用“精神元素”
利用“幽灵元素”技术实现垂直居中，即在父容器中放置一个高度为100%的伪元素，使文本与伪元素垂直对齐，从而达到垂直居中的目的。
演示代码：
<html><head><meta charset="utf-8"><title>42度空间-多行内联元素垂直居中-伪元素</title><style>.ghost-center {position: relative;border: 2px dashed #f69c55;padding: 10px 0;}.ghost-center::before {content: " ";display: inline-block;height: 100%;width: 1%;vertical-align: middle;}.ghost-center p {display: inline-block;vertical-align: middle;width: 12rem;padding:1rem;color:#fff;background:#000;}</style></head><body><div class="ghost-center"><p>“你毕业才两年，这三年工作经验是怎么来的？”程序员答：“加班。”</p></div></body></html>
09.块级元素垂直居中，块级元素固定高度
我们知道居中元素的高度和长度，垂直居中的问题就很简单了。 垂直居中可以通过将元素绝对定位在距底部 50% 的位置并将 margin-top 设置为向下倾斜元素高度的一半来实现。
演示代码：
<html><head><meta charset="utf-8"><title>42度空间-固定高度的块元素垂直居中</title><style>.parent {height: 140px;position: relative;border: 2px dashed #f69c55;}.child {position: absolute;top: 50%;height: 100px;margin-top: -50px;color:#fff;background: #000;}</style></head><body><div class="parent"><div class="child">控制复杂性是计算机编程的本质。</div></div></body></html>
10、块级元素垂直居中，且块级元素高度未知
当垂直居中元素的高度和长度未知时，我们可以利用CSS3中的transform属性将Y轴反转50%来实现垂直居中。 但有些浏览器存在兼容性问题。
演示代码：
<html><head><meta charset="utf-8"><title>42度空间-未知高度的块元素垂直居中</title><style>.parent {height: 140px;position: relative;border: 2px dashed #f69c55;}.child {position: absolute;top: 50%;transform: translateY(-50%);background: black;color: #fff;padding: 1rem;width: 12rem;}</style></head><body><div class="parent"><div class="child">世界上有 10 种人，懂二进制的和不懂二进制的。</div></div></body></html>
3.水平和垂直居中 11.固定宽度和高度元素水平和垂直居中
通过将元素总长度的一半平移边距，使元素水平和垂直居中。
演示代码：
<html><head><meta charset="utf-8"><title>42度空间-固定宽高元素水平垂直居中</title><style>.parent {height: 140px;position: relative;border: 2px dashed #f69c55;}.child {width: 200px;height: 80px;padding: 10px;position: absolute;top: 50%;left: 50%;margin: -50px 0 0 -110px;background: black;color: #fff;}</style></head><body><div class="parent"><div class="child">控制复杂性是计算机编程的本质。</div></div></body></html>
12. 未知宽度和高度的元素水平和垂直居中
使用 2D 变换，将宽度和高度的一半在水平和垂直方向上向相反方向平移css中居中，从而使元素在水平和垂直方向上居中。
演示代码：
<html><head><meta charset="utf-8"><title>42度空间-未知宽高元素水平垂直居中</title><style>.parent {height: 140px;position: relative;border: 2px dashed #f69c55;}.child {padding: 10px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;background: black;}</style></head><body><div class="parent"><div class="child">当你试图解决一个你不理解的问题时，复杂化就产成了。</div></div></body></html>
13.使用弹性布局
使用flex布局，其中justify-content用于设置或获取弹性包元素在主轴（横轴）方向的对齐方式； 而align-items属性定义了flex容器当前行的flex子项的横轴（纵轴）方向上的对齐方法。
演示代码：
<html><head><meta charset="utf-8"><title>42度空间-利用flex布局实现元素水平垂直居中</title><style>.parent {height: 140px;display: flex;justify-content: center;align-items: center;border: 2px dashed #f69c55;}.child {padding: 20px;background: black;color: #fff;}</style></head><body><div class="parent"><div class="child">Facebook wasn't built in a day.</div></div></body></html>
14.使用网格布局
使用网格实现水平和垂直居中。
演示代码：
<html><head><meta charset="utf-8"><title>42度空间-利用grid布局实现元素水平垂直居中</title><style>.parent {height: 140px;display: grid;align-items:center;border: 2px dashed #f69c55;}.child {margin:auto;padding: 20px;width:10rem;color: #fff;background: black;}</style></head><body><div class="parent"><div class="child">好的程序员能写出人能读懂的代码。</div></div></body></html>
15. 屏幕水平和垂直居中
在屏幕上水平和垂直居中非常常见，并且是常规登录和注册页面所必需的。 为了保证更好的兼容性，还需要使用表格布局。
演示代码：
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>42度空间-如何使DIV在屏幕上水平垂直居中显示？兼容性要好</title><style>.outer {display: table;position: absolute;height: 100%;width: 100%;}.middle {display: table-cell;vertical-align: middle;}.inner {margin-left: auto;margin-right: auto;background: #2b2b2b;color:#fff;padding: 2rem;max-width: 320px;}</style></head><body><div class="outer"><div class="middle"><div class="inner"><p>一个好的程序员应该是那种过单行线都要往两边看的人。</p><button value="add" id="add">增加内容</button></div></div></div><script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript">$(document).ready(function () {$("#add").click(function () {$("p").after("解决问题大多数都很容易；找到问题出在哪里却很难。
");});});</script></body></html> width: 400px;}
4 说明
文中提到的一些文字和代码都是网上整理的。 由于时间不够、能力有限等诱因，存在编写不准确、代码测试不充分等诸多问题。 因此，仅限于学习和交流的范围。 如果需要在实践中应用，请自行掌握。
请支持帅变帅哥美女，回复“1”加入后端技术交流群，回复“2”申请500G前端干货
发表评论