首页手记 html+css仿oppo手机官方网站

html+css仿oppo手机官方网站

标签：

Html/CSS

首先说明我只是一个刚学习一个月的新手小白，代码格式等一些方面没有标准规范，望谅解！我最讨厌磨叽的人了，话不多说，在这里给大家奉上前几天做的oppo手机官方网站。

oppo手机官方网站

主页面

<!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手机官网』</title>
<style>
*{ margin:0px; padding:0px;border:none;}
#box{ width:1920px; height:1618px; margin:0 auto; background:#F6F6F6;}
#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}
/*导航栏结束*/

#bananer{ height:800px; background:#009B72;}
#bananer img.biglogo{Visibility:-1;}

#tu{ background:#FFFFFF; height:340px; padding-top:5px;}

#footer{ height:380px; background:#F6F6F6;}
#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>
<audio class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="video/0+2+1.MP3" hidden="true" autoplay="autoplay" loop="loop"></audio>
<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="bananer">
        <marquee direction="right" onmousemove="this.stop()" onmouseout="this.start()" scrollamount="30">
            <a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/bananer/width_pic1.jpg" title="R9s 新品开售" /></a>
            <a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/bananer/width_pic2.jpg" title="双11 新PHONE暴" /></a>
            <a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/bananer/width_pic3.jpg" title="A59S 1600万金属自拍神器" /></a>
            <a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/bananer/width_pic4.jpg" title="黑色版 久等了" /></a>
        </marquee>
    </div>
    <div id="tu">
     <a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/tu/2016101908101158076d6bb2a9b.jpg" title="OPPO R9s 全新旗舰级摄像头" /></a>
     <a href="tu2.html" target="_blank"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/tu/2016101902105258070cc86da6b.jpg" title="这一刻 更清晰" /></a>
     <a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/tu/2016102003104158087085cad6a.jpg" title="ColorOS 3.0 这一次 更安全" /></a>    
    </div>

    <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>
</body>
</html>

登录页面

<!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手机官网』-登录</title>
<style>
*{ padding:0; margin:0;border:none}
#box{width:1903px;height:900px; margin:0 auto; background:#FBFBFB; border:none;}

#nav{height:34px;background:#2AAD6F;}
#nav ul{ width:400px; height:34px; float:left; margin-left:280px;}
#nav ul li{ list-style:none;}
#nav ul li a{ text-decoration:none; float:left; line-height:34px; margin-right:15px; padding:0px 20px;color:#FFF; font-family:"微软雅黑"}
#nav ul li a:hover{ background:#47B488}

#content{ height:613px;}
#content #zj{width:500px; margin:0 auto; margin-top:90px;}
#content #zj img{ margin-left:170px;}
#content #zj p{ text-align:center; font-family:"微软雅黑"}
#content form.one{ width:280px; margin:0 auto; margin-top:90px;}
#content form.one input{ width:260px; height:40px;border:#E2E2E2 solid 2px;}
#content form.one input.txt{ margin-bottom:15px; color:#C5C5C5;}
#content form.one input.pass{}
#content #mm{ width:150px; margin-left:950px; margin-top:15px; font-family:"微软雅黑";}
#content #mm p a{ color:#00925F; font-size:16px; text-decoration:none;}
#content #mm p a:hover{ border-bottom:#00925F solid 2px;}
#content #an form.two{ width:280px; margin:0 auto; margin-top:90px;}
#content #an form.two input{ width:260px; height:40px;}
#content #an form.two input.sub{ width:260px; height:40px; background:#2AAD6F; border:none; margin-bottom:15px; color:#FFF;}
#content #an form.two input.sub:hover{ background:#47B488;}
#content #an form.two input.but{ border:E2E2E2 solid 1px; background:#FFF; border:none; border:#E2E2E2 solid 1px;}
#content #an form.two input.but:hover{ background:#E1E1E1;}

#footer{ margin-left:670px;}
#footer .lx{ margin-bottom:15px;}
#footer .qtdl{ margin-left:180px;}
#footer .qtdl a img{ margin-right:10px;}
#footer .ba{color:#7B7B7B; margin-top:15px; font-family:"微软雅黑";}

</style>
</head>

<body>

<div id="box">
    <div id="nav">
        <ul>
         <li><a href="#">OPPO官网</a></li>
          <li><a href="#">OPPO社区</a></li>
           <li><a href="#">ColorOS</a></li>
        </ul>    
    </div>
    <div id="content">
        <div id="zj">
        <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/logo.png" />
        <p>登录OPPO帐号可享受更多的服务</p>
        </div>
        <form class="one" action="#" method="post">
         <input type="text" value="请输入手机号码/邮箱/用户名" class="txt" />
         <br />
         <input type="password" class="pass" />
        </form>
        <div id="mm">
        <p><a href="#">找回密码</a>丨<a href="#">账号申诉</a></p>
        </div>
        <div id="an">
        <form class="two" action="#" method="post">
         <input type="submit" value="登录" class="sub" />
         <br />
         <input type="button" value="注册OPPO账号" class="but" />
        </form>

        </div>
    </div>
    <div id="footer">
    <img class="lx" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/X.gif" />
    <br />
    <span class="qtdl">
    <a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/qq.jpg" /></a>
    <a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/xl.jpg" /></a>
    <a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/zfb.jpg" /></a>
    <a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/wx.jpg" /></a>
    </span>
    <p class="ba">© 2005 - 2016 东莞市永盛通信科技有限公司 版权所有 粤ICP备08130115号-1</p>
    </div>
</div>
</body>
</html>

注册页面

<!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手机官网』-注册</title>
<style>
*{ padding:0; margin:0;border:none}
#box{width:1654.78px;height:905.98px; margin:0 auto; background:#FBFBFB; border:none;}

#nav{height:34px;background:#2AAD6F;}
#nav ul{ width:400px; height:34px; float:left; margin-left:280px;}
#nav ul li{ list-style:none;float:left;}
#nav ul li a{ text-decoration:none; float:left; line-height:34px; margin-right:15px; padding:0px 20px;color:#FFF; font-family:"微软雅黑"}
#nav ul li a:hover{ background:#47B488}

#content{ height:686px; margin:0 auto;}
#content #zj{ width:900px; height:550px; border:#E1E1E1 solid 1px; background:#FFF; margin:0 auto; margin-top:70px;}
#content #zj p{height:50px; border-bottom:#E1E1E1 solid 1px; text-align:center; font-family:"微软雅黑"; font-size:24px; position:relative;top:20px;}
#content #zj img{ position:relative; left:150px; bottom:60px;}
form{ width:300px; height:300px; margin-top:30px; margin:100px auto;}
form input{ width:260px; height:40px;border:#E2E2E2 solid 2px;}
form input.txt{ width:290px; margin-bottom:15px; color:#C5C5C5; padding-left:15px;}
form input.yzm{ margin-bottom:15px; color:#C5C5C5; width:130px; padding-left:15px;}
form input.dio{ width:20px; height:20px; vertical-align:middle}
form .zc{ color:#00925F; font-family:"微软雅黑";}
form #tishi{border-top:#666666 solid 1px;width:15px; height:15px; margin-top:10px;}
form lable{ font-size:14px;}
form input.sub{ width:260px; height:40px; background:#2AAD6F; border:none;color:#FFF; margin-left:20px; margin-top:20px;}
form input.sub:hover{ background:#47B488;}

.clearf{clear:both; font-size:1px; height:0px; line-height:0px;}
</style>
</head>

<body>

<div id="box">
    <div id="nav">
        <ul>
         <li><a href="#">OPPO官网</a></li>
          <li><a href="#">OPPO社区</a></li>
           <li><a href="#">ColorOS</a></li>
        </ul>    
    </div>

    <div id="content">
        <div id="zj">
            <p>注册OPPO帐号</p>

            <form action="#" method="post">
            <input type="text" value="请输入手机号码" class="txt" />
            <br />
            <input type="text" value="请输入验证码" class="yzm" />
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/yzm.jpg" />
            <br />
            <input type="checkbox" id="tishi" /> 
            <label for="tishi">已阅读并同意<span class="zc">《OPPO帐号注册协议》</span></label>
            <br />
            <input type="submit" value="立即注册" class="sub" />
            </form>

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

</div>
</body>
</html>

sorry，因为平台限制手记最多20000字限制，所以一下发表不完，后面还有2个内页，分两次发表了，如果有小伙伴愿意可以跟随到时候看一下。好了，大家看完之后可以给一些建议，谢谢！！！
一起学习一起进步

点击查看更多内容