官方公告

官方公告

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

开发讨论

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

技术分享

你的开发加油站
问题反馈

问题反馈

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

特来看看流浪男大神什么时候更新框架!~

回复

indiboy 发起了问题 • 2 人关注 • 0 个回复 • 476 次浏览 • 2018-03-24 20:54 • 来自相关话题

分享一个免费空间

jinxinkai 发表了文章 • 0 个评论 • 302 次浏览 • 2018-03-15 03:21 • 来自相关话题

【1G免费全能空间,免备案,无广告】 
1G全能空间 + 100M数据库(Mysql 5.5 / SQL Server 2005) 
支持的脚本:ASP、PHP(5.2 - 7.0)、.NET(2.0 / 4.0) 
没有任何限制,详细功能请访问: 
https***://www.yunzz.net/host/free.html(云邦互联) 
推广员:ftp206616x  查看全部
【1G免费全能空间,免备案,无广告】 
1G全能空间 + 100M数据库(Mysql 5.5 / SQL Server 2005) 
支持的脚本:ASP、PHP(5.2 - 7.0)、.NET(2.0 / 4.0) 
没有任何限制,详细功能请访问: 
https***://www.yunzz.net/host/free.html(云邦互联) 
推广员:ftp206616x 

微信扫码点餐 多人点餐 实时同步

ccx520wkk 发表了文章 • 2 个评论 • 861 次浏览 • 2018-02-24 11:12 • 来自相关话题

thinkphp 5.0 商用微信扫码点餐源码,本人话费15万左右的开发费用,现在仅售3400RMB 需要的联系qq:1817703429

卖到就是赚到、微信扫码点餐技术支持,亳州点云网络科技有限公司,演示公众号: 点云网络科技;

无论你是学习还是直接使用或者二次开发都比较划算。错过了就会是你医生的遗憾。。。

数据表全部存在附件,后端基于hui_admin  语言:thinkphp5  前端:AUI  
Tb【URL】:
 
item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.594c1debH7Ae4B&id=562604542516





















































































  查看全部
thinkphp 5.0 商用微信扫码点餐源码,本人话费15万左右的开发费用,现在仅售3400RMB 需要的联系qq:1817703429

卖到就是赚到、微信扫码点餐技术支持,亳州点云网络科技有限公司,演示公众号: 点云网络科技;

无论你是学习还是直接使用或者二次开发都比较划算。错过了就会是你医生的遗憾。。。

数据表全部存在附件,后端基于hui_admin  语言:thinkphp5  前端:AUI  
Tb【URL】:
 
item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.594c1debH7Ae4B&id=562604542516

门店1副本.png


门店2.png


门店4.png


门店5.png


门店6副本.png


门店7副本.png


图片1.png


商家7副本.png


商家4.png


图片2.png


图片6.png


图片7.png


图片14.png


图片13.png


图片9.png


图片16副本.png


图片18副本.png

 

有没完整的demo

ccx520wkk 回复了问题 • 4 人关注 • 3 个回复 • 2404 次浏览 • 2018-02-24 11:06 • 来自相关话题

微信点餐 UI 开发

回复

ccx520wkk 回复了问题 • 1 人关注 • 1 个回复 • 750 次浏览 • 2018-02-24 11:06 • 来自相关话题

下拉刷新怎么用啊

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

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

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

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

aui-skin加密后用不了

回复

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

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

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

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





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

demo.gif

 

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

Chauncey 发表了文章 • 0 个评论 • 1926 次浏览 • 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 个评论 • 1613 次浏览 • 2016-08-30 17:10 • 来自相关话题

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

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

流浪男 发表了文章 • 3 个评论 • 1527 次浏览 • 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 个评论 • 1338 次浏览 • 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 个评论 • 1139 次浏览 • 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 个评论 • 1233 次浏览 • 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>