官方公告

官方公告

最新动态,版本发布
开发讨论

开发讨论

与前端大神一起探索
技术分享

技术分享

你的开发加油站
问题反馈

问题反馈

非常抱歉,AUI会有一些bug,感谢反馈给我们

下拉刷新怎么用啊

fla897907070 发表了文章 • 0 个评论 • 87 次浏览 • 2017-11-03 09:54 • 来自相关话题

下拉刷新没有看出效果啊
下拉刷新没有看出效果啊

有没完整的demo

sunjian 回复了问题 • 3 人关注 • 2 个回复 • 944 次浏览 • 2017-10-06 15:22 • 来自相关话题

jui 前端开发框架,构建体验度更好的H5应用!!

yangyuan 回复了问题 • 3 人关注 • 2 个回复 • 2032 次浏览 • 2017-05-04 11:58 • 来自相关话题

aui-skin加密后用不了

回复

丢了蜡笔的小新 发起了问题 • 1 人关注 • 0 个回复 • 286 次浏览 • 2017-04-03 13:25 • 来自相关话题

分享一个Select选择列表数据组件

fantian 发表了文章 • 1 个评论 • 1084 次浏览 • 2017-03-17 22:25 • 来自相关话题

第一次用AUI框架做移动端界面,感觉UI还是不错,组件还是很齐全,不过某些需求需要的效果没有,比如选择列表数据等,于是就写了一个这个小组件。





 
第一次用AUI框架做移动端界面,感觉UI还是不错,组件还是很齐全,不过某些需求需要的效果没有,比如选择列表数据等,于是就写了一个这个小组件。

demo.gif

 

整理的一套很炫的活动切换页面效果,方便调用和扩展

Chauncey 发表了文章 • 0 个评论 • 1496 次浏览 • 2016-09-13 17:08 • 来自相关话题

github地址:[https://]github.com/Chaunjie/page-transitions
预览地址
觉得好的话可以在github给个star

欢迎大家在github提建议
github地址:[https://]github.com/Chaunjie/page-transitions
预览地址
觉得好的话可以在github给个star

欢迎大家在github提建议

最近写的一个基于AUI的react组件库,希望对大家有用

Chauncey 发表了文章 • 4 个评论 • 1171 次浏览 • 2016-08-30 17:10 • 来自相关话题

觉得好的话可以给个star。github地址:github.com/Chaunjie/Aui-react
觉得好的话可以给个star。github地址:github.com/Chaunjie/Aui-react

AUI中实现用百分比控制显示星星分数

流浪男 发表了文章 • 2 个评论 • 1137 次浏览 • 2016-05-23 14:41 • 来自相关话题

在很多app种项目中,经常会出现用星星来显示评分值,计算出来的评分值可能带有小数,那么在AUI中如何实现这种展示方式呢?
css样式
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
.stars span:before,
.stars:before{
content:"\e64b\e64b\e64b\e64b\e64b"
}
.stars {
position: relative;
display: inline-block;
color: #ccc;
}
.stars span {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
color: #ffc30c;
white-space: nowrap;
}html文件
<div class="stars aui-iconfont"><span style="width:28%;"></span></div><Br/>
<div class="stars aui-iconfont"><span style="width:53%;"></span></div><Br/>
<div class="stars aui-iconfont"><span style="width:70%;"></span></div><Br/>
<div class="stars aui-iconfont"><span style="width:100%;"></span></div>




  查看全部
在很多app种项目中,经常会出现用星星来显示评分值,计算出来的评分值可能带有小数,那么在AUI中如何实现这种展示方式呢?
css样式
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
.stars span:before,
.stars:before{
content:"\e64b\e64b\e64b\e64b\e64b"
}
.stars {
position: relative;
display: inline-block;
color: #ccc;
}
.stars span {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
color: #ffc30c;
white-space: nowrap;
}
html文件
<div class="stars aui-iconfont"><span style="width:28%;"></span></div><Br/>
<div class="stars aui-iconfont"><span style="width:53%;"></span></div><Br/>
<div class="stars aui-iconfont"><span style="width:70%;"></span></div><Br/>
<div class="stars aui-iconfont"><span style="width:100%;"></span></div>

QQ20160523-2@2x.png

 

前端基础整理笔记 - CSS动画类(三)

流浪男 发表了文章 • 1 个评论 • 994 次浏览 • 2016-04-27 11:59 • 来自相关话题

一、2D转换

transform




translate() 控制x、y位移

rotate() 顺时针旋转,单位deg

scale() 放大或缩小,x、y

skew() 翻转 ,x、y

matrix() 矩阵,组合方法,六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素,不常用







3D转换




translate3d(x,y,z)    定义 3D 转化。

translateX(x)    定义 3D 转化,仅使用用于 X 轴的值。

translateY(y)    定义 3D 转化,仅使用用于 Y 轴的值。

translateZ(z)   定义 3D 转化,仅使用用于 Z 轴的值。

scale3d(x,y,z)    定义 3D 缩放转换。

scaleX(x)    定义 3D 缩放转换,通过给定一个 X 轴的值。

scaleY(y)    定义 3D 缩放转换,通过给定一个 Y 轴的值。

scaleZ(z)    定义 3D 缩放转换,通过给定一个 Z 轴的值。

rotate3d(x,y,z,angle)    定义 3D 旋转。

rotateX(angle)    定义沿 X 轴的 3D 旋转。

rotateY(angle)    定义沿 Y 轴的 3D 旋转。

rotateZ(angle)    定义沿 Z 轴的 3D 旋转。

perspective(n)    定义 3D 转换元素的透视视图。







transition 过渡

transition主要包含四个属性值:

    执行变换的属性:transition-property;

    变换延续的时间:transition-duration;

    在延续时间段,变换的速率变化transition-timing-function;

    变换延迟时间transition-delay




transition-property是用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:none(没有属 性改 变);all(所有属性改变)这个也是其默认值;indent(元素属性名);当其值为none时,transition马上停止执行,当指定为all 时,则元素产生任何属性值变化时都将执行transition效果,ident是可以指定元素的某一个属性值(不常用,属性值太多)




transition-duration:动画持续时间,单位为s/ms




transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率,




1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0);




2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0);




3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0);




4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0);




5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0);




6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效(此属性太复杂)







transition-delay:

transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果







animation 动画,类似于flash时间轴,通过百分比或者from(0%) to(100%)

div {

    animation: 自定义 5s;

    -webkit-animation: 自定义 5s;

}

@keyframes 自定义

{

    0%   {background: red;}

    25%  {background: yellow;}

    50%  {background: blue;}

    100% {background: green;}

}

@-webkit-keyframes 自定义

{

    0%   {background: red;}

    25%  {background: yellow;}

    50%  {background: blue;}

    100% {background: green;}

} 查看全部
一、2D转换

transform




translate() 控制x、y位移

rotate() 顺时针旋转,单位deg

scale() 放大或缩小,x、y

skew() 翻转 ,x、y

matrix() 矩阵,组合方法,六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素,不常用







3D转换




translate3d(x,y,z)    定义 3D 转化。

translateX(x)    定义 3D 转化,仅使用用于 X 轴的值。

translateY(y)    定义 3D 转化,仅使用用于 Y 轴的值。

translateZ(z)   定义 3D 转化,仅使用用于 Z 轴的值。

scale3d(x,y,z)    定义 3D 缩放转换。

scaleX(x)    定义 3D 缩放转换,通过给定一个 X 轴的值。

scaleY(y)    定义 3D 缩放转换,通过给定一个 Y 轴的值。

scaleZ(z)    定义 3D 缩放转换,通过给定一个 Z 轴的值。

rotate3d(x,y,z,angle)    定义 3D 旋转。

rotateX(angle)    定义沿 X 轴的 3D 旋转。

rotateY(angle)    定义沿 Y 轴的 3D 旋转。

rotateZ(angle)    定义沿 Z 轴的 3D 旋转。

perspective(n)    定义 3D 转换元素的透视视图。







transition 过渡

transition主要包含四个属性值:

    执行变换的属性:transition-property;

    变换延续的时间:transition-duration;

    在延续时间段,变换的速率变化transition-timing-function;

    变换延迟时间transition-delay




transition-property是用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:none(没有属 性改 变);all(所有属性改变)这个也是其默认值;indent(元素属性名);当其值为none时,transition马上停止执行,当指定为all 时,则元素产生任何属性值变化时都将执行transition效果,ident是可以指定元素的某一个属性值(不常用,属性值太多)




transition-duration:动画持续时间,单位为s/ms




transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率,




1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0);




2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0);




3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0);




4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0);




5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0);




6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效(此属性太复杂)







transition-delay:

transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果







animation 动画,类似于flash时间轴,通过百分比或者from(0%) to(100%)

div {

    animation: 自定义 5s;

    -webkit-animation: 自定义 5s;

}

@keyframes 自定义

{

    0%   {background: red;}

    25%  {background: yellow;}

    50%  {background: blue;}

    100% {background: green;}

}

@-webkit-keyframes 自定义

{

    0%   {background: red;}

    25%  {background: yellow;}

    50%  {background: blue;}

    100% {background: green;}

}

前端基础整理笔记 - CSS基础(二)

流浪男 发表了文章 • 2 个评论 • 884 次浏览 • 2016-04-27 11:59 • 来自相关话题

在css中,大多数标签都是默认属性,需要对其进行初始化,比如

*{padding:0;margin:0;}

在移动端布局时要采用响应式,响应式布局通常有两种方法,一是通过百分比控制,二十使用使用弹性盒子(flex)

一、写法,分组和嵌套

对于有相同属性的元素,可以使用分组的形式

h1{color:#ff9900}

h2{color:#ff9900}

h3{color:#ff9900}

-----------------

h1,h2,h3{color:#ff9900}




嵌套:

p {color:#ff9900;}

.demo {font-size:12px;}

.demo p { color:#ff6600;}

id选择器


#id




类选择器

.class




属性选择器


[title="text"]{}

input[type="text"]{}




派生选择器(也就是选择标签)

div{}




CSS 后代选择器  h1 em {color:red;}

CSS 子元素选择器 h1 > strong {color:red;}

CSS 相邻兄弟选择器 h1 + p {color:red;} 选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素





二、布局类




1、float(浮动)

CSS 的 Float(浮动),会使元素水平方向向左或向右移动,其周围的元素也会重新排列。

Float(浮动),往往是用于图像,但它在布局时一样非常有用。如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。

清除浮动 - 使用 clear

元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。代码:clear:both




2、定位(position)

Static 定位

HTML元素的默认值,即没有定位,元素出现在正常的流中。

静态定位的元素不会受到top, bottom, left, right影响。




Fixed 定位

元素的位置相对于窗口是固定位置。

即使窗口是滚动的它也不会移动




Relative 定位

相对定位元素的定位是相对其正常位置。可以移动的相对定位元素的内容和相互重叠的元素,它原本所占的空间不会改变。




Absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>Absolute定位使元素的位置与文档流无关,因此不占据空间。Absolute定位的元素和其他元素重叠。使用z-index可以控制层叠次序




重叠的元素

元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)

一个元素可以有正数或负数的堆叠顺序




3、边距/填充

margin 外边距

常用写法:

margin-top:100px;

margin-bottom:100px;

margin-left:100px;

margin-right:100px;




margin:100px; (上下左右全部)

margin: 100px 200px; (上下/左右)

margin:25px 50px 75px;(上边距为25px 左右边距为50px 下边距为75px)

margin:0 auto; 在已知当前元素宽度时可以控制当前元素水平剧中




Padding(填充)

定义元素边框与元素内容之间的空间。

当元素的 Padding(填充)(内边距)被清除时,所"释放"的区域将会受到元素背景颜色的填充。

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用,一旦改变一切都改变。




4、display/visibility 显示/隐藏

display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏。

隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。




display常用属性

none    此元素不会被显示。

block    此元素将显示为块级元素,此元素前后会带有换行符。

inline    默认。此元素会被显示为内联元素,元素前后没有换行符。

table    此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。

inline-table    此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。

table-cell    此元素会作为一个表格单元格显示(类似 <td> 和 <th>)

inherit    规定应该从父元素继承 display 属性的值。




5、对齐类

margin: 0 auto;

position

text-align




二、样式类
1、background 背景

background-color 背景颜色

background-image 背景图像

background-repeat 背景图像 - 水平或垂直平铺

background-attachment 背景图像是否固定或者随着页面的其余部分滚动。  scroll(默认跟随滚动) fixed(固定)

background-position 设置背景图像的起始位置。

background-size 背景尺寸




background: transparent; 背景透明

2、color 颜色

color:色值

3、透明类

opacity:0.4;

只让背景色透明 background:rgba(0,0,0,0.5)

4、border边框

border: 1px solid #000000;

根据位置控制

border-left

border-right

border-top

border-bottom




border-color颜色

border-style样式 dotted点状 solid实线 double双线 dashed虚线

border-width粗细




5、字体

    font-family:"Times New Roman", Times, serif;  字体

    font-size 控制字体大小,常用值有px,em

    为了避免Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替像素。

    em的尺寸单位由W3C建议。

    1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

    因此,1em的默认大小是16px。可以通过下面这个公式将像素转换为em:px/16=em




三、伪类是用来添加一些选择器的特殊效果。

a:link {color:#FF0000;} /* 未访问的链接 */

a:visited {color:#00FF00;} /* 已访问的链接 */

a:hover {color:#FF00FF;} /* 鼠标划过链接 */

a:active {color:#0000FF;} /* 已选中的链接 */




CSS伪类

:first-child 伪类来选择元素的第一个子元素

:last-child 伪类来选择元素的最后一个子元素

:first-line 伪元素 用于向文本的首行设置特殊样式。

:before伪元素可以在元素的内容前面插入新内容。

:after" 伪元素可以在元素的内容之后插入新内容。

:first-letter 伪元素用于向文本的首字母设置特殊样式: 查看全部
在css中,大多数标签都是默认属性,需要对其进行初始化,比如

*{padding:0;margin:0;}

在移动端布局时要采用响应式,响应式布局通常有两种方法,一是通过百分比控制,二十使用使用弹性盒子(flex)

一、写法,分组和嵌套

对于有相同属性的元素,可以使用分组的形式

h1{color:#ff9900}

h2{color:#ff9900}

h3{color:#ff9900}

-----------------

h1,h2,h3{color:#ff9900}




嵌套:

p {color:#ff9900;}

.demo {font-size:12px;}

.demo p { color:#ff6600;}

id选择器


#id




类选择器

.class




属性选择器


[title="text"]{}

input[type="text"]{}




派生选择器(也就是选择标签)

div{}




CSS 后代选择器  h1 em {color:red;}

CSS 子元素选择器 h1 > strong {color:red;}

CSS 相邻兄弟选择器 h1 + p {color:red;} 选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素





二、布局类




1、float(浮动)

CSS 的 Float(浮动),会使元素水平方向向左或向右移动,其周围的元素也会重新排列。

Float(浮动),往往是用于图像,但它在布局时一样非常有用。如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。

清除浮动 - 使用 clear

元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。代码:clear:both




2、定位(position)

Static 定位

HTML元素的默认值,即没有定位,元素出现在正常的流中。

静态定位的元素不会受到top, bottom, left, right影响。




Fixed 定位

元素的位置相对于窗口是固定位置。

即使窗口是滚动的它也不会移动




Relative 定位

相对定位元素的定位是相对其正常位置。可以移动的相对定位元素的内容和相互重叠的元素,它原本所占的空间不会改变。




Absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>Absolute定位使元素的位置与文档流无关,因此不占据空间。Absolute定位的元素和其他元素重叠。使用z-index可以控制层叠次序




重叠的元素

元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)

一个元素可以有正数或负数的堆叠顺序




3、边距/填充

margin 外边距

常用写法:

margin-top:100px;

margin-bottom:100px;

margin-left:100px;

margin-right:100px;




margin:100px; (上下左右全部)

margin: 100px 200px; (上下/左右)

margin:25px 50px 75px;(上边距为25px 左右边距为50px 下边距为75px)

margin:0 auto; 在已知当前元素宽度时可以控制当前元素水平剧中




Padding(填充)

定义元素边框与元素内容之间的空间。

当元素的 Padding(填充)(内边距)被清除时,所"释放"的区域将会受到元素背景颜色的填充。

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用,一旦改变一切都改变。




4、display/visibility 显示/隐藏

display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏。

隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。




display常用属性

none    此元素不会被显示。

block    此元素将显示为块级元素,此元素前后会带有换行符。

inline    默认。此元素会被显示为内联元素,元素前后没有换行符。

table    此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。

inline-table    此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。

table-cell    此元素会作为一个表格单元格显示(类似 <td> 和 <th>)

inherit    规定应该从父元素继承 display 属性的值。




5、对齐类

margin: 0 auto;

position

text-align




二、样式类
1、background 背景

background-color 背景颜色

background-image 背景图像

background-repeat 背景图像 - 水平或垂直平铺

background-attachment 背景图像是否固定或者随着页面的其余部分滚动。  scroll(默认跟随滚动) fixed(固定)

background-position 设置背景图像的起始位置。

background-size 背景尺寸




background: transparent; 背景透明

2、color 颜色

color:色值

3、透明类

opacity:0.4;

只让背景色透明 background:rgba(0,0,0,0.5)

4、border边框

border: 1px solid #000000;

根据位置控制

border-left

border-right

border-top

border-bottom




border-color颜色

border-style样式 dotted点状 solid实线 double双线 dashed虚线

border-width粗细




5、字体

    font-family:"Times New Roman", Times, serif;  字体

    font-size 控制字体大小,常用值有px,em

    为了避免Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替像素。

    em的尺寸单位由W3C建议。

    1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

    因此,1em的默认大小是16px。可以通过下面这个公式将像素转换为em:px/16=em




三、伪类是用来添加一些选择器的特殊效果。

a:link {color:#FF0000;} /* 未访问的链接 */

a:visited {color:#00FF00;} /* 已访问的链接 */

a:hover {color:#FF00FF;} /* 鼠标划过链接 */

a:active {color:#0000FF;} /* 已选中的链接 */




CSS伪类

:first-child 伪类来选择元素的第一个子元素

:last-child 伪类来选择元素的最后一个子元素

:first-line 伪元素 用于向文本的首行设置特殊样式。

:before伪元素可以在元素的内容前面插入新内容。

:after" 伪元素可以在元素的内容之后插入新内容。

:first-letter 伪元素用于向文本的首字母设置特殊样式:

前端基础整理笔记 - html5初步认识(一)

流浪男 发表了文章 • 1 个评论 • 926 次浏览 • 2016-04-27 11:58 • 来自相关话题

这是平时在讲课时整理的前端笔记,分享出来供大家浏览查询。
一、webapp html5框架




<!DOCTYPE html> 定义当前页面为html5的标准模式

viewport  移动端响应式设置

format-detection  自动识别类的处理

<!DOCTYPE html>

<html>

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

    <title></title>

    </head>

    <body>

    </body>

</html>




二、html5 语义化标签




html5的布局理解为排列块的布局。标签的使用上尽量使用语义化标签。

A、布局类

1、<header></header> 页眉,通常可以用来定义页面中的顶部导航栏,<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

        等同于 <div></div>

2、<footer></footer>页脚,通常可用来定义页面中底部

        等同于<div></div>

3、<section></section>定义区段,块,节,通常可以用来定义一个大的区间

        等同于<div></div>

4、<article></article>常用在文章内容显示

        等同于<div></div>

5、<aside></aside>  定义 <article> 标签外的内容,也可以作为侧栏

6、<nav></nav>用来定义导航

7、<details></details> ,使用时与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。

        <details> 标签规定了用户可见的或者隐藏的需求的补充细节。

        <details> 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。

        <details> 元素的内容对用户是不可见的,除非设置了 open 属性。

8、<meter></meter> 类型进度显示的度量类

    <meter value="9" min="0" max="10">1</meter>

9、<audio></audio> 音频

10、<video></video> 视频 结合<track></track>可加载字幕

11、<picture></picture> 自适应图片

<picture> 

    <source media="(min-width: 650px)" srcset="images/demo1.png">

    <source media="(min-width: 465px)" srcset="images/demo2.png">

    <img src="images/demo.png">

</picture>

12、<canvas></canvas> 画布

html4

12、<div></div>

13、<p></p> 换行

14、<ul><li></li></ul> 无须列表

15、<ol><li></li></ol>有序列表

B、文字、标示类   




1、<b></b>(bold)粗体

2、<big></big>(big)大字体

3、<em><em>(emphasized)强调字

4、<i></i>(italic)斜体

5、<small></small>(small)小字体

6、<strong></small>(strong)加重语气

7、<mark></mark>    重点标记

8、<time></time> 定义时间

9、<span></span>主要用来着色

10、<h1></h1>...<h6></h6> 标题类

11、<del></del>删除线

C、表单类




input: type常用属性

        text  文本

        number  数字

        password  密码

        email 电子邮箱

        checkbox  多选

        radio 单选

        range 带有滑块的数字选择

        reset 重置表单

        hidden 隐藏

        search 搜索框(带有清除按钮)

        input时间类的可以调用原生控件

datalist

<input list="browsers"> 显示列表项

<datalist id="browsers">

  <option value="Internet Explorer">

  <option value="Firefox">

  <option value="Chrome">

  <option value="Opera">

  <option value="Safari">

</datalist>

计算输出

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

  <input type="range" id="a" value="50">100

  +<input type="number" id="b" value="50">

  =<output name="x" for="a b"></output>

</form>        

D、表格类




<table border="1">

    <caption>这事一个表格</caption>

    <thead>

        <tr>

        <th>序号</th>

        <th>标题</th>

        </tr>

    </thead>

    <tbody>

        <tr>

        <td>1</td>

        <td>表格标题</td>

        </tr>

    </tbody>

</table> 查看全部
这是平时在讲课时整理的前端笔记,分享出来供大家浏览查询。
一、webapp html5框架




<!DOCTYPE html> 定义当前页面为html5的标准模式

viewport  移动端响应式设置

format-detection  自动识别类的处理

<!DOCTYPE html>

<html>

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

    <title></title>

    </head>

    <body>

    </body>

</html>




二、html5 语义化标签




html5的布局理解为排列块的布局。标签的使用上尽量使用语义化标签。

A、布局类

1、<header></header> 页眉,通常可以用来定义页面中的顶部导航栏,<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

        等同于 <div></div>

2、<footer></footer>页脚,通常可用来定义页面中底部

        等同于<div></div>

3、<section></section>定义区段,块,节,通常可以用来定义一个大的区间

        等同于<div></div>

4、<article></article>常用在文章内容显示

        等同于<div></div>

5、<aside></aside>  定义 <article> 标签外的内容,也可以作为侧栏

6、<nav></nav>用来定义导航

7、<details></details> ,使用时与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。

        <details> 标签规定了用户可见的或者隐藏的需求的补充细节。

        <details> 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。

        <details> 元素的内容对用户是不可见的,除非设置了 open 属性。

8、<meter></meter> 类型进度显示的度量类

    <meter value="9" min="0" max="10">1</meter>

9、<audio></audio> 音频

10、<video></video> 视频 结合<track></track>可加载字幕

11、<picture></picture> 自适应图片

<picture> 

    <source media="(min-width: 650px)" srcset="images/demo1.png">

    <source media="(min-width: 465px)" srcset="images/demo2.png">

    <img src="images/demo.png">

</picture>

12、<canvas></canvas> 画布

html4

12、<div></div>

13、<p></p> 换行

14、<ul><li></li></ul> 无须列表

15、<ol><li></li></ol>有序列表

B、文字、标示类   




1、<b></b>(bold)粗体

2、<big></big>(big)大字体

3、<em><em>(emphasized)强调字

4、<i></i>(italic)斜体

5、<small></small>(small)小字体

6、<strong></small>(strong)加重语气

7、<mark></mark>    重点标记

8、<time></time> 定义时间

9、<span></span>主要用来着色

10、<h1></h1>...<h6></h6> 标题类

11、<del></del>删除线

C、表单类




input: type常用属性

        text  文本

        number  数字

        password  密码

        email 电子邮箱

        checkbox  多选

        radio 单选

        range 带有滑块的数字选择

        reset 重置表单

        hidden 隐藏

        search 搜索框(带有清除按钮)

        input时间类的可以调用原生控件

datalist

<input list="browsers"> 显示列表项

<datalist id="browsers">

  <option value="Internet Explorer">

  <option value="Firefox">

  <option value="Chrome">

  <option value="Opera">

  <option value="Safari">

</datalist>

计算输出

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

  <input type="range" id="a" value="50">100

  +<input type="number" id="b" value="50">

  =<output name="x" for="a b"></output>

</form>        

D、表格类




<table border="1">

    <caption>这事一个表格</caption>

    <thead>

        <tr>

        <th>序号</th>

        <th>标题</th>

        </tr>

    </thead>

    <tbody>

        <tr>

        <td>1</td>

        <td>表格标题</td>

        </tr>

    </tbody>

</table>

AUI中关于如何扩展和修改图标

流浪男 发表了文章 • 9 个评论 • 3049 次浏览 • 2016-04-17 22:16 • 来自相关话题

在1.2.0中,AUI将图标样式分离了出来,方便开发者进行修改。ttf字体图标的替换和修改我们可以借助一些字体编辑软件来操作BirdFont(这个也是我一直在用的),也可以另外建立ttf文件进行扩展。下面说一下如果进行扩展:
我们可以从阿里图标库 http://www.iconfont.cn/  中选择图标,并打包下载,解压后看到以下文件:





在里面我们用到有iconfont.css、iconfont.ttf,如果想使用svg的话可以一并引入。
把上面两个文件放到css文件夹中,做简单的修改,避免冲突我们需要将font-family重新命名,和删掉没用的字体文件@font-face {font-family: "自定义字体名称";
src: url('mami-iconfont.ttf') format('truetype');
}

.iconfont {
font-family:"自定义字体名称" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}其他的可以保持不变,修改完成后保存,页面使用时使用时将css文件引入,然后就可以直接<i class="iconfont icon-*"></i>来调用了。
 
下面介绍下BirdFont编辑ttf文件,编辑ttf文件时需要有一定的矢量图绘制基础,以mac的BirdFont为例:
第一步





 
 
第二步
点击指向按钮,选择要编辑的ttf文件





 
第三步,双击箭头指向方向





 
我们可以看到全部的图标了,双击一个图标进入编辑
 





 
左侧为工具栏,右侧为视图,我们可以直接用此软件编辑,也可以从外部将图标复制进来




编辑完成后,保存功能,点击右上角按钮,导出文件










 





 
OK,这样就大工告成了,希望本教程可以对你有所帮助!!!

 
 
 
 
  查看全部
在1.2.0中,AUI将图标样式分离了出来,方便开发者进行修改。ttf字体图标的替换和修改我们可以借助一些字体编辑软件来操作BirdFont(这个也是我一直在用的),也可以另外建立ttf文件进行扩展。下面说一下如果进行扩展:
我们可以从阿里图标库 http://www.iconfont.cn/  中选择图标,并打包下载,解压后看到以下文件:

QQ20160417-0@2x.png

在里面我们用到有iconfont.css、iconfont.ttf,如果想使用svg的话可以一并引入。
把上面两个文件放到css文件夹中,做简单的修改,避免冲突我们需要将font-family重新命名,和删掉没用的字体文件
@font-face {font-family: "自定义字体名称";
src: url('mami-iconfont.ttf') format('truetype');
}

.iconfont {
font-family:"自定义字体名称" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
其他的可以保持不变,修改完成后保存,页面使用时使用时将css文件引入,然后就可以直接<i class="iconfont icon-*"></i>来调用了。
 
下面介绍下BirdFont编辑ttf文件,编辑ttf文件时需要有一定的矢量图绘制基础,以mac的BirdFont为例:
第一步

QQ20160417-4@2x.png

 
 
第二步
点击指向按钮,选择要编辑的ttf文件

QQ20160417-3@2x.png

 
第三步,双击箭头指向方向

QQ20160417-5@2x.png

 
我们可以看到全部的图标了,双击一个图标进入编辑
 

QQ20160417-6@2x.png

 
左侧为工具栏,右侧为视图,我们可以直接用此软件编辑,也可以从外部将图标复制进来
QQ20160417-7@2x.png

编辑完成后,保存功能,点击右上角按钮,导出文件

QQ20160417-8@2x.png


QQ20160417-9@2x.png

 

QQ20160417-10@2x.png

 
OK,这样就大工告成了,希望本教程可以对你有所帮助!!!

 
 
 
 
 

让你的APP边框显示原生的1px

流浪男 发表了文章 • 1 个评论 • 1101 次浏览 • 2016-04-13 14:38 • 来自相关话题

面对从web到移动APP转变的开发者可能有很多小常识并不是特别熟悉,比如这个border。怎样让1px更细,看起来像原生的?下面教大家一个方法
.border {
position: relative;
width: 300px;
height: 200px;
}
.border:after {
border: 1px solid #ff3300;
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1);
pointer-events: none;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.border:after {
right: -100%;
bottom: -100%;
-webkit-transform: scale(0.5);
}
}如果是想要上边框或者下边框。。。那么只需要修改border:after里面的border就可以了。

PS:特别说明


千万别漏下了pointer-events: none;要不然就没法点击了
 
原文链接:http://www.liulangnan.com/archives/68 查看全部
面对从web到移动APP转变的开发者可能有很多小常识并不是特别熟悉,比如这个border。怎样让1px更细,看起来像原生的?下面教大家一个方法
.border {
position: relative;
width: 300px;
height: 200px;
}
.border:after {
border: 1px solid #ff3300;
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1);
pointer-events: none;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.border:after {
right: -100%;
bottom: -100%;
-webkit-transform: scale(0.5);
}
}
如果是想要上边框或者下边框。。。那么只需要修改border:after里面的border就可以了。


PS:特别说明



千万别漏下了pointer-events: none;要不然就没法点击了
 
原文链接:http://www.liulangnan.com/archives/68

【最新】AUI仿饿了么订单页面模板

流浪男 发表了文章 • 6 个评论 • 3243 次浏览 • 2016-04-13 14:27 • 来自相关话题

利用AUI Flex布局完成的放饿了么订单界面

图片效果及下载




 
利用AUI Flex布局完成的放饿了么订单界面

图片效果及下载
IMG_2107.PNG