前端经验

鼠标经过图片hover放大效果完整案例

!doctype html html head meta charset = utf-8 title 鼠标hover放大效果 / title script src = http://libs.baidu.com/jquery/1.11.3/jquery.min.js / script style .box { width : 200px ; height : 200px ; overflow : hidden; float : left; margin...

前端经验

CSS改变input输入框闪烁光标的颜色

第一种 !doctype html html lang = en head meta charset = UTF-8 title 改变输入框光标颜色 / title style input { color : #333 ; caret-color : red; } / style / head body !-- Safari以及IE浏览器有兼容问题 -- input value = 改变...

前端经验

ucharts图表引入的两种方式

第一种按插件的例子引入 view class = qiun-columns view class = qiun-bg-white qiun-title-bar qiun-common-mt view class = qiun-title-dot-light 基本折线图/view/viewview class = qiun-charts canvas canvas-id= canvasLineA id= canva...

前端经验

使用css3绘制三角形(上下左右)

第一步:新建div盒子 div class = sanjiaoxing /div 第二步:为盒子添加CSS样式。 上三角形 .sanjiaoxing { width : 0 ; height : 0 ; border-right : 50px solid transparent; border-left : 50px solid transparent; border-bottom...

前端经验

jquery实现二级菜单下拉效果

!doctype html html head meta charset = utf-8 title 无标题文档 / title script src = js/jquery-1.4.3.min.js type = text/javascript / script style /* reset */ body , ul { margin : 0 ; padding : 0 ; } li { list-style :none; } a { text-deco...

前端经验

CSS3绘制三角形,并实现翻转效果

首先,如何用CSS3来绘制三角形,下面介绍了四种朝向三角形的写法: div class = triangle /div CSS样式设计: .triangle { width : 0 ; height : 0 ; overflow :hidden; /*朝上的三角形*/ border-left : 6px solid t...

前端经验

css加载效果,加载中,请稍后....

!DOCTYPE html html head meta http-equiv = Content-Type content = text/html; charset=utf-8 / title 加载中,请稍后.... / title style type = text/css .load { width : 100% ; height : 100vh ; position : fixed; top : 0 ; z-index : 10000 ; ba...