html5经典例子-Fundamentals

最新推荐文章于 2022-11-27 19:44:16 发布

cuirqiang

最新推荐文章于 2022-11-27 19:44:16 发布

阅读量1.2k

点赞数

分类专栏： html5

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

代码：

Acme United.html

<!doctype html>
<html lang="en">
<head>
<title>HTML5 Fundamentals Example</title>
<link rel="stylesheet" href="main-stylesheet.css" />
</head>

<body >
  <header>
   <hgroup>
    <h1>Acme United</h1>
    <h2>A Simple HTML5 Example</h2>
   </hgroup>
     </header>

  <nav>
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
   </ul>
  </nav>

  <article>
   <header>
    <h1>
     <a href="#" title="Link to this post" rel="bookmark">Article Heading</a>    </h1>
   </header>
   <p>Primum non nocere ad vitam paramus tu quoque. Mutatis mutandis de gustibus et coloribus non est disputandum Ad infinitum, ad nauseum.</p>
   <section>
    <header>
     <h1>This is the first section heading</h1>
    </header>
<p>Scientia potentia est qua nocent docent ars longa, Vita brevis alea lacta est vici. P rimum non nocere quid pro quo. Audaces fortuna iuvat fortes fortuna adiuvat.</p>
   </section>
<section>
   <header>
     <h1>Second section with mark, aside, menu & figure</h1>
</header>
               <p class="next-to-aside">Ave Caesar morituri te salutant. <mark>veni, vidi, vici</mark>. Mater semper certa est, pater nunquam ignoramus et ignorabimus<br>
                ergo sum e pluribus unum.</p>
      <aside>
             <p>This is an aside that has multiple lines.Primum non nocere ad vitam paramus tu quoque. Mutatis mutandis de gustibus et coloribus non est disputandum Ad infinitum, ad nauseum.</p>
    </aside>
<menu label="File">
   <button type="button" onClick="JavaScript:alert('Clio is the Muse of History')">Clio</button>
   <button type="button" onClick="JavaScript:alert('Thalia is the Muse of Comedy')">Thalia</button>
   <button type="button" onClick="JavaScript:alert('Urania is the Muse of Astronomy')">Urania</button>
   <button type="button" onClick="JavaScript:alert('Calliope is the Muse of Epic poetry')">Calliope</button>
</menu>
  <figure><img src="stonehenge.jpg" alt="Photograph of Stonehenge" width="200" height="131">
                 <figcaption>Figure 1. Stonehenge</figcaption>
        </figure>
</section>
    <section>
    <header>
     <h1>This is a video section</h1>
    </header>
    </section><section><p><video src="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv" controls autoplay loop>
     <div class="no-html5-video"><p>This video will work in Mozilla Firefox or Google Chrome only.</p></div>

    </video></p>
   </section>
  </article>
        <footer>
  <p>© 2011 Acme United. All rights reserved.</p>
  </footer>
</body>
</html>

CSS:

* {
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
width: 800px;
margin: 0em auto;
}

header h1 {
font-size: 50px;
margin: 0px;
color: #006;
}

header h2 {
font-size: 15px;
margin: 0px;
color: #99f;
font-style: italic;
}

nav ul {
list-style: none;
padding: 0px;
display: block;
clear: right;
background-color: #99f;
padding-left: 4px;
height: 24px;
}
nav ul li {
display: inline;
padding: 0px 20px 5px 10px;
height: 24px;
border-right: 1px solid #ccc;
}

nav ul li a {
color: #006;
text-decoration: none;
font-size: 13px;
font-weight: bold;
}

nav ul li a:hover {
color: #fff;
}

article > header h1 {
font-size: 40px;
float: left;
margin-left: 14px;
}

article > header h1 a {
color: #000090;
text-decoration: none;
}

article > section header h1 {
font-size: 20px;
margin-left: 25px;
}

article p {
clear: both;
margin-top: 0px;
margin-left: 50px;
}

article p.next-to-aside {
width: 500px;
}

article > section figure {
margin-left: 180px;
margin-bottom: 30px;
}

article > section > menu {
margin-left: 120px;
}

aside p {
        position:relative;
        left:0px;
        top: -100px;
  z-index: 1;
        width: 200px;
    float: right;
     font-style: italic;
       color: #99f;
}


article > section video {
height: 200px;
margin-left: 180px;
}

article > section div.no-html5-video{
height: 20px;
text-align: center;
color: #000090;
font-size: 13px;
font-style: italic;
font-weight: bold ;
background-color: #99f;
}

footer p {
text-align: center;
font-size: 12px;
color: #888;
margin-top: 24px;
}

cuirqiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5经典例子-Fundamentals

代码：Acme United.html HTML5 Fundamentals Example Acme United A Simple HTML5 Example Home About Us Contact Us
复制链接

扫一扫