仿oppo手机官方网站（后继部分）-原创手记-慕课网

朋友们我又来了，上一篇我看了一下，发现一个很严重的问题，就是图片无法加载出来，抱歉。如果想看最完美的效果或想要源代码的用于学习，可以加本人qq 我将源文件打包发给你.望原谅!!!
内页1——图片
<!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:43237px; margin:0 auto; background:#FFFFFF;}
#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结束*/

#wz{width:1180px; height:188px; margin:0 auto;margin-top:10px;}
#wz p{margin:0 auto; text-align:center; font-family:"微软雅黑";}
#wz p.b{color:#5B5B5B; font-size:30px; font-weight:500px; margin-bottom:20px;}
#wz p.z{color:#7B7B7B; font-size:25px;}
#wz p.back{ margin-top:20px;}
#wz p a{color:#7B7B7B; font-size:25px; text-decoration:none;}
#wz p a:hover{color:#009B72;}

#content{ height:42106px; background:#FFF;}
#content img.tu{margin:0 auto; margin-left:400px; margin-top:100px;}
#content p{width:300px; margin-left:1280px; text-align:right; line-height:170%; font-family:"微软雅黑"; font-size:18px; font-weight:bold;}
#content p span.lv{ color:#2AAD6F;}
#content p span.hui{color:#7B7B7B;}

#footer{ height:380px;}
#footer #topt{ background:#F7F7F7; width:1180px; height:345px;margin:0 auto; margin-top:35px;}
#footer #topt .tj{color:#3B3B3B; font-family:"微软雅黑"; font-size:25px; font-weight:500; text-align:center; margin:20px; }
#footer #topt dl{ float:left; margin-left:110px;}
#footer #topt dl dt{}
#footer #topt dl dd{ text-align:center; color:#898989; font-family:"微软雅黑"; font-size:18px;}

#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>
</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">
        <img src="images/logo.png" title="美因苛求" />
        <ul>
         <li><a href="index.html" target="_blank"><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 class="yd" href="#">摄影作品</a></li>
             <li><a  href="shiping.html" target="_blank">视频</a></li>
        </ul>     
    </div>
    <br class="clearf" />

    <div id="wz">
        <p class="b">OPPO手机摄影廊</p>
        <p class="z">
        旅途中、生活中，OPPO手机帮助您记录一个个精彩画面。
        <br />
    感谢O粉们的分享，在这里，您看到的都是使用OPPO手机拍摄的作品。
        </p>
        <p class="back"><a href="#">我们的作品也要出现在这里>></a></p>
    </div>

    <div id="content">
        <div>
            <img class="tu" src="images/syzp/1.jpg" title="" />
            <p>
            <span class="lv">OPPO新品 R9s</span>
            <br />
            <span class="hui">光圈数:1.7/曝光时间:1/988</span>
            </p>
        </div>
        <div>
            <img class="tu" src="images/syzp/2.jpg" title="" />
            <p>
            <span class="lv">OPPO新品 R9s</span>
            <br />
            <span class="hui">光圈数:1.77／曝光时间:4</span>
            </p>
        </div>
        <div>
            <img class="tu" src="images/syzp/3.jpg" title="" />
            <p>
            <span class="lv">OPPO R9</span>
            <br />
            <span class="hui"></span>  
            </p>          
        </div>
        <div>
            <img class="tu" src="images/syzp/4.jpg" title=""/>
            <p>
            <span class="lv">OPPO R9</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu" src="images/syzp/5.jpg" title="" />
            <p>
            <span class="lv">OPPO R9</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu" src="images/syzp/6.jpg" title="" />
            <p>
            <span class="lv">OPPO R9 Plus</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu" src="images/syzp/7.jpg" title="" />
            <p>
            <span class="lv">OPPO Find7</span>
            <br />
            <span class="hui">Global community gallery</span>
            </p>
        </div>
        <div>
            <img class="tu" src="images/syzp/8.jpg" title="" />
            <p>
            <span class="lv">OPPO 手机</span>
            <br />
            <span class="hui">Global community gallery</span>
            </p>
        </div>
        <div>
            <img class="tu" src="images/syzp/9.jpg" title="" />
            <p>
            <span class="lv">OPPO R7 Plus</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu" src="images/syzp/10.jpg" title="" />
            <p>
            <span class="lv">OPPO R7 Plus</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu" src="images/syzp/11.jpg" title="" />
            <p>
            <span class="lv">OPPO R7 Plus</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu" src="images/syzp/12.jpg" title="" />
            <p>
            <span class="lv">OPPO Find7</span>
            <br />
            <span class="hui">来自OPPO社区5月月赛</span>
            </p>
        </div>
        <div>
            <img class="tu" src="images/syzp/13.jpg" title="" />
            <p>
            <span class="lv">OPPO N3</span>
            <br />
            <span class="hui">曝光时间:1/1948s•光圈:f/2.2</span>
            </p>
        </div>
        <div>
            <img class="tu" src="images/syzp/14.jpg" title="" />
            <p>
            <span class="lv">OPPO Find7</span>
            <br />
            <span class="hui">曝光时间:8s•光圈:f/2<br />备注：使用慢速快门</span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/15.jpg" title="" />
            <p>
            <span class="lv">OPPO R5</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/16.jpg" title="" />
            <p>
            <span class="lv">OPPO N1</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/17.jpg" title="" />
            <p>
            <span class="lv">OPPO N1</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/18.jpg" title="" />
            <p>
            <span class="lv">OPPO N1</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/19.jpg" title="" />
            <p>
            <span class="lv">OPPO R7</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/20.jpg" title="" />
            <p>
            <span class="lv">OPPO N3</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/21.jpg" title="" />
            <p>
            <span class="lv">OPPO N3</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/22.jpg" title="" />
            <p>
            <span class="lv">OPPO Find7</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/23.jpg" title="" />
            <p>
            <span class="lv">OPPO Find7</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/24.jpg" title="" />
            <p>
            <span class="lv">OPPO R5</span>
            <br />
            <span class="hui">曝光时间:1/474s•光圈:f/2</span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/25.jpg" title="" />
            <p>
            <span class="lv">OPPO Find7</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/26.jpg" title="" />
            <p>
            <span class="lv">OPPO N3</span>
            <br />
            <span class="hui">曝光时间:1/10s•光圈:f/2.2</span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/27.jpg" title="" />
            <p>
            <span class="lv">OPPO N3</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/28.jpg" title="" />
            <p>
            <span class="lv">OPPO N3</span>
            <br />
            <span class="hui">曝光时间:1/3350s•光圈:f/2.2</span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/29.jpg" title="" />
            <p>
            <span class="lv">OPPO N3</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/30.jpg" title=""/>
            <p>
            <span class="lv">OPPO N3</span>
            <br />
            <span class="hui">曝光时间:1/100s•光圈:f/2.2</span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/31.jpg" title=""/>
            <p>
            <span class="lv">OPPO Find7</span>
            <br />
            <span class="hui">曝光时间:1/129s•iso:100<br />后期处理：Camera 360</span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/32.jpg" title="" />
            <p>
            <span class="lv">OPPO N3</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/33.jpg" title="" />
            <p>
            <span class="lv">OPPO Find7</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/34.jpg" title="" />
            <p>
            <span class="lv">OPPO N3</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/35.jpg" title="" />
            <p>
            <span class="lv">OPPO N3</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
        <div>
            <img class="tu"  src="images/syzp/36.jpg" title="" />
            <p>
            <span class="lv">OPPO N3</span>
            <br />
            <span class="hui"></span>
            </p>
        </div>
    </div>
    <div id="footer">
        <div id="topt">
            <p class="tj">推荐拍照手机</p>
            <dl>
                <dt><a href="#"><img src="images/syzp/series-r9.png" title="R9 你值得拥有" /></a></dt>
                <dd>R9</dd>
            </dl>
            <dl>
                <dt><a href="#"><img src="images/syzp/series-r9p.png" title="R9 Plus 你值得拥有" /></a></dt>
                <dd>R9 Plus</dd>
            </dl>
            <dl>
                <dt><a href="#"><img src="images/syzp/series-r7p.png" title="R7 Plus 你值得拥有" /></a></dt>
                <dd>R7 Plus</dd>
            </dl>
            <dl>
                <dt><a href="#"><img src="images/syzp/series-r7s.png" title="R7S 你值得拥有" /></a></dt>
                <dd>R7s</dd>
            </dl>
        </div>
        <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 src="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>
</body>
</html>