本帖最后由 llw12311 于 2019-3-29 18:53 编辑
测试基础班学习了一些关于前端的基础知识，现在来把它们糅合一下吧
用所学知识做了一个页面，带一点动画效果、音频和文字阴影效果。初学者，请大牛不要嫌弃，手下留情哈！ 链接：http://127.0.0.1:8020/%E4%BD%9C%E4%B8%9A/day4/%E6%8B%93%E5%B1%95.html?__hbt=1553819717670
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>开心一下</title>
<style type="text/css">
div{margin: 0px 0px 0px 0px;}
p{font-size: 30px;}
body{background: palevioletred;}
p{text-shadow: 2px 2px 3px white;}
h1{text-shadow: 2px 2px 5px white;}
img{margin: 50px 100px 50px 100px; border: 1px solid gainsboro;
border-radius: 15px; box-shadow: 3px 3px 50px papayawhip;
animation: dh 1s alternate infinite;
}
@keyframes dh{
from{transform: scale(1) rotate(0deg) translate(0px,0px);}
to{transform: scale(0.8) rotate(360deg) translate(30px,50px);}
}
</style>
</head>
<body>
<div>
<audio controls="controls" autoplay="autoplay" loop="loop">
<source src="yinyue.mp3"></source>
<source src="yinyue.ogg"></source>
</audio>
</div>
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
<h1>面试</h1>
<p> 程序员面试：一个程序员去一家公司面试，面试官拿着他的简历说：“你不是16年毕业的吗，按道理来说不是才有两年工作经验吗，简历上怎么写着三年经验啊”，然后程序员语重心长说道：“多的一年是我的加班”。面试官顿时竟无语凝噎，默默点头不说话。</p>
</body>
</html>
|
|
收藏
淘帖
踩
