HTML 小练习（静态网页）

最新推荐文章于 2024-09-29 16:04:50 发布
最新推荐文章于 2024-09-29 16:04:50 发布
阅读量1.8k 收藏 3
点赞数 1
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/yr0215/p/7953957.html
版权 
js部分做了一些修改
css方面没有修改
html方面自己做的 
参考网址（
http://www.paulineosmont.com/  
）

<!DOCTYPE html>
<html>
   <head>

      <meta charset="utf-8" />
      <title>Person Website / HR designer</title>

      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
      <link rel="icon" href="img/favicon.png" /> 
      <link rel="stylesheet" href="css/index/pc.css" />
      <link rel="stylesheet" href="css/index/pad.css" media="all and (max-width:940px)" />
      <link rel="stylesheet" href="css/index/mobile.css" media="all and (max-width:635px)" />

   </head>
   <body>

      <section id="introduce">

         <div class="awwards"></div>

         <div id="web_designer" class="web_designer">
            <span>WEB DESIGNER</span>
         </div>
          <div id="beautiful_page" class="beautiful_page">
            <span>BEAUTIFUL PAGE</span>
         </div>

         <div id="logo" class="logo">
            <img src="img/logo.png" alt="logo">
         </div>

      </section>

      <div class="openmenu" οnclick="openMenu()"></div>

      <nav id="nav">
          <div class="menu menuworks">
             <span class="number">01</span>
             <hr />
             <span class="label">WORKS</span>
          </div>
           <div class="menu menuabout">
              <span class="number">02</span>
             <hr />
              <span class="label">ABOUT</span>
           </div>
           <div id="logosmall" class="logosmall">
              <img src="img/logo_small.png"  alt="Logo Pauline Osmont" />
           </div>
           <div id="close" οnclick="closeMenu()"></div>
           <div class="menu menublog">
              <span class="number">03</span>
              <hr />
              <span class="label">BLOG</span></div>
           <div class="menu menucontact">
              <span class="number">04</span>
              <hr />
              <span class="label">CONTACT</span>
           </div>
       </nav>

      <div id="love_bg"></div>
       <section id="love">
          <div class="content">
              <div class="item item1 maram">
                   <img src="img/maram.jpg" />
                   <div class="roll">
                       <div class="left">
                          <div></div>
                       </div>
                       <div class="right">
                          <div></div>
                       </div>
                       <div class="info_container">
                          <div class="info">
                             <h2>Maram <br>Paris</h2>
                             <div class="line"></div>
                             <div class="role">
                                <span class="role1">art direction</span>
                                <span class="role2">, logotype</span>
                             </div>
                          </div>
                       </div>
                   </div>
               </div>
               <div class="item item1 zoo">
                  <img src="img/zooecomuseum.jpg" />
                   <div class="roll">
                       <div class="left">
                          <div></div>
                       </div>
                       <div class="right">
                          <div></div>
                       </div>
                       <div class="info_container">
                          <div class="info">
                              <h2>Zoo Eco <br>Museum</h2>
                              <div class="line"></div>
                              <div class="role">
                                 <span class="role1">art direction</span>
                                 <span class="role2">, print</span>
                              </div>
                          </div>
                       </div>
                   </div>
               </div>
               <div class="item item2 clear cgi">
                  <img src="img/cgi.jpg" />
                  <div class="roll">
                       <div class="left">
                          <div></div>
                       </div>
                       <div class="right">
                          <div></div>
                       </div>
                       <div class="info_container">
                          <div class="info">
                              <h2>CGI</h2>
                              <div class="line"></div>
                              <div class="role">
                                 <span class="role1">art direction</span>
                                 <span class="role2">, web design</span>
                              </div>
                          </div>
                       </div>
                   </div>
               </div>
               <div class="item item3 antoinelestage">
                   <img src="img/antoinelestage.jpg" />
                   <div class="roll">
                       <div class="left">
                          <div></div>
                       </div>
                       <div class="right">
                          <div></div>
                       </div>
                       <div class="info_container">
                          <div class="info">
                             <h2>Antoine <br>L'Estage</h2>
                             <div class="line"></div>
                             <div class="role">
                                <span class="role1">art direction</span>
                                <span class="role2">, t-shirt design</span>
                             </div>
                          </div>
                       </div>
                   </div>
               </div>
               <div class="item item3 clear tokkun">
                   <img src="img/tokkun.jpg" />
                   <div class="roll">
                       <div class="left">
                          <div></div>
                       </div>
                       <div class="right">
                          <div></div>
                       </div>
                       <div class="info_container">
                          <div class="info">
                              <h2>Tokkun <br>Academy</h2>
                              <div class="line"></div>
                              <div class="role">
                                 <span class="role1">art direction</span>
                                 <span class="role2">, webdesign</span>
                              </div>
                          </div>
                       </div>
                   </div>
               </div>
               <div class="item item2 soulofthedeadtree">
                   <img src="img/soulofthedeadtree.jpg" />
                   <div class="roll">
                       <div class="left">
                          <div></div>
                       </div>
                       <div class="right">
                          <div></div>
                       </div>
                       <div class="info_container">
                          <div class="info">
                              <h2>Soul of the <br>Dead Tree</h2>
                              <div class="line"></div>
                              <div class="role">
                                 <span class="role1">illustration</span>
                              </div>
                          </div>
                       </div>
                   </div>
               </div>
               <div class="item item1 clear pmmt">
                   <img src="img/pmmt.jpg" />
                   <div class="roll">
                       <div class="left">
                          <div></div>
                       </div>
                       <div class="right">
                          <div></div>
                       </div>
                       <div class="info_container">
                          <div class="info">
                              <h2>PMMT</h2>
                              <div class="line"></div>
                              <div class="role">
                                 <span class="role1">Web Design</span>
                              </div>
                          </div>
                       </div>
                   </div>
               </div>
               <div class="item item1 dixon">
                   <img src="img/dixon.jpg" />
                   <div class="roll">
                       <div class="left">
                          <div></div>
                       </div>
                       <div class="right">
                          <div></div>
                       </div>
                       <div class="info_container">
                          <div class="info">
                              <h2>Batteries <br>Dixon</h2>
                              <div class="line"></div>
                              <div class="role">
                                 <span class="role1">art direction</span>
                                 <span class="role2">, web design</span>
                              </div>
                          </div>
                       </div>
                   </div>
               </div>
               <div class="item item2 clear artspire">
                   <img src="img/artspire.jpg" />
                   <div class="roll">
                       <div class="left">
                          <div></div>
                       </div>
                       <div class="right">
                          <div></div>
                       </div>
                       <div class="info_container">
                          <div class="info">
                              <h2>Art-Spire</h2>
                              <div class="line"></div>
                              <div class="role">
                                 <span class="role1">art direction</span>
                                 <span class="role2">, web design</span>
                              </div>
                          </div>
                       </div>
                   </div>
               </div>
               <div class="item item3 departementevenement">
                   <img src="img/depevt.jpg" />
                   <div class="roll">
                       <div class="left">
                          <div></div>
                       </div>
                       <div class="right">
                          <div></div>
                       </div>
                       <div class="info_container">
                          <div class="info">
                              <h2>Département <br>Evénements</h2>
                              <div class="line"></div>
                              <div class="role">
                                 <span class="role1">art direction</span>
                                 <span class="role2">, logotype</span>
                                 <span class="role3">, print</span>
                              </div>
                          </div>
                       </div>
                   </div>
               </div>
               <div class="item item3 clear lerecyclagepasapas">
                   <img src="img/lerecyclagepasapas.jpg" />
                   <div class="roll">
                       <div class="left">
                          <div></div>
                       </div>
                       <div class="right">
                          <div></div>
                       </div>
                       <div class="info_container">
                          <div class="info">
                              <h2>Le recyclage <br>pas à pas</h2>
                              <div class="line"></div>
                              <div class="role">
                                 <span class="role1">art direction</span>
                                 <span class="role2">, illustration</span>
                                 <span class="role3">, print</span>
                                 <span class="role4">, writing</span>
                              </div>
                          </div>
                       </div>
                   </div>
               </div>
               <div class="item item2 inlogia">
                   <img src="img/inlogia.jpg" />
                   <div class="roll">
                       <div class="left">
                          <div></div>
                       </div>
                       <div class="right">
                          <div></div>
                       </div>
                       <div class="info_container">
                          <div class="info">
                              <h2>InLogia</h2>
                              <div class="line"></div>
                              <div class="role">
                                 <span class="role1">web design</span>
                              </div>
                          </div>
                       </div>
                   </div>
               </div>
               <div class="item item1 clear witchatt">
                   <img src="img/witchatt.jpg" />
                   <div class="roll">
                       <div class="left">
                          <div></div>
                       </div>
                       <div class="right">
                          <div></div>
                       </div>
                       <div class="info_container">
                          <div class="info">
                              <h2>Witchatt</h2>
                              <div class="line"></div>
                              <div class="role">
                                 <span class="role1">art direction</span>
                                 <span class="role2">, logotype</span>
                              </div>
                          </div>
                       </div>
                   </div>
               </div>
               <div class="item item1 antro">
                   <img src="img/antro.jpg" />
                   <div class="roll">
                       <div class="left">
                          <div></div>
                       </div>
                       <div class="right">
                          <div></div>
                       </div>
                       <div class="info_container">
                          <div class="info">
                              <h2>Antro</h2>
                              <div class="line"></div>
                              <div class="role">
                                 <span class="role1">art direction</span>
                                 <span class="role2">, illustration</span>
                              </div>
                          </div>
                       </div>
                   </div>
               </div>
               <div class="item item2 clear origami">
                   <img src="img/origami.jpg" />
                   <div class="roll">
                       <div class="left">
                          <div></div>
                       </div>
                       <div class="right">
                          <div></div>
                       </div>
                       <div class="info_container">
                          <div class="info">
                              <h2>Origami 3D</h2>
                              <div class="line"></div>
                              <div class="role">
                                 <span class="role1">art direction</span>
                                 <span class="role2">, craft</span>
                              </div>
                          </div>
                       </div>
                   </div>
               </div>
               <div class="item item3 legrandbal">
                   <img src="img/legrandbal.jpg" />
                   <div class="roll">
                       <div class="left">
                          <div></div>
                       </div>
                       <div class="right">
                          <div></div>
                       </div>
                       <div class="info_container">
                          <div class="info">
                              <h2>Le Grand Bal</h2>
                              <div class="line"></div>
                              <div class="role">
                                 <span class="role1">art direction</span>
                                 <span class="role2">, print</span>
                              </div>
                          </div>
                       </div>
                   </div>
               </div>
          </div>
       </section>

       <footer id="footer">
           <div class="container">
               <div id="footerleft">
                   <span>Status</span>
                   <span class="work">I'm currently looking for a full-time job in Shanghai, china.<br></span>
                   <span class="contactme"><a>Contact me</a></span> 
               </div>
               <div id="footerright">
                   <span>Oh and by the way...</span>
                   <span class="work">© 2015 All rights reserved Pauline Osmont. <br>Brands mentionned above are property of their respective owner.<br></span>
                   <span class="work">Coded by</span> <a>Nicolas Tarier</a>
               </div>
           </div>
       </footer>

   </body>

   <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
   <script type="text/javascript" src="js/index.js"></script>

</html>



转载于:https://www.cnblogs.com/yr0215/p/7953957.html

Web入门初学者纯静态页面练习 HTML+CSS 布局、浮动练习
11-23
一个纯静态HTML+CSS单页面练习,牵扯布局、浮动练习。
chapter 11 Training Deep Neural Nets
boywaiter的专栏
03-07 2万+
chapter 11 Training Deep Neural Nets OReilly. Hands-On Machine Learning with Scikit-Learn and TensorFlow读书笔记 A chapter that you will never miss a single word. This note thus may miss some import conte...
HTML做一个个人博客页面（纯html代码）
最新发布
HTML网页设计
09-29 1040
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
【实验报告NO.000001】MIT 6.858 Computer System Security - Lab 1
热门推荐
arttnba3的博客
12-04 3万+
MIT 6.858 Computer System Security - Lab 1
Mask R-CNN caffe facebookresearch/Detectron
AI 图像识别
05-21 6797
https://github.com/facebookresearch/DetectronDetectronDetectron is Facebook AI Research's software system that implements state-of-the-art object detection algorithms, including Mask R-CNN. It is writ...
Adversarial Robustness
my_god2008的博客
01-16 5229
Motivation: a limitation of the (supervised) ML framework\text{: a limitation of the (supervised) ML framework}: a limitation of the (superv...
HTML + CSS 实现淘宝页面首屏静态网页项目练习.zip
12-14
HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面...
出行Sassu官网静态网页练习HTML+CSS.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
静态网页 html/css 练习素材
07-17
7月17日个人案例练习。素材、教程等来自b站：https://www.bilibili.com/video/BV14J4114768?share_source=copy_web&vd_source=243f64660b5d6b4b957716cf240fdffd
静态html网页模板13
02-23
通过这个静态HTML网页模板，大学生可以进行实战练习，将理论知识转化为实际操作，从而更好地掌握Web开发的基础技能。同时，这也是一个逐步进阶的过程，随着对HTML、CSS和JavaScript的深入理解，他们可以创建更复杂、...
品优购静态网页练习（HTML+CSS）
08-22
在本实践项目“品优购静态网页练习”中，我们将深入学习和应用HTML与CSS的基础知识，这包括HTML5和CSS3的最新特性。这个练习旨在帮助初学者或有一定基础的开发者巩固前端开发技能，通过实际操作理解网页结构与样式...
SQLZOO 07
Nicole_678的博客
02-28 248
SQLZOO 07 More JOIN operations 练习及答案
Understanding Service Oriented Architecture[quote]
Blog内容迁移至dolphin8.cn
05-19 3071
source :http://today.java.net/pub/a/today/2006/04/04/understanding-service-oriented-architecture.htmlService Oriented Architecture (SOA) promises to provide us with the ability to assemble complex
2014-2017 GAN Zoo
maweifei的博客
01-25 5225
The GAN Zoo Every week, new GAN papers are coming out and it's hard to keep track of them all, not to mention the incredibly creative ways in which researchers are naming these GANs! So, here's a l
【ZooKeeper Notes 9】ZooKeepr日志清理
weixin_34051201的博客
07-16 288
    转载请用注明：@ni掌柜 nileader@gmail.com在使用zookeeper过程中，我们知道，会有dataDir和dataLogDir两个目录，分别用于snapshot和事务日志的输出（默认情况下只有dataDir目录，snapshot和事务日志都保存在这个目录中，关于这两个目录的详细说明，请看《ZooKeeper管理员指南》）。      正常运行过程中，ZK会不断地把快照数...
first season twenty-first episode,the fake Monica!!!
xiyangxia666hui的博客
07-15 2826
[Scene: Monica and Rachel's, everyone is looking at papers.] Joey: How could someone get a hold of your credit card number? Monica: I have no idea. But look how much they spent! Rachel: Monica, would you calm down? The credit card people said that you only
【关于基于物理染的阅读材料整理】READINGS ON PHYSICALLY BASED RENDERING
poem_of_sunshine的专栏
12-06 2361
https://interplayoflight.wordpress.com/2013/12/30/readings-on-physically-based-rendering/ READINGS ON PHYSICALLY BASED RENDERING December 30, 2013Kostas Anagnostou Over the past two y
sqlzoo答案参考（全）
zhangzhezhu的博客
10-01 2万+
本文是作者在做完SQLZOO Tutorial练习后整理的答案，仅供参考。 SQLZOO目录SELECT basicsSELECT from worldSELECT from nobelSELECT in SELECTSUM and COUNTJOINMore JOINUsing NULLSelf JOIN SELECT basics Introducing the world table of...
gan zoo
啊哈的专栏
10-17 2239
The GANZoo https://sungsoo.github.io/2018/07/02/the-gan-zoo.html 3D-ED-GAN -Shape Inpainting using 3D Generative Adversarial Network and Recurrent Convolutional Networks 3D-GAN -Learning ...
221套静态网页HTML+CSS模板下载
7. 初学者的资源：对于初学者来说，221个静态网页模板提供了一个良好的学习和练习平台。通过分析和修改这些模板，初学者可以逐渐掌握HTML和CSS的基本知识，了解网页布局和设计的原则。 8. 开发者的资源：对于有经验...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值