学习
实践
活动
专区
工具
TVP
写文章

html5+css3的小程序设计

HTML(超文本标记语言)主要是做静态网页,随着html5 的出现更加丰富和拓展了静态网页所做出来的效果。

css主要是针对HTML的标签的修饰,通过修饰能够做出更加规整和美观的界面。

以下是小弟我自己做的一个小程序的截图和源代码,还请各位大佬批评指正:

正常情况下的布局

触摸以后进行的旋转

源代码:

摇摆的相册

body{

margin:0;/*样式初始化*/

}

ul{

margin:0;

padding:0;

}

.top{

margin:50px auto;

width:550px;

height:85px;

text-align:center;

background-color:#d3c5d3;

}

.top p{

padding:10px;

font-size:40px;

color:#33ffff;

}

.box{

margin:auto;

/* padding-top:20px; */

width:1000px;

height:280px;

border:2px #ccffff dotted;

border-radius:20px;

}

.sub-box li{

list-style-type:none;

width:250px;

height:280px;

float:left;

transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);

transform:.5s;

}

.sub-box li img{

width:250px;

height:280px;

border-radius:20px;

}

.sub-box li:hover img{/*伪类--鼠标移上去是什么样的*/

transform:rotateZ(360deg) rotateY(360deg) rotateX(360deg);

transition:1s;

}

摇摆的相册

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180308G19H6600?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券