前端开发

详解html-webpack-plugin使用

最近在react项目中初次用到了html-webapck-plugin插件,用到该插件的两个主要作用:为html文件中引入的外部资源如script、link动态添加每次compile后的hash,防止引用缓存的外部文件问题可以生成创建html入口文件,比如单页面可以生成一个html文件入口,配置N个html-webpack-plugin可以生成N个页面入口1 »

html直接引用vue和element-ui的方法

代码如下所示: 圆角按钮 Try Element ... »

详解HTML中字体使用line-height依然不能垂直居中解决办法

以图片所示的效果为例,显然我们不仅要使“下一步”文本水平居中,还要垂直居中,此时我们写代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #next-butt... »

HTML中图片不存在显示默认图片的方法示例

也就是说图片存在则显示 pic.gif,图片不存在将显示默认图片。 »

amazeui页面分析之登录页面的示例代码

一、总结1、tpl命名空间:tpl命名空间的样式都是从app.css里面来的,app.css用用来移动网站开发的样式2、表单样式:am-form到am-form-group的形式二、登录页面截图:代码: Amaze UI Admin index Examples »

AmazeUI折叠式卡片布局,整合内容列表、表格组件实现

折叠式卡片布局在PC版网站中可能不常见,但是在手机版,小屏幕的网页浏览会大发异彩。 AmazeUI也提供了折叠式卡片布局,虽然官网上有例子,但是这种折叠式卡片布局,整合内容列表、表格组件还是需要一番功夫。 比如如下图,利用AmazeUI的折叠式卡片布局,整合其提供的内容列表与表格组件。 整个页面的代码如下: <!--使用HTML5开发--> <!doctype html> ... »

AmazeUi Tree(树形结构) 应用小结

##这两天工作比较忙,不过还是要总结相关的坑,希望兄弟们要谨慎应用AmazeUI 里边自带的树形结构插件 ##然后我简单说下我们公司前端应用:UI框架为AmazeUI(俗称妹子),交互框架为JQ。 ##如果你公司对于树形结构这边要求不要求有点击事件,只是纯显示那么你可以继续向下看,如果要求树形结构支持勾选,支持拖拽等等…我建议你直接点击退出,去用Ztree吧 第一步:基本引入 <... »

CSS解决inline-block的错位问题

废话不多说 帖代码 html部分 <div class="positionleft">我是position方式的左边,占30%</div> <div class="positionright">我是position方式的右边,占70%</div> css部分 .positionleft { position: ... »

纯CSS实现图片百叶窗展示效果示例

首先给大家看一下完成效果 主要思路:其实这个百叶窗还是利用了一种障眼法,我们看上去是鼠标移动上去之后,图片展开了,其实这些图片在原地根本没有动,只不过是我们把这些图片放在了一个列表里,相互叠加,鼠标移动的同时改变列表的宽度。 第一步:构建一个百叶窗框架 html代码: <div class="container"> <ul> <li><... »

详解淘宝H5 sign加密算法

淘宝对于h5的访问采用了和客户端不同的方式,由于在h5的js代码中保存appsercret具有较高的风险,mtop采用了随机分配令牌的方式,为每个访问端分配一个token,保存在用户的cookie中,通过cookie带回服务端分配的token, 客户端利用分配的token对请求的URL参数生成摘要值sign,MTOP利用这个摘用值和cookie中的token来防止URL篡改。 流程 当本地cook... »

AmazeUI 平滑滚动效果的示例代码

--滚动到顶部滚动到底部慢悠悠地滚到距离顶部 57px 的位置滚动到顶部指定滚动的位置效果图:到此这篇关于AmazeUI 平滑滚动效果的示例代码的文章就介绍到这了,更多相关AmazeUI 平滑滚动内容请搜索软件开发网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持软件开发网! »

AmazeUI 折叠面板的实现代码

简介   Amaze UI 是一个针对 HTML 5 开发的轻量级、模块化、移动优先的跨屏前端框架,通过拆分、封装了一些常用的网页组件,比如轮播图框、文字框等等组件,让前端开发者只用复制代码便可以将这些跨屏的组件写入自己的网页中,而不需要自己在开发的过程中重写一遍。 <!doctype html> <html class="no-js"> &l... »

详解CSS布局中浮动问题的四种解决方案

clear属性,字面意思就是清除,那么both,就是清除浮动元素对我左右两边的影响。表示在p标签元素的最后面添加样式,同时这也正好符合内墙法的用法。 clear: both; 清除浮动的方法。overflow:hidden;表示隐藏元素,但是该元素占位置;而display:none;不占位置。 »

详解中文字体在CSS样式中font-family对应的英文名称

总结到此这篇关于中文字体在CSS样式中font-family对应的英文名称的文章就介绍到这了,更多相关CSS样式font-family英文名称内容请搜索软件开发网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持软件开发网! »

如何在Canvas上的图形/图像绑定事件监听的实现

HTML中只能为元素/标签绑定监听函数; Canvas绘图中只有一个元素-canvas,每一个图形/图像都不是元素,不能直接进行事件绑定。 解决办法:“事件委托”——让canvas监听所有的事件,计算事件发生坐标点,是否处于某个图形/图像的范围内。 对于标准几何图形可以进行事件绑定; 对于不标准几何图形进行事件绑定非常麻烦。 <!DOCTYPE... »

AmazeUI 等分网格的实现示例

-- 效果图:到此这篇关于AmazeUI 等分网格的实现示例的文章就介绍到这了,更多相关AmazeUI 等分网格内容请搜索软件开发网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持软件开发网! »

AmazeUI在模态框中嵌入表单形成模态输入框

在《模态框》一文中,已经介绍过在AmazeUI这个手机版前端框架中,怎么使用模态框了,但是这篇文章提到的模态框只是那些单纯的模态框。比如一按“登录”按钮,则显示这个模态输入框,JavaScript脚本则如下实现:到此这篇关于AmazeUI在模态框中嵌入表单形成模态输入框的文章就介绍到这了,更多相关AmazeUI模态输入框内容请搜索软件开发网以前的文章或继续浏览下面的相关文章... »

AmazeUI框架搭建的方法步骤(图文)

开始使用Amaze UI 1.获取Amaze UI   1.1下载文件 首先打开百度输入:Amaze UI –>找到Amaze UI官网 –>点击开始使用 –>下载文件"Amaze UI v2.2.1" 和"Sublime"代码片段     (至于Subl... »

CSS中flex和inline-flex的区别详解

inline-flex 和 inline-block 一样,对内部元素来说是个 display:flex 的容器,对外部元素来说是个 inline 的块。 »

深入浅析CSS 的多种背景及使用场景和技巧

本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料 CSS background是最常用的CSS属性之一。然而,并不是所有开发人员都知道使用多种背景。这段时间都在关注使用多种背景场景。在本文中,会详细介绍background-image`属性,并结合图形来解释多个背景使用方式以及其实际好处。 ... »

canvas 绘图时位置偏离的问题解决

使用 canvas 绘图时,指定的 div 大小一定不要超过该 div 所能获得的最大范围,否则绘制的点会跟实际位置发生偏离。到此这篇关于canvas 绘图时位置偏离的问题解决的文章就介绍到这了,更多相关canvas 绘图位置偏离内容请搜索软件开发网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持软件开发网! »

AmazeUI 点击元素显示全屏的实现

无论是点击图片还是按钮来显示全屏,具体代码如下:点击按钮: Fullscreen the page 类似可以用于任何元素,也能达到这种效果。AmazeUI却是用起来挺方便快捷的。到此这篇关于AmazeUI 点击元素显示全屏的实现的文章就介绍到这了,更多相关AmazeUI 点击元素显示全屏内容请搜索软件开发网以前的文章或继续浏览... »

amaze ui 的使用详细教程

今天老师给我讲解了amaze ui的使用,在此与大家分享我的学习笔记。使用方法amaze ui的使用通常有两种方式:css、js文件复制到项目中;采用cdn方式。解压后查看该文件夹下的问assets文件,assets文件夹下又包括css、js文件夹,这两个文件就是amaze ui中封装,可供用用户直接使用的样式。但是使用amaze ui的js,需要jquery的支持,所以需要将其导入,导入次序要在... »

AmazeUI 面板的实现示例

本文主要介绍了AmazeUI 面板的实现示例,分享给大家,具体如下:面板 这是一个基本的面板组件。... ... 面板标题 这里是面板其他内容。 »

纯css实现流向性和动态线条效果的代码

思路: 一个外层盒子设置背景;一个内层盒子设置宽高背景,并设置animate让盒子移动 demo: css部分: @keyframes mymove { from{left:0px;} to{left:70px;} } .father{ background: #748096; border-radius:5px; position: relative; top: 70px; left: -5px... »

Page 1 of 2500123»