fun*_*ect 1 javascript forms video html5 ogg
我想在这里模仿Spotify的登陆页面:https://www.spotify.com/uk/video-splash/？ utm_source = sparkify&utm_medium = web&utm_campaign = start
我对编码很新,但之前创建了一些着陆页,但从来没有以HTML和视频为背景.
我想要与Spotify相同的布局,没有滚动功能或声音.然后,我想能够点击按钮,并有一个人可以填写并提交的表格.不太清楚如何去做.
TLDR:
HTML 5 WITH CSS FIX | 没有Jquery需要或java
我继续为你设计了一些标记,所以至少你有一些东西可以开始.您可以复制此代码并使用它.你的CSS中有一些关键点可以使用,请记住这一点,你会做得很好:
/* YOUR CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
#wrapper {
position: absolute;
top: 0;
left: 0;
border: 0;
z-index: 1; /* <-- this plays a key roll for it to work */
width: 100% !important /* <-- this plays a key roll for it to work */
height: 100%;
margin:0;
padding:0;
}
/* Your can customize any div how ever you want this is just an example */
#login {
position: absolute;
z-index:2; /* <-- this plays a key roll for it to work */
left:45%;
top:60%;
width:250px;
height:100px;
background-color: rgba(255,255,255,1.0);
background: -webkit-linear-gradient(top, rgba(255,255,255,0.8), rgba(99,99,99,0.8)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(top, rgba(255,255,255,0.8), rgba(99,99,99,0.8)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(99,99,99,0.8)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(99,99,99,0.8)); /* Standard syntax (must be last) */
border-radius:7px;
}
#login a{
color:#fff;
text-decoration:none;
font-size:30px;
}
#login p{
padding-top:35px;
padding-left:18px;
}
/* Your can customize any div how ever you want this is just an example */
#footer {
position:fixed;
bottom:0;
width:100%;
height:50px;
background-color: rgba(0,0,0,0.8);
z-index:3; /* <-- this plays a key roll for it to work */
}
#footer p{
text-align:center;
color:#fff;
padding-top:10px;
}<html>
<body>
<!--Place your video right after the body tag-->
<!--Notice the id="wrapper" is placed in the <video id="wrapper"></video>-->
<video id="wrapper" autoplay loop ?wmode=transparent>
<source src="http://sectorvi.com/yourmovie.mp4" type="video/mp4">
</video>
<div id="login"><p><a href="#">JOIN FOR FREE</a></p></div>
<div id="footer"><p>Remember this will only work if you have fixed or absolute postions with enables you to use z-index. ~ Jonathan Bellavaro</p></div>
</body>
</html>您可以在此处查看:http://sectorvi.com/stackoverflow-funitect.html
希望这能为您提供一个良好的开端.
| 归档时间： |
|
| 查看次数： |
6809 次 |
| 最近记录： |