h5练手

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>练手</title>
  6     <style>
  7         * {
  8             margin: 0;
  9             padding: 0;
 10             font-family: "Microsoft YaHei UI"
 11         }
 12
 13         a {
 14             text-decoration: none;
 15         }
 16
 17         h2 {
 18             font-weight: normal;
 19             font-size: 48px;
 20             color: #f46208;
 21         }
 22
 23         p {
 24             font-size: 14px;
 25         }
 26
 27         /*header部分*/
 28         header {
 29             width: 100%;
 30             height: 95px;
 31             background-color: #2E2E2E;
 32             position: relative;
 33         }
 34
 35         header .logo {
 36             display: block;
 37             width: 141px;
 38             height: 31px;
 39             background-image: url("http://wx1.sinaimg.cn/large/006jnDrily1fh3ct85ai8j303x00vjr9.jpg");
 40             position: absolute;
 41             top: 0;
 42             bottom: 0;
 43             margin: auto 180px;
 44         }
 45
 46         header nav {
 47             float: right;
 48             margin-right: 135px;
 49         }
 50
 51         header nav a {
 52             float: right;
 53             height: 95px;
 54             line-height: 95px;
 55             padding:0 25px;
 56             color: #FFF;
 57         }
 58
 59         header nav a:hover {
 60             background-color: #f46208;
 61             color: #2E2E2E;
 62         }
 63
 64         /*banner部分*/
 65         section.banner {
 66             position: relative;
 67         }
 68
 69         section.banner img {
 70             width: 100%;
 71             height: 675px;
 72         }
 73
 74         section.banner div {
 75             position: absolute;
 76             width: 100%;
 77             top: 30%;
 78             text-align: center;
 79             color: #FFF;
 80         }
 81
 82         section.banner div h2 {
 83             font-size: 64px;
 84             color: #FFF;
 85         }
 86
 87         /*portfolio部分*/
 88         section.portfolio {
 89             text-align: center;
 90             margin-top: 120px;
 91         }
 92
 93         section.portfolio p {
 94             max-width: 850px;
 95             margin: 50px auto;
 96         }
 97
 98         section.portfolio nav a {
 99             border: 1px solid #f46208;
100             color: #f46208;
101             padding: 10px;
102             margin: 0 5px;
103         }
104
105         section.portfolio nav a:hover {
106             background-color: #f46208;
107             color: #FFF;
108         }
109
110         section.portfolio img {
111             display: block;
112             width: 100%;
113             height: 560px;
114             margin-top: 50px;
115         }
116
117         /*stats部分*/
118         section.stats {
119             max-width: 850px;
120             margin: 120px auto;
121             text-align: center;
122             overflow: hidden;
123         }
124
125         section.stats p {
126             margin: 50px auto;
127         }
128
129         section.stats .icon div {
130             width: 25%;
131             float: left;
132         }
133
134         section.stats .icon div p {
135             font-size: 18px;
136             margin: 10px 0;
137         }
138
139         section.stats .icon div span {
140             font-size: 28px;
141             color: #f46208;
142         }
143
144         /*team部分*/
145         section.team {
146             background-color: #2E2E2E;
147             text-align: center;
148             color: #FFF;
149             padding: 120px 0 100px;
150         }
151
152         section.team > p {
153             max-width: 850px;
154             margin: 50px auto;
155         }
156
157         section.team .teammate {
158             width: 950px;
159             overflow: hidden;
160             margin: 0 auto;
161         }
162
163         section.team .teammate div {
164             float: left;
165             width: 33.3%;
166         }
167
168         section.team .teammate div span {
169             display: block;
170             max-width: 240px;
171             font-size: 12px;
172             margin: 0 auto;
173         }
174
175         /*contact us部分*/
176         section.contactus {
177             margin: 95px 0 110px;
178             text-align: center;
179         }
180
181         section.contactus p {
182             max-width: 850px;
183             margin: 50px auto;
184         }
185
186         section.contactus form {
187             width: 950px;
188             margin: 0 auto;
189         }
190
191         section.contactus form input {
192             width: 460px;
193             height: 50px;
194             text-indent: 14px;
195         }
196
197         section.contactus form .fullname {
198             margin-right: 17px;
199         }
200
201         section.contactus form textarea {
202             width: 920px;
203             height: 242px;
204             margin: 15px 0;
205             padding: 14px;
206             resize: none;
207             line-height: 24px;
208         }
209
210         section.contactus form .submit {
211             background-color: #f46208;
212             border: none;
213             width: 200px;
214             height: 58px;
215             color: #FFF;
216             font-size: 18px;
217             cursor: pointer;
218             text-indent: 0;
219         }
220
221         /*footer部分*/
222         footer {
223             height: 110px;
224             background-color: #2E2E2E;
225             color: #FFF;
226             line-height: 110px;
227             text-align: center;
228         }
229     </style>
230 </head>
231 <body>
232     <!-- header部分 -->
233     <header>
234         <a href="#" class="logo"></a>
235         <nav>
236             <a href="#contactus">CONTACT US</a>
237             <a href="#team">TEAM</a>
238             <a href="#portfolio">PORTFOLIO</a>
239             <a href="#">HOME</a>
240         </nav>
241     </header>
242
243     <!-- banner部分 -->
244     <section class="banner">
245         <div>
246             <h2>Welcome to Website</h2>
247             <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit</p>
248         </div>
249         <img src="http://wx3.sinaimg.cn/large/006jnDrily1fh3ct7pwaxj312w0im7bl.jpg" alt="banner">
250     </section>
251
252     <!-- portfolio部分 -->
253     <section class="portfolio" id="portfolio">
254         <h2>P o r t f o l i o</h2>
255         <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmodtempor incididunt ut labore et dolore magna aliqua.ut enim ad minim veniam</p>
256         <nav>
257             <a href="">ALL</a>
258             <a href="">WEB</a>
259             <a href="">SOFTWARE</a>
260             <a href="">WORKS</a>
261             <a href="">BRANDS</a>
262         </nav>
263         <img src="http://wx2.sinaimg.cn/large/006jnDrily1fh3ct8yahjj312w0flh26.jpg" alt="图片展示">
264     </section>
265
266     <!-- stats部分 -->
267     <section class="stats">
268         <h2>S t a t s</h2>
269         <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmodtempor incididunt ut labore et dolore magna aliqua.ut enim ad minim veniam</p>
270         <div class="icon">
271             <div class="margins">
272                 <img src="http://wx3.sinaimg.cn/large/006jnDrily1fh3ct9a5mnj301c01gmx1.jpg" alt="margins">
273                 <p>Margins</p>
274                 <span>1 2 , 0 0 0</span>
275             </div>
276             <div class="completed">
277                 <img src="http://wx4.sinaimg.cn/large/006jnDrily1fh3ct9pv5tj301h01gt8l.jpg" alt="completed">
278                 <p>Completed</p>
279                 <span>5 , 6 8 1</span>
280             </div>
281             <div class="projects">
282                 <img src="http://wx1.sinaimg.cn/large/006jnDrily1fh3cta2vvkj301s01fq2u.jpg" alt="projects">
283                 <p>Projects</p>
284                 <span>4 3 2</span>
285             </div>
286             <div class="customers">
287                 <img src="http://wx2.sinaimg.cn/large/006jnDrily1fh3ctaewbgj301w01fglh.jpg" alt="customers">
288                 <p>Customers</p>
289                 <span>8 6</span>
290             </div>
291         </div>
292     </section>
293
294     <!-- team部分 -->
295     <section class="team" id="team">
296         <h2>T e a m</h2>
297         <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmodtempor incididunt ut labore et dolore magna aliqua.ut enim ad minim veniam</p>
298         <div class="teammate">
299             <div class="abigail">
300                 <img src="http://wx2.sinaimg.cn/large/006jnDrily1fh3ctar83yj305u05kdgh.jpg" alt="abigail">
301                 <p>Abigail</p>
302                 <span>Lorem ipsum dolor sit amet,consectetur adipisic</span>
303             </div>
304             <div class="andy">
305                 <img src="http://wx1.sinaimg.cn/large/006jnDrily1fh3ctb2y0rj305t05kq3p.jpg" alt="andy">
306                 <p>Andy</p>
307                 <span>Lorem ipsum dolor sit amet,consectetur adipisic</span>
308             </div>
309             <div class="jacqueline">
310                 <img src="http://wx2.sinaimg.cn/large/006jnDrily1fh3ctbg1rmj305z05k0th.jpg" alt="jacqueline">
311                 <p>Jacqueline</p>
312                 <span>Lorem ipsum dolor sit amet,consectetur adipisic</span>
313             </div>
314         </div>
315     </section>
316
317     <!-- contact us部分 -->
318     <section class="contactus" id="contactus">
319         <h2>C o n t a c t　U s</h2>
320         <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmodtempor incididunt ut labore et dolore magna aliqua.ut enim ad minim veniam</p>
321         <form action="">
322             <input type="text" class="fullname" placeholder="Full Name">
323             <input type="email" class="email" placeholder="Email">
324             <textarea placeholder="Message"></textarea>
325             <input type="submit" class="submit" value="Submit Message">
326         </form>
327     </section>
328
329     <!-- footer部分 -->
330     <footer>Copyright ? 2016.company name</footer>
331 </body>
332 </html>

时间： 2024-08-28 06:28:47

h5练手的相关文章

练手项目之image caption问题记录

小白一个,刚刚费了老大的劲完成一个练手项目--image caption,虽然跑通了,但是评估结果却惨不忍睹.于是贴上大神的作品,留待日后慢慢消化.顺便记录下自己踩坑的一些问题. 先膜拜下大神的作品. 本次项目采用的模型结构如下.一路输入信息是利用VGG16提取的图像特征,另一路输入信息是利用LSTM提取的单词串特征,输出是预测的下一个单词.即模型的功能是,在给定图像特征和caption前面若干个单词的情况下,能预测出caption的下一个单词:所以循环若干次后即可得到一句完整的caption.

Java制作最难练手速游戏，Faker都坚持不了一分钟

想练手速,来啊,互相伤害啊 Java制作最难练手速游戏,目测Faker也坚持不了一分钟制作思路:只靠Java实现.Java.Java.Java.Java.Java.Java.Java.Java.Java.Java.Java.Java.Java.Java.Java.Java.Java.Java.Java.Java.Java.Java.Java. 字母模型应该是整个游戏的主角,因为整个游戏过程中都涉及到它的运动,比如坠落,消失,产生等,首先应该考虑字母随即出现的位置,在游戏中不断下落,计算下落的高

java 水题练手汇总

最近学java,会陆续找点水题练手. 题目链接 1 import java.util.*; 2 import java.awt.*; 3 import java.math.*; 4 5 public class Main { 6 7 public static void main(String args[]) { 8 Scanner cin=new Scanner(System.in); 9 int n, i; 10 int f[] = new int[35]; 11 f[0] = 0; 12

KMP算法的定义及KMP练手题 HDU 1711 Number Sequence （我的模板代码）

题意:就是要你来找出b数组在a数组中最先匹配的位置,如果没有则输出-1 思路:直接KMP算法(算法具体思想这位牛写的不错http://blog.csdn.net/v_july_v/article/details/7041827) AC代码: #include<cstdio> #include<cstring> #include<stdlib.h> #include<iostream> using namespace std; #define maxn 100

练手小游戏（代码篇之逻辑杂篇

其实呢,我这游戏就有一个简单的AI框架,其他的呢我就一起走了吧,写的还是挺乱的. 比较重要的就是玩家控制类PlayerController~~~ 这里其实我把几个模块都写在一起了,比如输入控制(InputController),动画控制(AnimatorController),还有角色控制因为就是一个练手的,不用把各个平台的输入信息都整合了,所以InputController就不写了. 我感觉动画控制和角色控制的分界线很微妙,所以也就写一起了~ 走代码备注很全 //人物控制脚本 public

PYTHON POST练手

闲着无事跟着某同学在hackinglab.cn上做两道脚本题练手就是模拟POST发包而已 4-大致上是每次访问index.php相对应一个验证码,只要不重新访问这个页面,用同一个验证码即可.于是代码模拟访问这个页面,获取cookie,再暴力密码post 11-思路相近,查看源码推测是post到vcode.php对应一个验证码,所以暴力之前post到这个php一次 PS:需要暴力两个电话号码 #!/bin/env python import urllib, urllib2, cookielib

练手题，没事就来AC吧 poj 4044 Score Sequence

此题为12年金华邀请赛A题克隆了下比赛,A题最简单,也是最挑战人数据处理能力的一题,可惜自己数据处理能力太弱久久不能写出代码---- 总结下就是题做少了,平时应多做题,少灌水,应放下看电影的时间,玩各种软件的时间先做好一项再说才是正道,看到一句话说得好 " 人有两条路要走,一条是必须走的,一条是想走的,你必须把必须走的路走漂亮,才可以走想走的路..." 不扯了,贴代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Python之路【第二十四篇】：Python学习路径及练手项目合集

Python学习路径及练手项目合集 Wayne Shi· 2 个月前参照:https://zhuanlan.zhihu.com/p/23561159 更多文章欢迎关注专栏:学习编程. 本系列Python技术路径中包含入门知识.Python基础.Web框架.基础项目.网络编程.数据与计算.综合项目七个模块.路径中的教程将带你逐步深入,学会如何使用 Python 实现一个博客,桌面词典,微信机器人或网络安全软件等.完成本路径的基础及项目练习,将具备独立的Python开发能力. 完整的Python学

（练手备忘）汇编实现将输入的字符串中的空格去掉后反序输出

功能:任意输入一个字符串,去掉其中的空格后反序输出注:使用 int 21h 里的 0AH 功能输入一个字符串时,字符串的第一个字节存储的是字符串的最大长度,第二个字节存储的是实际读入字符的个数编译器使用的是MASMPlus ;#Mode = DOS MAXLEN = 64 ;设置字符串的最大长度 SPACE = ' ' ;空格 datasg segment buffer db MAXLEN+1,0,MAXLEN+1 dup(0) ;字符串输入缓冲区 string db MAXLEN+3 d