`
85273898
  • 浏览: 4988 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

html技术之（html5标签实战）

HTMLHTML5企业应用招聘C# 
阅读更多
html5标签，纠结了这么长时间还是整出来了，下面是html代码分享下！
遇到一个问题就是删掉html5.J之后jquery写的一个简单的下拉就好了，说明IE真的落伍了！微软你要顶住！

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>html5标签的具体应用-37℃</title>
<meta name="application-name" content="" />
<meta name="msapplication-tooltip" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="">
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script type="text/javascript">

/*@cc_on(function(h,a){function l(a){for(var b=-1;++b<m;)a.createElement(i[b])}function n(a,b){if(!a.length)return"";for(var f=-1,d=a.length,e,c=[];++f<d;)e=a[f],(b=e.media||b)!="screen"&&c.push(n(e.imports,b),e.cssText);return c.join("")}var c=a.createElement("div");c.innerHTML="<z>i</z>";if(c.childNodes.length!==1){var i="abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video".split("|"),m=i.length,r=RegExp("(^|\\s)(abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video)","gi"),s=RegExp("<(/*)(abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video)","gi"),t=RegExp("(^|[^\\n]*?\\s)(abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video)([^\\n]*)({[\\n\\w\\W]*?})","gi"),o=a.createDocumentFragment(),j=a.documentElement;c=j.firstChild;var g=a.createElement("body"),k=a.createElement("style"),e;l(a);l(o);c.insertBefore(k,c.firstChild);k.media="print";var p=function(){var c=-1,b=n(a.styleSheets,"all"),f=[],d;for(e=e||a.body;(d=t.exec(b))!=null;)f.push((d[1]+d[2]+d[3]).replace(r,"$1.iepp_$2")+d[4]);for(k.styleSheet.cssText=f.join("\n");++c<m;){b=a.getElementsByTagName(i[c]);f=b.length;for(d=-1;++d<f;)b[d].className.indexOf("iepp_")<0&&(b[d].className+=" iepp_"+i[c])}o.appendChild(e);j.appendChild(g);g.className=e.className;g.innerHTML=e.innerHTML.replace(s,"<$1font");h.detachEvent("onbeforeprint",p)};h.attachEvent("onbeforeprint",p);var q=function(){g.innerHTML="";j.removeChild(g);j.appendChild(e);k.styleSheet.cssText="";h.detachEvent("onafterprint",q)};h.attachEvent("onafterprint",q)}})(this,document);;@*/

</script>
<![endif]-->
<style>

@charset "utf-8";
/*
◇ Ver:2011.04.25_10:00
◇ Manage:37℃
◇ Editor:37℃
*/
/*- Html Tags Reset -*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, figure {padding:0; margin:0; }
body {font:12px/1.5 Arial,Tahoma,Helvetica,simsun,sans-serif; color:#555; }
abbr,article,aside,bb,datagrid,datalist,details,dialog,eventsource,figure,figcaption,footer,header,mark,menu,meter,nav,output,progress,section,time {display: block; height:auto; }
table{border-collapse:collapse; border-spacing:0; }
ol, ul{list-style:none outside; }
h1, h2, h3, h4, h5, h6{font-size:100%; }
fieldset, img{border:0 none; vertical-align:middle; }
a{color:#555; text-decoration:none; }
a:hover{color:#39C; text-decoration:underline; }
em{font-style:normal; }
input, textarea{padding:2px; }
textarea{overflow-y:auto; }
input,select,textarea {font:12px Arial,Tahoma,simsun; }
button{overflow:visible; padding:0;vertical-align:middle; }
button,label{cursor:pointer; }
.clearfix:after{content:"."; height:0; visibility:hidden; display:block; clear:both; font-size:0; line-height:0; }
.clearfix{display:inline-block; }
.clearfix{display:block; }


.header,.main-page,.footer{ width:980px;margin:0 auto; overflow:hidden; display:block;}
</style>


<body>
<header class="header">  
<article class="top-header">
        <figure class="logo">
            <a href="#"><img  width="173" height="78" title="www.1000li.com,上海**电子商务科技有限公司" alt="上海**电子商务科技有限公司" src="images/logo.jpg"></a>
        </figure>
        <ul>
            <li>企业客服热线：400-000-1000</li>
            <li>韩寒</li>
            <li>退出</li>
        </ul>
</article>
<nav class="navigation">
     <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
    </ul>
    <div class="search">
        <input type="text" class="search-text" autocomplete="off" autofocus="true" name="" id="" accesskey="">
        <select name="">
          <option value="">搜产品</option>
        </select>
      <button class="search-submit" type="submit">搜索</button>
    </div>
</nav>
</header>
<section class="main-page">
    <aside class="category-wrap">
        <h3>产品库</h3>
        <dl>
            <dt>按分类</dt>
            <dd>
                <ul>
                    <li><a href="#">分类名称</a></li>
                    <li><a href="#">分类名称</a></li>
                    <li><a href="#">分类名称</a></li>
                </ul>
            </dd>
            <dt>按主题</dt>
            <dd>
                <ul>
                    <li><a href="#">主题名称</a></li>
                    <li><a href="#">主题名称</a></li>
                    <li><a href="#">主题名称</a></li>
                </ul>
            </dd>
        </dl>
        <h3>方案库</h3>
        <dl>
            <dt>全部方案</dt>
            <dd>
                <ul>
                    <li><a href="#">方案一</a></li>
                    <li><a href="#">方案二</a></li>
                    <li><a href="#">方案三</a></li>
                </ul>
            </dd>
        </dl>
    </aside>
    <article class="product-list">
        <p>尊敬的上海公司,上午好! 欢迎来到**营销系统! 如果您在使用中遇到任何问题，请及时拨打客服热线：400-000-1000。</p>
        <div class="warpper-banner">
            <ul>
                <li><a href="#"><img width="520" height="170" title="" alt="" src="images/banner.jpg"></a></li>
                <li><a href="#"><img width="520" height="170" title="" alt="" src="images/banner.jpg"></a></li>
                <li><a href="#"><img width="520" height="170" title="" alt="" src="images/banner.jpg"></a></li>
                <li><a href="#"><img width="520" height="170" title="" alt="" src="images/banner.jpg"></a></li>
            </ul>
        </div>
        <div class="wrap-news">
            <h3><a href="#">更多</a>公司新闻</h3>
            <ul>
                <li><a href="#">***营销系统上线...</a></li>
                <li><a href="#">***营销系统上线...</a></li>
                <li><a href="#">**营销系统上线...</a></li>
                <li><a href="#">**营销系统上线...</a></li>
            </ul>
        </div>
        <section class="guide-content">
            <nav class="recommend-products">
                <h3>推荐产品</h3>
                <ul>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">鲜花</a></li>
                    <li><a href="#">爱心捐赠</a></li>
                    <li><a href="#">户外</a></li>
                    <li><a href="#">更多</a></li>
                </ul>
            </nav>
            <article class="hot-sale-content">
                <ul>
                    <li>
                        <a href="#"><img width="170" height="170" title="" alt="" src="images/bann.jpg"></a>
                        <P>
                            <span><a href="#">易威斯堡运动</a></span>
                            <span>价格：180元 | 库存：充足</span>
                        </P>
                    </li>
                    <li>
                        <a href="#"><img width="170" height="170" title="" alt="" src="images/bann.jpg"></a>
                        <P>
                            <span><a href="#">易威斯堡运动</a></span>
                            <span>价格：180元 | 库存：充足</span>
                        </P>
                    </li>
                    <li>
                        <a href="#"><img width="170" height="170" title="" alt="" src="images/bann.jpg"></a>
                        <P>
                            <span><a href="#">易威斯堡运动</a></span>
                            <span>价格：<b>180</b>元 | 库存：充足</span>
                        </P>
                    </li>
                    <li>
                        <a href="#"><img width="170" height="170" title="" alt="" src="images/bann.jpg"></a>
                        <P>
                            <span><a href="#">易威斯堡运动</a></span>
                            <span>价格：<b>180</b>元 | 库存：充足</span>
                        </P>
                    </li>
                    <li>
                        <a href="#"><img width="170" height="170" title="" alt="" src="images/bann.jpg"></a>
                        <P>
                            <span><a href="#">易威斯堡运动</a></span>
                            <span>价格：<b>180</b>元 | 库存：充足</span>
                        </P>
                    </li>
                    <li>
                        <a href="#"><img width="170" height="170" title="" alt="" src="images/bann.jpg"></a>
                        <P>
                            <span><a href="#">易威斯堡运动</a></span>
                            <span>价格：<b>180</b>元 | 库存：充足</span>
                        </P>
                    </li>
                </ul>
            </article>
        </section>
      
        <section class="guide-content">
            <nav class="recommend-products">
                <h3>产品</h3>
                <span><a href="#">更多</a></span>
            </nav>
            <article class="hot-sale-content">
                <ul>
                    <li>
                        <a href="#"><img width="170" height="170" title="" alt="" src="images/bann.jpg"></a>
                        <P><a href="#">产品名称</a></P>
                    </li>
                    <li>
                        <a href="#"><img width="170" height="170" title="" alt="" src="images/bann.jpg"></a>
                        <P><a href="#">产品名称</a></P>
                    </li>
                    <li>
                        <a href="#"><img width="170" height="170" title="" alt="" src="images/bann.jpg"></a>
                        <P><a href="#">产品名称</a></P>
                    </li>
                    <li>
                        <a href="#"><img width="170" height="170" title="" alt="" src="images/bann.jpg"></a>
                        <P><a href="#">产品名称</a></P>
                    </li>
                    <li>
                        <a href="#"><img width="170" height="170" title="" alt="" src="images/bann.jpg"></a>
                        <P><a href="#">产品名称</a></P>
                    </li>
                    <li>
                        <a href="#"><img width="170" height="170" title="" alt="" src="images/bann.jpg"></a>
                        <P><a href="#">产品名称</a></P>
                    </li>
                </ul>
            </article>
        </section>
      
      
        <section class="guide-content">
            <nav class="recommend-products">
                <h3>产品</h3>
                <span><a href="#">更多</a></span>
            </nav>
            <article class="hot-sale-content">
                <ul>
                    <li>
                        <a href="#"><img width="170" height="170" title="" alt="" src="images/bann.jpg"></a>
                        <P><a href="#">方案名称</a></P>
                    </li>
                    <li>
                        <a href="#"><img width="170" height="170" title="" alt="" src="images/bann.jpg"></a>
                        <P><a href="#">方案名称</a></P>
                    </li>
                    <li>
                        <a href="#"><img width="170" height="170" title="" alt="" src="images/bann.jpg"></a>
                        <P><a href="#">方案名称</a></P>
                    </li>
                    <li>
                        <a href="#"><img width="170" height="170" title="" alt="" src="images/bann.jpg"></a>
                        <P><a href="#">方案名称</a></P>
                    </li>
                    <li>
                        <a href="#"><img width="170" height="170" title="" alt="" src="images/bann.jpg"></a>
                        <P><a href="#">方案名称</a></P>
                    </li>
                    <li>
                        <a href="#"><img width="170" height="170" title="" alt="" src="images/bann.jpg"></a>
                        <P><a href="#">方案名称</a></P>
                    </li>
                </ul>
            </article>
        </section>
      
        <section class="guide-content">
            <div class="join-information">
                <h3>加盟信息</h3>
                <p>这里是邀请加盟信息这里是邀请加盟信息</p>
            </div>
            <div class="tips">
                <h3>小技巧</h3>
                <p>这里是小技巧这里是小技巧</p>
            </div>
        </section>
      
    </article>
</section>
<footer class="footer">
    <div class="footer-nav"><a href="#">关于千礼</a><a href="#">联系我们</a><a href="#">招聘英才</a><a href="#">企业官网</a></div>
<p>Copyright&copy;2011 All Rights Reserved 版权所有&copy;</p>
<p>增值电信业务经营许可证：沪ICP备1000号</p></footer>
</body>
</html>
1
顶
2
踩
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    05-HTML5实战

    资源名称：05-HTML5实战资源目录：1、HTML5实战：图片与标签配合制作页面2、HTML实战-极客学院播放视频页面布局3、HTML5开发项目实战：照片墙4、HTML5开发项目实战：列表切换5、HTML实战-标签切换效果6、HTML5开发...

    html5游戏编程核心技术与实战-bodegas源代码

    HTML5游戏编程核心技术与实战，主要涉及的是利用HTML5这一现代网页技术进行游戏开发的知识体系。HTML5作为下一代Web标准，极大地增强了Web应用的能力，尤其是对于游戏开发，它提供了丰富的图形绘制、音频视频处理...

    HTML5项目实战 HTML5项目实战 HTML5项目实战

    本项目实战旨在通过实际的HTML5项目来深入理解和掌握这项技术。 首先，HTML5引入了新的语义化元素，如、、、和等，这些元素有助于提高网页内容的可读性和可访问性，同时也方便搜索引擎优化。在实际项目中，正确使用...

    HTML5游戏编程核心技术与实战

    本主题主要关注HTML5游戏编程的核心技术和实战应用。 1. **HTML5基础知识** HTML5是超文本标记语言的最新版本，对之前的版本进行了许多改进和扩展，包括更好的语义化标签（如、、）、离线存储（Application Cache...

    Html5项目实战

    本项目实战教程旨在帮助初学者通过HTML5、CSS和DIV技术，掌握创建美观、响应式的网站页面的技能。 HTML5是超文本标记语言（HyperText Markup Language）的第五个版本，它在HTML4的基础上进行了大量改进和扩展，提供...

    html5实战 陶国荣

    然而，可以确定的是，这本书《HTML5实战》是由陶国荣编写的，它主要聚焦于web前端开发领域，特别是HTML5的技术应用。HTML5作为最新的网页标记语言，它不仅增强了原先HTML的语义化，还加入了新的元素和属性，改善了对...

    html5项目实战

    在“HTML5项目实战”中，我们将深入探讨这个强大的技术栈，了解如何利用它来构建现代、功能丰富的Web应用。 一、HTML5基础知识 HTML5的核心在于提供更好的语义化元素，如、、、等，使得页面结构更加清晰，对搜索...

    HTML 5 CANVAS游戏开发实战

    标题中提到的“HTML 5 CANVAS游戏开发实战”涉及到的知识点包括了HTML 5技术、CANVAS元素以及游戏开发方面的实战应用。HTML 5是最新版本的超文本标记语言，它引入了诸多新的特性来增强网页的表现性能和实现更丰富的...

    HTML5详解 Html5实战

    HTML5是下一代超文本标记语言，它在2014年正式成为W3C的推荐标准，极大地丰富了Web开发的潜力。HTML5的核心目标是提高用户...通过深入学习和实践，开发者可以更好地利用HTML5技术，创造出更具创新性和交互性的Web产品。

    响应式Web设计HTML5和CSS3实战第2版_html_

    本资源——"响应式Web设计HTML5和CSS3实战第2版"——提供了深入的指导，帮助开发者理解和应用这两种技术。 HTML5作为新一代的超文本标记语言，引入了许多新特性，增强了网页的交互性和可用性。例如，新的语义化标签...

    HTML5移动前端开发基础与实战（微课版）-教案.rar

    课程将涵盖HTML5的新标签，如、、、、等，这些新元素使得文档结构更加清晰，有利于搜索引擎优化（SEO）和辅助技术（如屏幕阅读器）的使用。此外，课程还将教授如何使用Audio和Video标签来内嵌音频和视频，以及如何...

    响应式Web设计(HTML5和CSS3实战)

    在《响应式Web设计(HTML5和CSS3实战)》这本书中，你将学习如何利用这些技术进行实际的项目开发，从基础的响应式布局概念到高级的技巧，逐步构建出适应不同设备环境的网页。书中可能还会涵盖如何调试和优化响应式设计...

    html5仿京东项目页面实战

    在本项目中，“html5仿京东项目页面实战”是一个旨在教授如何使用HTML5技术来构建类似于京东电商网站的页面的实践教程。这个实战项目聚焦于前端开发，特别是HTML5的特性，以及如何将这些特性应用到实际的网页设计中...

    HTML5与CSS3实战指南

    《HTML5与CSS3实战指南》是一本向读者详细介绍这两种技术的书籍，涵盖了从基础知识到高级应用的各个方面，适合各个层次的网页设计师和开发者阅读。 HTML5，全称为HyperText Markup Language 第五版，是最新版本的超...

    HTML5移动Web开发实战教程

    通过本教程，你将深入了解这些HTML5技术，并通过实战项目练习，学会如何将它们应用于移动Web开发中，创造出高性能、用户友好的移动Web应用。无论是构建互动性强的游戏，还是打造流畅的商业应用，HTML5都能为你提供强...

    HTML5与CSS3实战指南.pdf

    根据提供的文件信息，“HTML5与CSS3实战指南.pdf”似乎是一本专注于介绍HTML5和CSS3实际应用的技术书籍。然而，从部分展示的内容来看，似乎该文档还包含了一个Java学习群的信息，这与标题和描述所暗示的主题并不一致...

    HTML5 Canvas游戏开发实战

    结合提供的"HTML5 Canvas游戏开发实战 PDF扫描版.docx"文档，深入学习将更有利于理解和掌握这些技术。同时，"网页设计总汇"可能是辅助资料，包含更多关于网页设计的相关知识，可以作为扩展阅读。

    HTML项目实战完结版

    2. HTML标签：HTML使用标签来定义页面元素，如`&lt;p&gt;`用于段落，`&lt;h1&gt;`到`&lt;h6&gt;`用于标题，`&lt;a&gt;`用于超链接，`&lt;img&gt;`用于图像，`&lt;div&gt;`用于分组元素等。每个标签都有其特定的功能和用途，掌握这些标签的用法是HTML学习...

    html5实战pdf

    本教程基于"HTML5实战pdf"，是一份面向初学者的指导资料，旨在帮助学习者快速入门HTML5的相关知识。 1. **HTML5基本结构** HTML5简化了文档类型声明，只需输入`&lt;!DOCTYPE html&gt;`即可。此外，HTML5引入了新的元素如...

Magicbox
Global site tag (gtag.js) - Google Analytics