html5案例分析 html5小案例

转载

字节墨海星 2023-10-18 07:39:17

文章标签 html5案例分析 python javascript ViewUI html 文章分类 HTML5 移动开发

1.第一个小实例是编写简易的百度首页

<!DOCTYPE html>
 <meta http-equiv="Content-Type" content="text/html; chartset=UTF-8">
 <html>
 <head>
     <style type="text/css">
     .div1{
         text-align: center;
     }
     .div2{
         text-align: center;
         width:600px;
         height: 30px;
         margin: 0 auto;
     }
     .div3{
         text-align: center;
     }
     input[type=button] {
       appearance:button; /* 将元素呈现为按钮 */
       -moz-appearance:button; /* Firefox */
       -webkit-appearance:button; /* Safari 和 Chrome */
       box-sizing:border-box;    /* 令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中 */
       -moz-box-sizing:border-box; /* Firefox */
       -webkit-box-sizing:border-box; /* Safari */;
       padding: 0;
       width: 100px;
       height: 50px;
     }
     ul{
         list-style-type: none;
     }
     li{
         float: left;
         width: 60px;
     }
     </style>
     <script type="text/javascript">
     </script>
 </head>
 <body>
     <div>
             <div class="div1">
                 <img src="http://www.baidu.com/img/bdlogo.gif" />
             </div>
             <div class="div2">
                 <ul>
                     <li><a href="">新闻</a></li>
                     <li><a href="http://www.baidu.com/">网页</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="http://map.baidu.com/">地图</a></li>
                 </ul>
             </div>
             <div class="div3">
                 <input style="width:600px; height:30px;" />
                 <input id="input2" type="button" value="百度一下" />
             </div>
     </div>
 </body>
 </html>

这里遇到的一个坑，<input class="input2" type="button" value="百度一下"/>这一行设置的input高度只在IE浏览器中生效，而其它Safari、Chrome等浏览器则无法显示给定的行高。所以需要在css中增加appearance的说明，将元素呈现为button。

结果显示：

html5案例分析 html5小案例_html5案例分析

2.一个带视频、图文、超链接的例子

<!DOCTYPE HTML>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <html>
 <head>
 <style type="text/css">
     body{text-align:center} 
 </style>
 </head>
 <body>
     <div class="alldiv" style="margin:0 auto;width:600px;height:200px">
         <div style="margin:0 auto;">
             <script type="text/javascript">
                 if(localStorage.pagecount){
                     localStorage.pagecount = Number(localStorage.pagecount) + 1;
                 }
                 else{
                     localStorage.pagecount = 1;
                 }
                 document.write("页面访问统计：" + localStorage.pagecount);
             </script>
             <h1>

哪凉快哪待着去，夏天也就25度左右！

</h1>
             <div>
                 <div>

<p align="center">这几天，“哪凉快哪呆着去”，真不是一句骂人的话，这绝对是最真挚的关怀，最深藏不露的爱。小编特别搜罗了几个夏天也就25度左右的清凉避暑胜地。</p>

<br />
                     <a style="text-decoration:none;color:black;cursor:default; font-weight: bold; font-size:20px;">
                         1. 阿尔山 梦幻的地方
                     </a>
                     <p><span>

一望无垠的大草原，广袤无边的大森林，惊险刺激的冰雪，汩汩流淌的温泉，每每提起这些，你也许很快就会联想到内蒙古、大兴安岭、哈尔滨……但你知道吗？在北国边城有这样一个神奇的地方：著名的四大草原在这里交汇，巍巍的大兴安岭在这里驻足，全国首屈一指的冰雪资源在这里厚积，世界最大的温泉群在这里流淌了几个世纪。它就是位于中蒙边界的内蒙古阿尔山市。

</span></p>
                     <img src="1.jpg" style="width:90%; height:90%;"></img>
                     <br />
                     <p><span>阿尔山温泉滑雪场</span></p> 
                     <p><span>地址：内蒙兴安阿尔山内蒙古兴安盟阿尔山滑雪场 </span></p> 
                     <p><span>门票：80元</span></p> 
                     <br />
                     <br />
                     <a style="text-decoration:none;color:black;cursor:default; font-weight: bold; font-size:20px;">
                         2. 博斯腾湖 “世外桃源”
                     </a>
                     <p>博斯腾湖与雪山、湖光、绿洲、沙漠、奇禽、异兽同生共荣，互相映衬，组成丰富多彩的风景画卷。<span style="color:blue;">大湖水域辽阔，烟波浩淼，天水一色，被誉为“沙漠瀚海中的一颗明珠”。小湖区，苇翠荷香，曲径邃深，被誉为“世外桃源”。</span></p>
                     <img src="2.png" style="width:480px; height:320px;"></img>
                     <br />
                     <p><span>博斯腾湖</span></p> 
                     <p><span>地址：新疆新疆库尔勒市博斯腾湖</span></p> 
                     <p><span>门票：45元</span></p> 
                     <br />
                     <br />
                 </div>
                 <div>
                     <p><span>下面请欣赏MV《小幸运》：</span>
                         <video src="小幸运.mkv" controls="controls" loop="loop" width="640px" height="480px"></video>
                     </p>
                     <br />
                     <br />
                 </div>
                 <div>                                      
                     </p>
                     <br />
                     <br />
                 </div>
             </div>
         </div>
     </div>
 </body>
 </html>

图片资源：

html5案例分析 html5小案例_ViewUI_02