首页手记仿oppo手机官方网站（后继部分2视频内页）
仿oppo手机官方网站（后继部分2视频内页）

标签：
Html/CSS
朋友们我又来了，上一篇我看了一下，发现一个很严重的问题，就是图片无法加载出来，抱歉。如果想看最完美的效果或想要源代码的用于学习，可以加本人qq 我将源文件打包发给你.望原谅!!!
内页2——视频
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OPPO手机摄影棚-使用OPPO手机拍摄作品</title>
<style>

*{ margin:0px; padding:0px;border:none}
#box{ width:1903px; height:2000px; margin:0 auto; }
#header{ height:30px; background:#009B72;}
#header ul{ width:300px; height:30px; float:right; margin-right:300px;}
#header ul li{ list-style:none;}
#header ul li a{ text-decoration:none; float:left; line-height:30px; margin-right:10px; padding:0px 20px;color:#FFF; font-family:"微软雅黑"}
#header ul li a:hover{ background:#47B488}
/*头部样式结束*/

#nav{ height:78px; background:#FFFFFF;}
#nav img{ margin-left:290px;}
#nav ul{ float:right; margin-right:300px;}
#nav ul li{list-style:none; float:left;}
#nav ul li .sy{ color:#000;}
#nav ul li a{ color:#7B7B7B; text-decoration:none; float:left; line-height:73px; padding:0px 20px; font-family:"微软雅黑"}
#nav ul li a:hover{ border-bottom:#2AAD6F solid 5px; color:#000}
/*导航栏结束*/

#navtwo{width:1176px; height:100px; background:#FFFFFF;}
#navtwo ul{margin-left:290px; margin-top:30px;}
#navtwo ul li{list-style:none;}
#navtwo ul li a.yd{ background:#47B488; color:#FFF; margin:0 5px;}
#navtwo ul li a{ color:#000; text-decoration:none; float:left; line-height:30px; padding:10px 30px; font-family:"微软雅黑"; font-weight:600;}
#navtwo ul li a:hover{ background:#47B488; color:#FFF;}
/*导航栏two结束*/

#content{ height:1300px;}
#content .container{ width:1300px; height:1300px; margin:0 auto;}
#content .container .bj1{ width:597px; height:414px; float:left; margin:10px; 0px 10px 20px;}
#content .container .bj1 object{ margin-left:10px; }
#content .container .bj2{ width:597px; height:414px; float:right; margin:10px; 0px 10px 20px;}
#content .container .bj2 object{ margin-left:10px; }
#content .container .bj3{ width:597px; height:414px; float:left; margin:10px; 0px 10px 20px;}
#content .container .bj3 object{ margin-left:10px; }
#content .container .bj4{ width:597px; height:414px; float:right; margin:10px; 0px 10px 20px;}
#content .container .bj4 img{ margin-left:10px; margin-top:40px;}
#content .container .bj5{ width:597px; height:414px; float:left; margin:10px; 0px 10px 20px;}
#content .container .bj5 img{ margin-left:10px; margin-top:20px; }
#content .container .bj6{ width:597px; height:414px; float:right; margin:10px; 0px 10px 20px;}
#content .container .bj6 img{ margin-left:10px; margin-top:20px; }
#content .container .wz{ font-family:"微软雅黑"; font-size:20px; color:#2AAD6F; font-weight:700; margin-top:20px; margin-left:20px}

#footer{ height:400px; background:#F6F6F6; padding-top:20px;}
#footer #left{ width:1000px; margin-left:290px; margin-top:60px; margin-bottom:10px;}
#footer #left ul{ width:200px;}
#footer #left ul h4 {margin-bottom:20px;}
#footer #left ul h4 a{ color:#363636; margin-bottom:20px; text-decoration:none}
#footer #left ul h4 a:hover{color:#009B72}
#footer #left ul.tjjx{ float:left;}
#footer #left ul.zxgm{ float:left;}
#footer #left ul.fw{ float:left;}
#footer #left ul.gywm{ float:left;}
#footer #left ul li{ list-style:none;}
#footer #left ul li a{ line-height:200%; text-decoration:none;color:#363636; font-family:"黑体"}
#footer #left ul li a:hover{ color:#009B72}

#footer #right{  width:300px; float:right; margin-right:290px;}
#footer #right a img{ margin-bottom:30px;}
#footer #right p{ text-align:left; font-family:"微软雅黑";line-height:170%; color:#393939}
#footer #right p.d{ font-weight:bolder;font-size:20px;}
#footer #right p.x{ font-weight:bold;font-size:16px;}
p.ba{ margin:20px 250px; color:#7B7B7B; font-family:"微软雅黑"; font-weight:bold;}

.clearf{clear:both; font-size:1px; height:0px; line-height:0px;}
</style>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body>

<div id="box">
    <div id="header">
        <ul>
         <li><a href="denglu.html" target="_blank">登录</a></li>
          <li><a href="zhuce.html" target="_blank">注册</a></li>
           <li><a href="#">Global</a></li>
        </ul>
    </div>
    <br class="clearf" />

    <div id="nav">
        <a href="index.html"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/logo.png" title="苛求至美" /></a>
        <ul>
         <li><a href="index.html"><span class="sy">首页</span></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="#">ColorOS</a></li>
               <li><a href="#">社区</a></li>
        </ul>     
    </div>
    <br class="clearf" />

    <div id="navtwo">
        <ul>
          <li><a href="#">资讯</a></li>
           <li><a href="#">关于OPPO</a></li>
            <li><a href="tu2.html" target="_blank" >摄影作品</a></li>
             <li><a class="yd" href="shiping.html" target="_blank">视频</a></li>
        </ul>     
    </div>
    <br class="clearf" />

  <div id="content">
        <div class="container">

          <div class="bj1">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="579" height="394" id="FLVPlayer">
              <param name="movie" value="FLVPlayer_Progressive.swf" />
              <param name="quality" value="high" />
              <param name="wmode" value="opaque" />
              <param name="scale" value="noscale" />
              <param name="salign" value="lt" />
              <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Corona_Skin_3&streamName=video/R9s%E4%B8%8E%E6%9D%8E%E6%98%93%E5%B3%B0%E6%BC%94%E7%BB%8E%E6%B8%85%E6%96%B0%E7%89%88%E7%BD%97%E9%A9%AC%E5%81%87%E6%97%A5_%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BD%AC%E7%A0%81_480x320&autoPlay=false&autoRewind=false" />
              <param name="swfversion" value="8,0,0,0" />
              <!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。 -->
              <param name="expressinstall" value="Scripts/expressInstall.swf" />
              <!-- 下一个对象标签用于非 IE 浏览器。所以使用 IECC 将其从 IE 隐藏。 -->
              <!--[if !IE]>-->
              <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="579" height="394">
                <!--<![endif]-->
                <param name="quality" value="high" />
                <param name="wmode" value="opaque" />
                <param name="scale" value="noscale" />
                <param name="salign" value="lt" />
                <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Corona_Skin_3&streamName=video/R9s%E4%B8%8E%E6%9D%8E%E6%98%93%E5%B3%B0%E6%BC%94%E7%BB%8E%E6%B8%85%E6%96%B0%E7%89%88%E7%BD%97%E9%A9%AC%E5%81%87%E6%97%A5_%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BD%AC%E7%A0%81_480x320&autoPlay=false&autoRewind=false" />
                <param name="swfversion" value="8,0,0,0" />
                <param name="expressinstall" value="Scripts/expressInstall.swf" />
                <!-- 浏览器将以下替代内容显示给使用 Flash Player 6.0 和更低版本的用户。 -->
                <div>
                  <h4>此页面上的内容需要较新版本的 Adobe Flash Player。</h4>
                  <p><a href="http://www.adobe.com/go/getflashplayer"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="获取 Adobe Flash Player" /></a></p>
                </div>
                <!--[if !IE]>-->
              </object>
              <!--<![endif]-->
            </object>
            <div class="wz">R9S与李易峰演绎清新版罗马假日</div>
          </div>

          <div class="bj2">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="579" height="394" id="FLVPlayer1">
              <param name="movie" value="FLVPlayer_Progressive.swf" />
              <param name="quality" value="high" />
              <param name="wmode" value="opaque" />
              <param name="scale" value="noscale" />
              <param name="salign" value="lt" />
              <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Corona_Skin_3&streamName=video/R9%E8%AE%BE%E8%AE%A1%E7%90%86%E5%BF%B5&autoPlay=false&autoRewind=false" />
              <param name="swfversion" value="8,0,0,0" />
              <!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。 -->
              <param name="expressinstall" value="Scripts/expressInstall.swf" />
              <!-- 下一个对象标签用于非 IE 浏览器。所以使用 IECC 将其从 IE 隐藏。 -->
              <!--[if !IE]>-->
              <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="579" height="394">
                <!--<![endif]-->
                <param name="quality" value="high" />
                <param name="wmode" value="opaque" />
                <param name="scale" value="noscale" />
                <param name="salign" value="lt" />
                <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Corona_Skin_3&streamName=video/R9%E8%AE%BE%E8%AE%A1%E7%90%86%E5%BF%B5&autoPlay=false&autoRewind=false" />
                <param name="swfversion" value="8,0,0,0" />
                <param name="expressinstall" value="Scripts/expressInstall.swf" />
                <!-- 浏览器将以下替代内容显示给使用 Flash Player 6.0 和更低版本的用户。 -->
                <div>
                  <h4>此页面上的内容需要较新版本的 Adobe Flash Player。</h4>
                  <p><a href="http://www.adobe.com/go/getflashplayer"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="获取 Adobe Flash Player" /></a></p>
                </div>
                <!--[if !IE]>-->
              </object>
              <!--<![endif]-->
            </object>
            <div class="wz">R9设计理念</div>
          </div>

          <div class="bj3">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="579" height="394" id="FLVPlayer2">
              <param name="movie" value="FLVPlayer_Progressive.swf" />
              <param name="quality" value="high" />
              <param name="wmode" value="opaque" />
              <param name="scale" value="noscale" />
              <param name="salign" value="lt" />
              <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Corona_Skin_3&streamName=video/OPPOR9%E5%85%A8%E6%96%B0%E9%85%8D%E8%89%B2&autoPlay=false&autoRewind=false" />
              <param name="swfversion" value="8,0,0,0" />
              <!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。 -->
              <param name="expressinstall" value="Scripts/expressInstall.swf" />
              <!-- 下一个对象标签用于非 IE 浏览器。所以使用 IECC 将其从 IE 隐藏。 -->
              <!--[if !IE]>-->
              <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="579" height="394">
                <!--<![endif]-->
                <param name="quality" value="high" />
                <param name="wmode" value="opaque" />
                <param name="scale" value="noscale" />
                <param name="salign" value="lt" />
                <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Corona_Skin_3&streamName=video/OPPOR9%E5%85%A8%E6%96%B0%E9%85%8D%E8%89%B2&autoPlay=false&autoRewind=false" />
                <param name="swfversion" value="8,0,0,0" />
                <param name="expressinstall" value="Scripts/expressInstall.swf" />
                <!-- 浏览器将以下替代内容显示给使用 Flash Player 6.0 和更低版本的用户。 -->
                <div>
                  <h4>此页面上的内容需要较新版本的 Adobe Flash Player。</h4>
                  <p><a href="http://www.adobe.com/go/getflashplayer"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="获取 Adobe Flash Player" /></a></p>
                </div>
                <!--[if !IE]>-->
              </object>
              <!--<![endif]-->
            </object>
            <div class="wz">OPPO R9全新配色</div>
          </div>

        <div class="bj4">
         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/sp/下载 (2).jpg" title="我是你的喋喋phone-上集" />
         <div class="wz">我是你的喋喋phone-上集</div>
        </div>

       <div class="bj5">
        <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/sp/下载 (1).jpg" title="我是你的喋喋phone-下集" />
        <div class="wz">我是你的喋喋phone-下集</div>
        </div>

      <div class="bj6">
       <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/sp/下载.jpg" title="OPPO R9巴萨定制版" />
       <div class="wz">OPPO R9巴萨定制版</div>
       </div>
            <br class="clearf" />

  </div>
    <br class="clearf" />

</div>
    <br class="clearf" />

    <div id="footer">
        <div id="left">

            <ul class="tjjx">
            <h4><a href="#">推荐机型</a></h4>
            <li><a href="#">R9s</a></li>
            <li><a href="#">R9</a></li>
            <li><a href="#">R9 plus</a></li>
            <li><a href="#">A59</a></li>
            </ul>

            <ul class="zxgm">
            <h4><a href="#">在线购买</a></h4>
            <li><a href="#">手机</a></li>
            <li><a href="#">配件</a></li>
            <li><a href="#">购物指南</a></li>
            <li><a href="#">官方授权网店</a></li>
            </ul>

            <ul class="fw">
            <h4><a href="#">服务</a></h4>
            <li><a href="#">服务网点查询</a></li>
            <li><a href="#">零配件价格查询</a></li>
            <li><a href="#">云服务</a></li>
            <li><a href="#">建议反馈</a></li>
            </ul>

            <ul class="gywm">
            <h4><a href="#">关于我们</a></h4>
            <li><a href="#">关于OPPO</a></li>
            <li><a href="#">OPPO动态</a></li>
            <li><a href="#">加入我们</a></li>
            <li><a href="#">采购相关</a></li>
            </ul>

        </div>

        <div id="right">
        <a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/icon-online.png" /></a>
        <p class="d">4001-666-888</p>
        <p class="x">(24小时全国服务热线）</p>
        </div>
        <br class="clearf" />

        <hr align="center" width="1400px" size="1px" color="CFCFCF" />
        <p class="ba">© 2005 - 2016 东莞市永盛通信科技有限公司 版权所有 粤ICP备08130115号-1 联系方式:4001-666-888</p>
    </div>

</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
swfobject.registerObject("FLVPlayer");
swfobject.registerObject("FlashID");
swfobject.registerObject("FLVPlayer");
swfobject.registerObject("FLVPlayer1");
swfobject.registerObject("FLVPlayer2");
</script>
</body>
</html>
记得点赞、评论呦如果需要吱一声源码打包给你
一起学习一起进步
点击查看更多内容