Category: Div / Css / XML / HTML5 / SVG

31个最佳Bootstrap 4后台管理模板, 2019适用于Web应用程序和网站后端的最佳模板, 31 Best Bootstrap 4 Admin Templates For Web App and Website Backends 2019

  智能手机得到了发展。这些设备逐渐超越其早期版本的简单性,已成为多平台控制台。因此,所有网站都必须适应这种新的动态环境。由于没有完全响应的界面,企业可能会冒很大一部分目标人群疏远的风险。管理面板和页面本身都必须具有完全响应能力,能够支持手持设备。 对于那些希望建立并保持成功的网络存在的人来说,Bootstrap是一个理想的选择。它简化了移动优先网页设计,使其非常人性化。它拥有大量的组件,工具和模式,为前端开发人员和Web设计人员提供支持。这个多产的前端框架绝对是一个改变游戏规则的游戏。您可以将Bootstrap 4管理模板用于任何类型的产品,应用程序或站点。因此,许多管理面板可以容纳所有客户。鉴于这些面板的简化管理前端功能,您无需成为运营在线业务的专家。下面你可以看到很棒的Bootstrap管理模板,适用于网络应用和其他专业外观的网站后端。   ArchitectUI HTML   ArchitectUI是一个基于Bootstrap 4的管理面板模板,具有很好的识别能力。它有一个Starters套件,适用于所有7个预制模板,方便您使用。它还具有Jade模板构建器。这使得布局无限且独特。ArchitectUI有7个惊人的菜单和快速导航或搜索栏。页眉和页脚是灵活和可定制的。至于Jade builder,它可以完全脱机用于Windows,Mac和Linux。ArchitectUI提供+1500页面和5个小众仪表板。翻译文本及其RTL支持和其他插件的兼容性。您可以使用其24种多功能选项来配合配色方案。 要安排上传,可以使用代码编辑器和表单管理三列。ArchitectUI本质上是多用途和适应性的。它可以适合任何Web应用程序,并带有内置选项。它已与Google Maps和Font Awesome等优秀插件集成。您会发现所有设备都已准备好并且适合移动设备。除了令人敬畏的视频教程之外,ArchitectUI还提供专业支持。迷路是不可能的!可用也是终身免费更新,所以总是期待它们。查看客户评论,很难阻止!立即获得这个5星级的广泛和多样化的管理模板!去找ArchitectUI吧! 下载  DOWNLOAD  |  演示… Read More

10 个超炫酷后台控制面板(附 GitHub下载链接), 免费后台模板

Web 开发中几乎的平台都需要一个后台管理,但是从零开发一套后台控制面板并不容易,幸运的是有很多开源免费的后台控制面板可以给开发者使用,那么有哪些优秀的开源免费的控制面板呢?我在 Github 上收集了一些优秀的后台控制面板,并总结得出 Top 10。 zhisheng 点评:有好的轮子可以直接用,重新造轮子耗时太长,做出的效果还不一定够好   AdminLTE Github Star 数 24969 , Github 地址:https://github.com/almasaeed2010/AdminLTE 非常流行的基于… Read More

CSS3选择器「:nth-child()」与「:nth-of-type()」用法大不同, :nth-of-type 用法, CSS 伪类

    虽然说目前CSS3还没正式的标准化,但新的属性已为网页带来许多的便利,像是大家所熟悉的圆角框、阴影、渐层、多栏位….,甚至目前正夯的RWD自适应,这些都是需要使用到CSS3,除此之外CSS3还提供了许多的选择器可使用,如此一来就可大量的减少一些类别的设定,直接透过HTML的标签就可直接进行选择与样式的设定,虽然说很方便,但在CSS3有二个选择器长的很像nth-child与nth-of-type,在正常情况下,二个用起来很像,但若HTML的结构改变时,二个就大不同啦!!!因此梅干作了一个小范例,来帮大家解惑,这二个属性的最大差别什么地方。   :nth-of-type() 这个 CSS 伪类匹配文档树中在其之前具有 an+b-1 个相同兄弟节点的元素,其中 n 为正值或零值。简单点说就是,这个选择器匹配那些在相同兄弟节点中的位置与模式 an+b 匹配的相同元素。 /* 在每组兄弟元素中选择第四个 <p> 元素 */… Read More

HTML特殊字符显示, HTML 字符实体, HTML EntityCode, Character Entities, HTML Entities

HTML字符实体(Character Entities) 有些字符在HTML里有特别的含义,比如小于号<就表示HTML Tag的开始,这个小于号是不显示在我们最终看到的网页里的。那如果我们希望在网页中显示一个小于号,该怎么办呢? 这就要说到HTML字符实体(HTML Character Entities)了。 一个字符实体(Character Entity)分成三部分:第一部分是一个&符号,英文叫ampersand;第二部分是实体(Entity)名字或者是#加上实体(Entity)编号;第三部分是一个分号。 比如,要显示小于号,就可以写&lt;或者&#60;。 用实体(Entity)名字的好处是比较好理解,一看lt,大概就猜出是less than的意思,但是其劣势在于并不是所有的浏览器都支持最新的Entity名字。而实体(Entity)编号,各种浏览器都能处理。 注意:Entity是区分大小写的。   如何显示空格 通常情况下,HTML会自动截去多余的空格。不管你加多少空格,都被看做一个空格。比如你在两个字之间加了10个空格,HTML会截去9个空格,只保留一个。为了在网页中增加空格,你可以使用&nbsp;表示空格。   最常用的字符实体(Character… Read More

SASS界面编译工具——Koala的使用

《SASS界面编译工具——Codekit的使用》一文中图解了”CodeKit”图形工具编译SASS项目。由于CodeKit是一款付费工具,而且只能在Mac中使用,因此国内众多SASS爱好者,或者初学者也就无法体验CodeKit工具编译SASS项目。幸运的是,有一款国产图形工具Koala和CodeKit功能极其类似,支持多个平台,而且是开源的。 Koala Koala官网下载Koala Koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。不过在这篇文章中,我们仅介绍如何用Koala来编译SASS项目。 Koala特性 在介绍如何使用Koala之前,我们先简单的了解一下Koala具有哪些功能特性: 支持多语言:支持LESS、SASS、CoffeeScript和Compass; 实时编译:监听文件,当文件改变时自动执行编译,这一切都在后台运行,无需人工操作; 编译选项:可以设置各个语言的编译选项; 代码压缩:Less和Sass支持编译后自动压缩代码; 错误提示:在编译时如果遇到语法的错误,提供错误信息log,方便开发者定位代码错误位置; 跨平台运行:可以在Window、Linux和Mac OS X多个平台下完美运行。 Koala下载与安装 如果你决定使用Koala来编译您的SASS项目,那么你就得先安装一个Koala。要是你是第一次使用Koala,你可以到他的官网下载对应的版本,因为Koala提供多个环境的安装文件: Windows Mac… Read More

HTML5: 利用SVG动画动态绘制文字轮廓边框线条

DEMO: 点击这里看效果 简要教程 这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效。SVG路径动画在网页设计中是一项热门的技术,它允许我们绘制各种简单、精美的图标和文字。关于使用SVG制作图标方面的知识,请参考阅读ESSENTIAL ICONS。 制作流程 先用一张gif图片来看看效果: 制作SVG 1、首先你要下载和安装一款矢量图形编辑器,推荐使用Inkscape。 2、打开Inkscape,创建一个新的文档。在文档的左上角创建你的文字。 3、使用选择工具选取你创建的文字。 4、在Path菜单中,选择Object –> Path。然后保存为SVG。 5、使用文本编辑器打开你刚才保存的SVG。将一些不需要的标签去掉,每个路径只保留path部分即可,见下图: CSS 1、创建一个div作为包裹容器包住SVG。给这个div一个id,然后添加下面的css代码:… Read More

如何制作HTML5 SVG描边文字

在很多时候,SVG是最容易在网页上做出文字特效的方法。现在SVG已经被所有的现代浏览器支持,包括IE9。要在页面上制作SVG文字,可以直接将SVG代码插入带页面中,SVG文字代码十分简单易懂。如下是一段SVG描边文字的代码: <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <text fill="#e96" style="font-size:60px; font-family: Futura Condensed ExtraBold, Arial Black, sans-serif; color: yellow;" stroke =… Read More

基本的SVG样式属性

SVG的样式属性和CSS的语法非常接近,有时甚至是一样的,经常会照成一些使用上的混乱。 注意,我们在这里讨论的是用于SVG代码本身出现的规则,而不是SVG被嵌入网页后被附加上去的规则样式。然而,如果你想从CSS属性来了解SVG,比较他们的语法规则是一种有效果的方法。 SVG 等效的CSS fill background-color或color fill-opacity background-color或color设置rgba/hsla opacity opacity stroke border-color stroke-width border-thickness stroke-opacity border-color设置rgba rx, ry… Read More

CSS3: 常用动画特效及4个最流行的动画库

一、animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡出淡出效果,如果你想快速的整合各种CSS3动画特效的话,使用它即可方便的实现。 查看演示: https://daneden.github.io/animate.css/  github地址: https://github.com/daneden/animate.css 直接下载:animate.css-master  二、magic.css动画库 查看演示: http://www.17sucai.com/pins/demoshow/10001 github地址: https://github.com/miniMAC/magic 直接下载:magic-master 三、Effect.css 针对不同UI的CSS3动画和过渡效果集,包含了丰富的CSS3动画和过渡效果,包括: Modal overlay… Read More