仓酷云

标题: 来谈谈：CSS3+HTML5网页制造实例:网页播放器 [打印本页]

作者: 老尸 时间: 2015-1-15 22:57
标题: 来谈谈：CSS3+HTML5网页制造实例:网页播放器
那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？
破洛洛文章简介：CSS3绘制复杂的播放器按钮.
相干文章：HTML5和css3实例:制造HTML5网页视频播放器
比来入手下手进修html5+css3,实习下css3，绘制了几个播放器的按钮，有甚么更好的倡议，看人人指出……
<!DOCTYPE>

<html>

<head>

<metacharset="utf-8"/>

<style>

body{

background:#000;

}

header{

font-family:"MicroSoftYaHei";

font-size:30px;

color:#990000;

}

.circle{

width:120px;

height:120px;

-webkit-border-radius:60px;

-moz-border-radius:60px;

border-radius:60px;

border:2px#FFFsolid;

float:left;

margin:10px;

cursor:pointer;

}

.circle:hover,.circle1:hover{

-webkit-box-shadow:rgba(255,255,255,0.6)0015px;

-moz-box-shadow:rgba(255,255,255,0.6)0015px;

box-shadow:rgba(255,255,255,0.6)0015px;
}

.circle1{

width:140px;

height:140px;

-webkit-border-radius:70px;

-moz-border-radius:70px;

border-radius:70px;

border:2px#FFFsolid;

float:left;

cursor:pointer;

}

.triangleRight{

width:0;

height:0;

border-left:60pxsolid#FFF;

border-top:30pxsolidtransparent;

border-bottom:30pxsolidtransparent;

-webkit-transform:scale(0.6,1.2);

-moz-transform:scale(0.6,1.2);

transform:scale(0.6,1.2);

}

.next1{

margin:30px-10px020px;

float:left;

}

.next2{

margin:30px00-20px;

float:left;

}

.triangleleft{

width:0;

height:0;

border-Right:60pxsolid#FFF;

border-top:30pxsolidtransparent;

border-bottom:30pxsolidtransparent;

-webkit-transform:scale(0.6,1.2);

-moz-transform:scale(0.6,1.2);

transform:scale(0.6,1.2);

}

.pre1{

margin:30px-10px010px;

float:left;

}

.pre2{

margin:30px00-20px;

float:left;

}

.pause{

width:20px;

height:80px;

background:#FFF;

float:left;
}

.pause1{

margin:30px10px040px;

}

.pause2{

margin:30px10px010px;

}

</style>

</head>

<body>

<header>播放器按钮</header><section>

<divclass="circle">

<divclass="triangleLeftpre1"></div>

<divclass="triangleLeftpre2"></div>

</div>

<divclass="circle1">

<divclass="pausepause1"></div>

<divclass="pausepause2"></div>

</div>

<divclass="circle">

<divclass="triangleRightnext1"></div>

<divclass="triangleRightnext2"></div>

</div>

</section>

</body>

</html>
</p>
可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

作者: 蒙在股里 时间: 2015-1-17 19:56
直接用代码建立链接，如：可以直接输入<aherf=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

作者: 小魔女 时间: 2015-1-26 22:24
直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

作者: 冷月葬花魂 时间: 2015-2-5 04:49
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

作者: 谁可相欹 时间: 2015-2-11 06:25
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 小女巫 时间: 2015-3-1 23:58
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 若相依 时间: 2015-3-11 03:24
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

作者: 小妖女 时间: 2015-3-17 21:10
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 变相怪杰 时间: 2015-3-25 06:32
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

欢迎光临仓酷云 (http://www.ckuyun.com/)