daique1908-CSDN博客

翻译项目：继续与Middleman建立我们的网站

在本教程中，我们将继续构建播客站点。我们将开始设计帖子索引的样式，创建一个漂亮的小页脚，并在混合中添加一些颜色。所有这些都使用Sass和Bourbon套件。我们的职位索引是的，我们在哪里？目前，我们的网站看起来还不太好：目前，我们的帖子除了左侧没有对齐以外的其他内容，因此我们需要一个网格来修复此混乱情况。我们心爱的波旁王朝整装待发！首先，我们将添加一个类posts作为...

2020-07-15 09:51:38 728

翻译 css checkbox_如何使用CSS Checkbox Hack构建简单的幻灯片

您将要创造的在这个新教程中，我们将学习如何从头开始创建具有缩略图的功能齐全的响应式图像幻灯片。为此，我们不需要编写任何JavaScript代码。实际上，再一次，由于我们利用了“ CSS checkbox hack技术”，因此我们将仅使用HTML和CSS。我们的响应式CSS幻灯片这是我们将在本教程中创建的幻灯片（请确保查看完整的CodePen版本以防止页面跳至顶部）： 1...

2020-07-10 16:15:17 753

翻译 css实现贝塞尔静态图_使用高级CSS条形图构建静态投资组合

在上一篇文章中，我向您展示了如何构建漂亮的全屏投资组合页面。在该教程中，我们还学习了如何创建响应式CSS柱形图。在本教程中，我们将构建另一个有吸引力的静态投资组合页面，这次以纯CSS条形图为特色，而无需使用任何外部JavaScript库，SVG或canvas元素！我们正在建设什么这是我们将创建的项目：我们有很多令人兴奋的事情要介绍，所以让我们开始吧！ 1.从页面标记开始...

2020-07-10 16:05:17 1023

翻译 css 加载动画_使用CSS动画增强网页加载的方式

在上一个教程中，我们使用flexbox创建了一个全屏响应页面。今天，我们将通过添加一些CSS动画来使此页面更具吸引力。这是我们要构建的： 1. HTML 为了添加所需的动画，我们将略微更新初始页面标记。在上一教程中，我们main元素的标记如下所示： <main class="page-main"> <div> <h1>...&...

2020-07-10 15:35:17 486

翻译不归零码位填充技术_一种用于填充星级的简单JavaScript技术

在这个简短的教程中，我们将介绍一种简单而有用的方法，用于使用HTML，CSS和JavaScript填充星级。这是我们要构建的：抢星图标对于我们的示例，我们需要以下两个星形图标：考虑到这一点，让我们首先在项目中包含流行的Font Awesome库：标记关于标记，我们需要一个六行的表。第一行包含表格标题th ，而其他五行包含酒店详细信息。显然，在您自己的项目中，这些行可...

2020-07-10 15:25:17 451

翻译 box和flexbox_Flexbox订购和重新订购综合指南

flexbox布局模块允许我们按任意顺序和方向布置flex项目。实际上，Flexbox排序比使用float或CSS网格进行排序更容易，即使您一开始可能并不这么认为。由于flexbox是一维布局模型，而CSS网格是二维的，因此您只需要注意一个方向即可。 W3C也清楚地定义了规则，因此您不必处理通常的float和clearfixes混乱。通过阅读本指南，您将学习如何使用以下flexbox...

2020-07-10 15:15:17 198

翻译 css 光标手型_快速提示：如何使用CSS操纵光标外观

在此快速提示中，我们将学习如何使用CSS自定义光标外观。我们将把光标更改为箭头，以使幻灯片浏览更容易。为了更好地理解它，我们将逐步介绍两个示例。注意：本文的目的不是详尽地介绍cursor属性的语法。要进行更彻底的检查，请确保在本教程末尾检查资源。例子1 对于第一个示例，我们将讨论如何根据鼠标位置更改光标图像。这是我们将要构建的演示： 1. HTML 我们从一个简单...

2020-07-10 14:55:17 294

翻译从头开始vue创建项目_如何从头开始创建7种不同CSS悬停效果

在今天的教程中，我们将创建7种不同CSS悬停效果。我们将沿途学习负载，包括如何为字体图标，边框和SVG路径设置动画。您将能够将这些CSS悬停效果应用于各种情况。让我们潜入吧！只是为了让您了解在本教程中将学到的内容，请查看我们将要构建的一个演示：让我们从这个开始，第一步。 1.揭示图标CSS悬停效果在第一个示例中，我们将探索您已经看到的演示：悬停效果，其中文本被带有幻...

2020-07-10 14:45:17 296

翻译 flexbox垂直居中_如何使用Flexbox创建完美居中的文本

将内容水平居中并没有什么特别令人印象深刻的内容。你已经做了很多年了。但是，如何将可变高度内容垂直居中？在我的课程“ 面向Web设计人员的6个Flexbox项目”中的这段视频中，您将学习Flexbox如何以最小的努力解决此问题。如何使用Flexbox创建完美居中的内容在CodePen中介绍项目在本教程中，我将向您展示使用Flexbox模型在水平和垂直方向上将要居中的任何内容居中多...

2020-07-10 14:35:17 312

翻译 css画布背景_如何使用CSS网格构建画布外导航

画布外模式是响应式导航的经典方法。当视口足够小以至于需要保证时，笨拙的导航将隐藏在“画布外”，并且只有在切换后才可以看到。今天，我们将构建一个脱离画布的导航，使用CSS进行切换（不需要JavaScript），并使用我们的好朋友Grid来形成页面结构。这是我们正在努力的全页演示。基本页面结构让我们从建立一个基本页面开始；我们的目标是这样的：语义页面结构这是一个非常...

2020-07-10 14:25:17 565

翻译 subgrid 如何传参_CSS Subgrid：功能，语法以及它将解决的问题

CSS子网格正在逐步进入浏览器。 CSS工作组正在积极地进行这项工作，并且相关的W3C规范已经达到了Level2。此新功能将使我们能够使用继承自其父网格的网格轨迹并与之无缝对齐的子网格来增强网格项。由于浏览器尚未实现 CSS subgrid，因此本文仅简要概述了即将推出的功能。 Subgrid可能很快将由Firefox Nightly实施，您可以在其中进行试验。请注意，规格尚未最终确定...

2020-07-10 14:05:17 826

翻译 vux flexbox使用_如何使用Flexbox构建全屏响应页面

在本教程中，我们将学习如何使用flexbox构建全屏响应页面。我们的页面将包括全屏背景图像，垂直居中的内容和页脚发粘。快速浏览一下我们要构建的页面（全屏版本可能会为您提供更好的主意）： 1.定义容器我们首先定义一个容器，在其中放置三个元素。 header ， main和footer 。这是页面结构： <div class="wrapper"> <h...

2020-07-10 13:45:17 275

翻译 haiku英文诗例子_Haiku简介：设计和创建运动（代码可选）

随着Web开发人员的兴起，有助于简化其创建过程的工具也越来越多。 Haiku是可供Mac用户使用的独立应用程序，也可以作为浏览器内选项使用。用自己的描述“设计可想象到任何Web应用程序中的具有想象力的UI组件。代码可选。” 在本文中，我们将介绍适用于各种运动爱好者的这种新工具。让我们潜入并探索Haiku！ ku句的诞生创始人兼Haiku创造者Zack Brown在数字创意行业的广泛...

2020-07-10 13:35:17 2476

翻译 css网格_了解CSS网格“自动放置算法”

在我们较早CSS Grid入门教程之一中，我们研究了流体柱和更好的排水沟。我们了解到，没有必要确切地指定我们要放置网格项目的位置。如果我们声明网格的属性，则Grid将根据其自动放置算法将项目放入其中。在本教程中，我们将研究该算法如何进行工作以及如何影响该算法。建立它始于网格这是一个开始演示的演示网格；这是我们声明要display: grid;的容器display: gr...

2020-07-10 13:25:17 210

翻译 svg 遮罩_SVG中剪辑和遮罩的综合指南

剪切和遮罩是SVG的一项功能，该功能可以通过使用简单或复杂的形状来完全或部分隐藏对象的某些部分。多年来，许多开发人员都采用了这些功能并将其推向各个方向。在本文中，我们将介绍一些高级方法以及演示，它们演示了剪辑和遮罩的效果。让我们开始吧！什么是遮罩？让我们首先回答这个问题：裁剪和遮罩之间有什么区别？我们将仔细研究每一个，以便更好地理解。请注意，虽然规范中概述的大多数功能现在都...

2020-07-10 13:15:17 1329

翻译 css网格_快活的Gridmas！使用CSS网格构建喜庆的日历

在本教程中，我们将使用CSS Grid，SVG和一些节日的欢呼来构建季节性出现日历！让我们先看一下我们将要朝着什么方向前进-单击日期以查看其背后的内容：您需要什么本教程实际上并不需要太多，只需要一个代码编辑器（依靠CodePen使事情变得更容易）以及一些基本HTML和CSS知识即可。不过，您将需要一些喜庆的视觉效果-我已经从Envato Elements的才华横溢的masastar...

2020-07-10 13:05:17 353

翻译 css 遮罩层随着滚动遮罩_在您下一次喝咖啡休息时学习CSS裁剪和遮罩

您将要创造的裁剪和遮罩图像是您使用过Photoshop等图形应用程序后可能会熟悉的概念。但是您知道如何在CSS中进行剪切和遮罩吗？在我们新的十分钟的“茶歇”课程中，“ 使用CSS剪辑和遮罩”中，您将确切地学到这一点。 Envato Tuts +讲师Adi Purdila将带您了解语法，介绍正确的用法，并介绍当前的浏览器支持。您还将获得一些动手实践，并学习如何使用CSS的功能来创...

2020-07-10 12:55:17 169

翻译面向对象的前端开发_面向设计师的开发：了解前端

在本文的学习过程中，我们将大力发展前端开发，并了解它如何适应我们的整体情况。这是我们要介绍的内容：了解前端堆栈 DOM的局限性注意事项了解事件，状态和响应能力了解前端堆栈渲染网站可能是一项艰巨的任务。使用大量设备，浏览器，访问点，带宽，编程语言和环境，构建一致的Web体验可能很困难。多亏了浏览器和标准化机构（W3C），我们才有了一些Struts，以便在可...

2020-07-10 12:45:17 437

翻译 css flexbox模型_解决CSS Grid和Flexbox的问题：Card UI

近年来，“卡片”模式取得了巨大的成功，但是由于我们可以使用CSS，因此构建它们的方式仍然受到限制。到现在为止。通过将CSS Grid和Flexbox结合使用，我们可以使卡片整齐对齐，响应Swift，并适应其中的内容。让我们看看如何！我们将要建立的在此CSS Grid and Flexbox教程中，我们将构建此卡UI（请查看完整版的页面以获得更清晰的主意）：在各个断点处，卡的...

2020-07-10 12:35:17 221

翻译水平时间轴css代码_使用CSS和JavaScript构建水平时间线

在上一篇文章中，我向您展示了如何从头开始构建响应式垂直时间轴。今天，我将介绍创建关联的水平时间线的过程。像往常一样，要初步了解我们将要构建的内容，请看一下相关的CodePen演示（请查看较大的版本以获得更好的体验）：我们有很多内容需要介绍，所以让我们开始吧！ 1. HTML标记标记与我们为垂直时间轴定义的标记相同，除了以下三点：我们使用有序列表而不是无序列表，...

2020-07-10 12:25:17 1306

翻译外企茶歇_关于创建WordPress儿童主题的新茶歇课程

您将要创造的如果您想调整或自定义WordPress主题（无论是内置主题还是从其他位置下载的主题），子主题都是必经之路。否则，如果您直接自定义主题，则更新主题时，所有工作将丢失！在我们新的“茶歇课程”中，使用子主题自定义WordPress网站，Envato Tuts +讲师Rachel McCollin将教您如何使用子主题自定义WordPress主题。您将看到如何设置子主题，如...

2020-07-10 12:15:17 183

翻译 css 原型头像_如何使用CSS和JavaScript创建应用原型

动画确实是很长一段时间以来击中CSS的最佳功能之一。毕竟，正如我们意识到的那样，运动可以增强用户体验并鼓励在静态上下文不足的情况下采取行动。在本教程中，我们将使用CSS动画和JavaScript来为应用程序构建原型。我们正在创造什么在本练习中，我们将开发一个应用程序的原型，使订阅者可以彼此关注。最初，我们将加载一个用户列表，其名称在每个对应的头像下方。单击这些化身，将触发一个模...

2020-07-10 12:05:17 463

翻译 css 网格布局_CSS网格布局：流体列和更好的装订线

在本教程中，我们将采用上一教程中的网格，并将其用作游乐场以进一步研究Grid。我们将改进定义装订线的方式，探索灵活的布局， fr单位，并引入repeat()函数。弹性单位 Grid的全部目的是使我们能够正确地控制Web上的布局，因此让我们在进行下一步之前使我们的静态网格流畅。您还记得吗，我们使用静态像素测量来定义网格： grid-template-columns: 150px 15...

2020-07-10 11:55:17 220

翻译 css nth-child_揭开CSS伪类的神秘面纱（：nth-child vs.:nth-of-type）

使用CSS选择器将样式应用于网页。选择器，使您可以定位特定元素或元素集。通常，从CSS开始时，您将先使用元素选择器，然后再转向使用类和ID。尽管这些选择器功能强大，但它们可能具有很大的局限性，因此无法根据其状态选择元素。如果您曾经使用过React和Vue等前端框架，那么您可能会了解状态的含义。我指的不是应用程序的整体状态，而是HTML代码中元素的状态。谦虚链接是一个简单的示...

2020-07-10 11:45:17 167

翻译响应式图像_如何为响应图像使用HTML5“图片”，“ srcset”和“大小”

<picture>是一个HTML5元素，旨在为我们提供更多功能和性能更好的响应图像功能。图片标签不会加载单个图像并尝试调整其大小以适合所有可能的视口大小和布局，而是加载不同大小和分辨率的多个图像，选择最适合不同场景的图像。 <picture>如何工作？它的工作原理类似于这样<audio>和<video>元素的工作，让您可以将多个sourc...

2020-07-10 11:35:17 657

翻译自定义表单html:_掌握通用兄弟选择器：自定义表单元素

最强大且使用不足CSS选择器之一是通用的同级组合器： ~ 。在接下来的教程中，我将探讨使用~不同方式来创建不仅具有视觉吸引力，而且具有功能性和实用性的组件。本教程将介绍表单元素。单选，复选框和常规输入。我们将学到很多东西：现代CSS选择器， will-change属性，SVG的stroke属性，输入状态等等！在我们开始之前.. 快速免责声明：这些CSS效果可能会在旧版浏览器...

2020-07-10 11:25:17 266

翻译 CSS网格布局和漫画（由Barry the Cat解释）

事实证明，CSS Grid非常适合布置在线漫画，特别是如果您希望漫画灵活。在本教程中，我们将使用猫巴里（Barry the cat）来演示如何制作自适应漫画。巴里猫在本教程中，我借鉴了GraphicRiver的一些作品。昏昏欲睡的肥猫实际上是一种显示字体，但包装有一些可爱的猫矢量-完美完成了该漫画演示！ GraphicRiver上的困胖猫字体加快浏览器速度别忘了，您需要最...

2020-07-10 11:15:17 439

翻译 amp 优化_在没有AMP的情况下优化您的网站：优化清单

如果您想不使用AMP等现成的方法手动优化网站的性能，则需要采取哪些关键步骤？在我的课程“ 不使用AMP来优化您的网站”中的这段视频中，您会发现一个简单的清单，可用来确保您的网站加载速度与AMP一样快，甚至更快。在没有AMP的情况下优化您的网站：优化清单优化清单这是我们将要使用的基本优化清单：加载速度应等于或快于同一站点的AMP版本。尽早加载网络字体以使它们进入。 ...

2020-07-10 11:05:17 284

翻译构造无礼：告别原子设计的歧义

原子设计是一种概述样式表合理代码结构的方法。它有大量的追随者，但是我发现其命名约定有时可能是模棱两可的。什么是分子？什么是生物体？我们如何知道两者之间的界限？这些特定问题似乎是解释原子体系结构的最大绊脚石。原子，分子，生物，模板和页面今天，我们将讨论我使用的东西，我在努力使用的原子设计约定的特定方面，解决问题所采取的措施以及当前如何使用7-1模式组织Sass。编者注 ...

2020-07-10 10:55:17 168

翻译 supports_快速提示：将@supports CSS文件添加到您的CodePen演示中

当您的CodePen演示依赖于最先进CSS时，警告人们是个好主意。当浏览器不支持我们的演示时，让我们使用@support规则来提供方便的可重用CodePen资产，以提供通知。最终结果这就是我们正在努力的方向；可重用的通知，以突出显示不受支持CSS。它将几乎完全保存在自己的笔中，我们可以通过外部CSS链接将其添加到其他演示中： @supports规则 CSS @supports...

2020-07-10 10:45:17 260

翻译 ubuntu窗口有粘性_如何创建带有粘性标题的时尚价格表

粘性定价表非常适合显示具有相当功能的一长串产品和服务。在本教程中，我们将创建带有粘性标题的定价表。在此过程中，我们将学习如何在滚动一定量后固定和取消固定元素。但是，今天，让我们挑战自我，编写自己的代码。我们正在建立的定价表在本动手练习中，我们将设计一个定价页面，该页面将在定价表的列中包括不同的订阅计划。当我们向下滚动时，页眉将变得粘滞以便留在视图中，然后在以后释放。带有粘...

2020-07-10 10:35:17 136

翻译通用兄弟选择器_掌握通用兄弟选择器：“自定义”选项卡导航

欢迎使用我们的系列教程中的下一部分，在本文中我们将使用通用的同级组合器~为网络创建各种组件。本教程将介绍使用链接和无线电输入的导航元素。除了CSS选择器， will-change属性和上一教程中的输入状态外，我们还将介绍边框破解，用于循环的Sass， calc()和可访问性！我们正在努力这是我们将要构建的演示：快速免责声明：这些CSS效果可能会在旧版浏览器中起作用，也可能...

2020-07-10 10:25:17 381

翻译 css设置父元素样式_快速提示：使用CSS计数器为增量元素设置样式

学习CSS：完整指南无论您是刚刚开始使用基础知识还是想探索更高级CSS，我们都已构建了完整的指南来帮助您学习 CSS。在这个快速技巧中，我们将介绍CSS计数器的基本知识；一项有用但尚未广为人知CSS功能。完成演示的构建后，我们将看一些利用CSS计数器的真实示例站点。目标：样式化有序列表第一步，让我们看一下将要构建的布局：没什么好看的，对吧？不过，这是一个挑战：我们...

2020-07-10 10:15:17 3648

翻译 fullpage 滚动粘性_如何在滚动条上隐藏/显示粘性标题（使用JavaScript）

您是否曾经见过那些固定的（或“粘性”）标题栏之一，当您开始向下滚动页面时该标题栏消失，然后在您开始向上滚动时又重新出现？在本练习中，我们将学习如何使用一些JavaScript来构建自己的脚本。为什么？粘性组件（例如标题）在网页设计领域非常流行；它们可以使基本的UI元素永久可见，并且在用户需要时可以轻松访问。但是，在某些情况下（如果标头包含大量内容，或者视口大小和方向限制了可用屏幕...

2020-07-10 10:05:17 433

翻译 laya 创建动画_如何创建一个固定的页眉动画

在本教程中，我们将学习如何创建如今在许多网站上看到的模式：一个固定的标头，当我们向下滚动页面时，该标头会动画化为不太吸引人的状态。我们将从基本结构开始，然后使用CSS和纯JavaScript进行工作。在结束之前，我们将简要介绍如何优化代码以及讨论将这种模式应用于触摸设备时所面临的挑战。为了大致了解我们将要构建的内容，以下是演示（您可能更喜欢全屏视图）： HTML标记我们将从...

2020-07-10 09:55:17 301

翻译响应式ui_如何使用元素查询构建响应式UI组件

在本教程中，我们将继续有关元素查询的讨论，着手构建可重用的响应组件。概括地说，元素查询使我们能够根据容器的特征来模制元素。宽度，高度等。但是值得指出的是，元素查询距离成为CSS标准还有很长的路要走，我们可能要等上几年。因此，就目前而言，我们将不得不使用JavaScript库来模拟类似的功能，例如EQCSS 。均衡器 EQCSS是Tommy Hodgins开发JavaScr...

2020-07-10 09:45:17 173

翻译 css悬停鼠标显示文本_CSS悬停效果：创建文本“划像填充”的技术

在今天的教程中，我们将学习两种在悬停时创建“擦除填充”文本效果的不同技术。我们甚至会更进一步，使自己可以灵活地选择动画的方向。这是我们将要创建的：如您所见，当您将鼠标悬停在文本上方时，将应用填充，从而从一侧擦到另一侧。上方的菜单链接一开始没有明显的填充，而是有一个文本笔触，然后看起来像是在悬停时填充了。使用CSS过渡，您可以将擦除效果的速度和缓和程度更改为适合您的项目的速...

2020-07-10 09:35:17 2110

翻译 mouseover提示_快速提示：如何构建MouseOver导航幻灯片效果

您是否曾经在项目中使用过Slider Revolution WordPress插件？如果答案是“是”，则您可能已经注意到出现在插件配置页面右上角的迷你工具栏。最初，只有图标可见，从而使整个结构保持美观和紧凑。然后，每次将鼠标悬停在图标上时，都会通过平滑的滑入动画来显示其相关文本。在今天的练习中，让我们从这种效果中汲取灵感并构建类似的东西。这是我们将努力的方向：我们...

2020-07-10 09:25:17 220

翻译引用自己创建的css样式表_使用HTML，CSS和JavaScript创建时尚的深色联系表

在本教程中，我们将逐步介绍样式化基本联系人表单元素的过程。我们将研究使表单同时美观和功能齐全的不同方法。这是我们要构建的表单： 1.从页面标记开始我们将从一个包含一个标题和一个无序列表的form元素开始。我们将使用.container为表单设置最大宽度，并将其内容水平居中： <form class="my-form"> <div class="con...

2020-07-10 09:15:17 167

翻译 c# 窗口响应第一个事件_您的第一个使用电子邮件基础的响应式电子邮件构建

在本教程中，我们将首先了解ZURB的电子邮件基金会框架。我们将对其进行设置，解释软件包中的内容，然后为自己构建一个简单的响应式电子邮件。无论您是刚刚起步还是想探索更高级的主题，我们都构建了全面的指南来帮助您学习Foundation，请参阅 Learn Foundation 。构架在过去的半年中，我熟悉了一些用于创建HTML电子邮件的框架和样板。在使用这些工具之前，实际的开发...

2020-07-10 08:55:17 289

空空如也

空空如也