仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 825|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来谈谈:CSS3+HTML5网页制造实例:网页播放器

[复制链接]
老尸 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 22:57:56 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
那么什么是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:40 | 只看该作者
直接用代码建立链接,如:可以直接输入<aherf=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
小魔女 该用户已被删除
板凳
发表于 2015-1-26 22:24:13 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
冷月葬花魂 该用户已被删除
地板
发表于 2015-2-5 04:49:00 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
谁可相欹 该用户已被删除
5#
发表于 2015-2-11 06:25:12 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
小女巫 该用户已被删除
6#
发表于 2015-3-1 23:58:21 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
若相依 该用户已被删除
7#
发表于 2015-3-11 03:24:17 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
小妖女 该用户已被删除
8#
发表于 2015-3-17 21:10:44 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
变相怪杰 该用户已被删除
9#
发表于 2015-3-25 06:32:46 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-4-26 05:00

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表