一个简单的OPPO商城页面

HTML+css 欢迎来学习

<!DOCTYPE html>
<html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="../css/oppo.css"/><title></title><style type="text/css">* {margin: 0;padding: 0;}body {background: #c0c0c0;}.box {width: 1350px;height: 3844px;margin: 0 auto;border: 1px solid;background: #eaeaea;}.tou_1 {width: 1350px;height: 4px;background: #00925f;}.tou_2 {width: 1350px;height: 36px;border: 1px solid #FF0000;overflow: hidden;background: #2b2b2b;}.img_xinglang {margin-left: 75px;margin-top: 8px;float: left;}.img_xinglang2 {margin-left: 14px;margin-top: 8px;float: left;}.dian_hua {margin-top: 8px;color: #00925f;margin-left: 20px;float: left;}.deng_lu {float: left;margin-top: 8px;margin-left: 550px;color: #F5F5DC;}.xian_1 {float: left;margin-top: 8px;margin-left: 20px;color: #F5F5DC;}.zhuche {float: left;margin-top: 8px;margin-left: 20px;color: #F5F5DC;}.xian_2 {float: left;margin-top: 8px;margin-left: 20px;color: #F5F5DC;}.gouche {float: left;margin-top: 8px;margin-left: 40px;color: #F5F5DC;}.gouwu {position: relative;margin-top: 10px;margin-left: -100px;}.tou_3 {width: 1350px;height: 84px;border: 1px solid;background: #FFFFFF;}.oppo {margin-top: 0px;float: left;margin-left: 75px;}.shou_ye {margin-top: 30px;margin-left: 370px;float: left;}.shou_ji {margin-top: 30px;margin-left: 40px;float: left;}.li_yi_feng {width: 1350px;height: 620px;border: 1px solid;position: relative;left: 0;top: 0;}.liyifeng_1 {width: 1350px;height: 620px;overflow: hidden;}.R15_tu {position: relative;margin-top: -530px;margin-left: 210px;}.tou_ming_tu {width: 1350px;height: 70px;background: #FFFFFF;opacity: 0.5;position: absolute;margin-top: -178px;}.san_ge_dian {position: absolute;margin-top: -150px;margin-left: 670px;}.lv_bianxian {width: 243px;height: 6px;border: 1px #00925f;background: #00925f;margin-top: -110px;margin-left: 70px;}.shou_ji_kuang {width: 1350px;height: 792px;border: 1px solid;}.shang_xian1 {width: 93px;height: 2px;border: 1px #dadada;background: #dadada;margin-top: 40px;margin-left: 620px;}.shang_xian1_1 {width: 93px;height: 2px;border: 1px #dadada;background: #dadada;margin-top: 50px;margin-left: 620px;}.oppp_p {margin-left: 540px;font-size: 27px;margin-top: 10px;}.oppp_p_o {margin-left: 480px;font-size: 27px;margin-top: 10px;}.oppo_span1 {font-weight: bold;}.shang_xian2 {width: 93px;height: 2px;border: 1px #dadada;background: #dadada;margin-top: 10px;margin-left: 620px;}.oppp_p1 {margin-left: 580px;font-size: 10px;margin-top: 10px;}.oppo_span2 {color: #00925F;margin-left: 5px;}.oppo_tu_kuang {width: 1195px;height: 620px;border: 1px solid;margin-left: 74px;margin-top: 25px;overflow: hidden;}.oppo_tu_kuang_1 {width: 281px;height: 619px;border: 1px solid;float: left;}.oppo_tu_kuang_2 {width: 281px;height: 619px;border: 1px solid;float: left;margin-left: 20px;}.oppotu_p1 {font-size: 23px;margin-top: 23px;margin-left: 124px;}.oppotu_p2 {margin-top: 1px;margin-left: 78px;font-size: 13px;color: #b4b4b4;}.oppotu_p3 {margin-top: 1px;margin-left: 78px;font-size: 13px;color: #00925F;}.oppo_youbiao {position: absolute;margin-left: 180px;margin-top: -20px;}.oppo_tu_kuang_1_youbian {width: 1px;height: 570px;background: beige;position: relative;margin-left: 290px;margin-top: -513px;}.oppo_tu_kuang_1_xiabian {width: 280px;height: 4px;background: #dfdfdf;margin-top: 5px;}.oppo_tu_kuang_1_xiabian1 {width: 280px;height: 4px;background: #dfdfdf;margin-top: 60px;}.xia_you {width: 1350px;height: 1078px;border-bottom: 2px solid #eaeaea;}.xia_you_1 {width: 1180px;height: 882px;border: 1px solid;margin-left: 76px;margin-top: 40px;overflow: hidden;}.xia_you_1_tu {width: 283px;height: 582px;border: 1px solid;float: left;}.xia_you_2_tu {width: 283px;height: 285px;border: 1px solid;float: left;margin-left: 10px;}.xia_you_3_tu {width: 583px;height: 285px;border: 1px solid;float: left;margin-left: 14px;}.xia_you_4_tu {width: 285px;height: 278px;border: 1px solid;float: left;margin-left: 10px;margin-top: 10px;}.xia_you_5_tu {width: 284px;height: 580px;border: 1px solid;float: left;margin-left: 13px;margin-top: 10px;}.xia_you_6_tu {width: 283px;height: 279px;border: 1px solid;float: left;margin-left: 13px;margin-top: 14px;}.xia_you_7_tu {width: 580px;height: 279px;border: 1px solid;position: absolute;margin-left: 76px;margin-top: -290px;}.xia_3 {width: 1183px;height: 560px;border: 1px solid;margin-top: 100px;margin-left: 76px;}.shang_xian1_11 {width: 93px;height: 2px;border: 1px #dadada;background: #dadada;margin-top: 38px;margin-left: 544px;}.oppp_p_oo {margin-left: 398px;font-size: 27px;margin-top: 10px;}.shang_xian22 {width: 93px;height: 2px;border: 1px #dadada;background: #dadada;margin-top: 10px;margin-left: 544px;}.xia_3_1 {width: 1180px;height: 570px;border: 1px solid;margin-top: 38px;}.xia_3_tu1 {width: 381px;height: 273px;border: 1px solid;float: left;}.xia_3_tu2 {width: 381px;height: 273px;border: 1px solid;float: left;margin-left: 18px;}.xia_3_tu3 {width: 370px;height: 560px;border: 1px solid;float: left;margin-left: 18px;}.xia_3_tu4 {width: 370px;height: 273px;border: 1px solid;float: left;margin-top: -270px;}.xia_3_tu5 {width: 370px;height: 273px;border: 1px solid;float: left;margin-top: -270px;margin-left: 30px;}.di {width: 1350px;height: 420px;margin-top: 198px;background: #FFFFFF;}.di_1{width: 1180px;height: 128px;border: 1px solid;margin-left: 78px;}.di_1_xian{width: 1350px;height: 2px;background: #eaeaea;}.di_p{width: 1180px;height: 16px;border: 1px solid;margin-left: 78px;float: left;}.di_p1{float: left;font-weight: bold;color: #373737;}.di_p2{float: left;margin-left: 118px;font-weight: bold;color: #373737;}.di_ziti{width: 828px;height: 100px;border: 1px solid;margin-left: 76px;margin-top: 40px;}.di_ziti_youdian{width: 230px;height: 125px;border: 1px solid;margin-left: 990px;margin-top: -100px;}.dianhua{float: left;}.di_ziti_youdian_p{font-size: 21px;color: #409f73;margin-top: ;}.di_ziti_youdian_p1{font-size: 12px;margin-top:4px ;}.dianhua_2{margin-top: 25px;float: left;}.zai_xian{font-size: 21px;color: #409F73;margin-top: 20px;float: left;}.sanjiao{float: left;margin-top: 32px;margin-left: 20px;}.fu_wu{font-size: 12px;float: left;margin-top: 5px ;}.zui_di{width: 1350px;height: 5px;border: 1px solid;margin-top: 50px;background: #000000;position: absolute;margin-left: -1px;}.zui_di_di{width: 1350px;height: 70px;border: 1px solid;margin-top: 55px;position: absolute;margin-left: -1px;background:  #2b2b2b;}.zui_di_li{width: 1200px;height: 20px;border: 1px solid red;margin-top: 20px;margin-left: 76px;}.zui_di_li_p1{font-size: 20px;color: #FFFFFF;margin-top: -5px;float: left;}.zui_di_li_p2{color: #828282;margin-left: 20px;float: left;font-size: 10px;margin-top: 2px;}.hou_1{margin-top: 2px;font-size: 12px;color: #FFFFFF;float: left;margin-left: 230px;}.hou_2{margin-top: 2px;font-size: 12px;color: #FFFFFF;float: left;margin-left: 40px;}</style></head><body><div class="box"><div class="tou_1"></div><div class="tou_2"><img src="../img/xinlang.png" class="img_xinglang"><img src="../img/xinlang2.png" class="img_xinglang2"><p class="dian_hua">400-666-888</p><p class="deng_lu">登录</p><p class="xian_1">|</p><p class="zhuche">注册</p><p class="xian_2">|</p><p class="zhuche">积分兑换</p><p class="xian_2">|</p><p class="zhuche">帮助中心</p><p class="xian_2">|</p><img src="../img/gouwuche.png" class="gouwu" /><p class="gouche">购物车</p><p class="xian_2">|</p></div><div class="tou_3"><img src="../img/oppo.png" class="oppo" /><p class="shou_ye">首页</p><p class="shou_ji">手机</p><p class="shou_ji">配件</p><p class="shou_ji">服务</p><p class="shou_ji">体验店</p><p class="shou_ji">软件商城</p><p class="shou_ji">colorOS</p><p class="shou_ji">社区</p></div><div class="li_yi_feng"><img src="../img/liyifeng.png" class="liyifeng_1"><img src="../img/R15.png" class="R15_tu"><div class="tou_ming_tu"></div><img src="../img/sangedian.png" class="san_ge_dian"><div class="lv_bianxian"></div></div><div class="shou_ji_kuang"><div class="shang_xian1"></div><p class="oppp_p">OPPO <span class="oppo_span1">STAR</span> 明星新机</p><div class="shang_xian2"></div><p class="oppp_p1">OPPO COLLECTLON 2014 <span class="oppo_span2">全部机型</span></p><div class="oppo_tu_kuang"><div class="oppo_tu_kuang_1"><img src="../img/oppo1.png" /><p class="oppotu_p1">N3</p><p class="oppotu_p2">1600万电动旋转摄像头</p><p class="oppotu_p3">￥3999 <span>立即购买</span></p><img src="../img/oppo1biao.png" class="oppo_youbiao" /><div class="oppo_tu_kuang_1_youbian"></div><div class="oppo_tu_kuang_1_xiabian"></div></div><div class="oppo_tu_kuang_2"><img src="../img/oppo2.png" /><p class="oppotu_p1">R5</p><p class="oppotu_p2">1600万电动旋转摄像头</p><p class="oppotu_p3">￥2999 <span>立即购买</span></p><img src="../img/oppo1biao.png" class="oppo_youbiao" /><div class="oppo_tu_kuang_1_youbian"></div><div class="oppo_tu_kuang_1_xiabian"></div></div><div class="oppo_tu_kuang_2"><img src="../img/oppo3.png" /><p class="oppotu_p1">Find7</p><p class="oppotu_p2">1600万电动旋转摄像头</p><p class="oppotu_p3">￥2999 <span>立即购买</span></p><img src="../img/oppo1biao.png" class="oppo_youbiao" /><div class="oppo_tu_kuang_1_youbian"></div><div class="oppo_tu_kuang_1_xiabian"></div></div><div class="oppo_tu_kuang_2"><img src="../img/oppo4.png" /><p class="oppotu_p1">Find7</p><p class="oppotu_p2">1600万电动旋转摄像头</p><p class="oppotu_p3">￥2999 <span>立即购买</span></p><img src="../img/oppo1biao.png" class="oppo_youbiao" /><div class="oppo_tu_kuang_1_xiabian1"></div></div></div><div class="xia_you"><div class="shang_xian1_1"></div><p class="oppp_p_o">OPPO <span class="oppo_span1">ACCESSORY</span> 明星新机</p><div class="shang_xian2"></div><div class="xia_you_1"><div class="xia_you_1_tu"><img src="../img/oppo10.png"></div><div class="xia_you_2_tu"><img src="../img/oppo11.png"></div><div class="xia_you_3_tu"><img src="../img/oppo12.png" /></div><div class="xia_you_4_tu"><img src="../img/13.png"></div><div class="xia_you_5_tu"><img src="../img/15.png"></div><div class="xia_you_6_tu"><img src="../img/16.png"></div><div class="xia_you_6_tu"><img src="../img/17.png"></div></div><div class="xia_you_7_tu"><img src="../img/14.png"></div><div class="xia_3"><div class="shang_xian1_11"></div><p class="oppp_p_oo">OPPO <span class="oppo_span1">ACCESSORY</span> 明星新机</p><div class="shang_xian22"></div><div class="xia_3_1"><div class="xia_3_tu1"><img src="../img/xia1.png" /></div><div class="xia_3_tu2"><img src="../img/xia2.png" /></div><div class="xia_3_tu3"><img src="../img/xia3.png" /></div><div class="xia_3_tu4"><img src="../img/xia4.png" /></div><div class="xia_3_tu5"><img src="../img/xia5.png" /></div></div></div><div class="di"><div class="di_1"><img src="../img/di.png" ></div><div class="di_1_xian"></div><div class="di_p"><p class="di_p1">关于我们</p><p class="di_p2">推荐机型</p><p class="di_p2">购物相关</p><p class="di_p2">会员中心</p><p class="di_p2">关注我们</p><p class="di_p2">联系我们</p></div><div class="di_ziti"><img src="../img/ziti.png" ></div><div class="di_ziti_youdian"><img src="../img/dianhua.png" class="dianhua" ><p class="di_ziti_youdian_p"> 4001-666-888</p><p class="di_ziti_youdian_p1"> 7*24小时客服电话</p><img src="../img/dianhua2.png" class="dianhua_2"/><p class="zai_xian">在线客服</p><img src="../img/sanjiao.png"class="sanjiao" ><p class="fu_wu"> 服务时段: 8:30--22:00</p></div><div class="zui_di"></div><div class="zui_di_di"><div class="zui_di_li"><p class="zui_di_li_p1">OPPO</p><p class="zui_di_li_p2">@ 2005-2020 东莞市永盛通信科技有限公司 版本所有（粤ICP备 08130115号）</p><p class="hou_1">版本说明</p><p class="hou_2">使用协议</p><p class="hou_2">网站地图</p><p class="hou_2">友情链接</p><p class="hou_2">联系我们</p></div></div></div></div></div></div></div></body>
</html>

一个简单的OPPO商城页面相关推荐

一个简单的ASP登录页面
一个简单的ASP登录页面成品首页登陆后的主页,中间的竖线框可自由调动哦!! 具体步骤: 将解压文件放到这个路径内:(很重要!!!) 上图中的work文件夹,即为解压后的文件夹,然后在浏览器的网页 ...
用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
小白教程——Windows下用PHP写一个简单的登录注册页面（二）
哈喽,看到这里希望小伙伴们都把wampserver环境安装好了,如果还没有安装或创建数据表就移步去看我上一篇文章吧.OK~接下我们将进入代码实现部分,首先我们需要一个文本编辑器,可以是电脑自带的not ...
使用H5中的表单标签制作一个简单的网页登陆页面
简单介绍H5当中的表单标签.<form></form>表示定义一个表单的开始和结束.在form标签中,有主要的三个属性,action表示声明表单中的数据的处理的url地址.me ...
php网页制作代码_如何制作一个简单的HTML登录页面（附代码）
几乎每个网站都会有登录页面,那你知道如何写HTML登录页面吗?这篇文章就和大家分享一个HTML简单登录界面的代码,有一定的参考价值,感兴趣的朋友可以看看. 制作登录页面需要用到很多CSS属性和HTML ...
html邮箱代码怎么写_如何制作一个简单的HTML登录页面（附代码）
几乎每个网站都会有登录页面,那你知道如何写HTML登录页面吗?这篇文章就和大家分享一个HTML简单登录界面的代码,有一定的参考价值,感兴趣的朋友可以看看. 实例:制作一个HTML登录页面,包含邮箱,登 ...
如何制作一个简单的HTML登录页面（附代码）
几乎每个网站都会有登录页面,那你知道如何写HTML登录页面吗?这篇文章就和大家分享一个HTML简单登录界面的代码,有一定的参考价值,感兴趣的朋友可以看看. 实例:制作一个HTML登录页面,包含邮箱,登 ...
用HTML做一个简单的web登录页面,简单的JavaWeb注册登录案例
简单的JavaWeb注册登录案例 1.注册页面register.html register 姓名: 电话: 邮箱: qq: 2.注册案例实现程序register.java /** * 注册案例实现程序 ...
一个简单的购物商城，记录一下。
1 #!/usr/bin/env python3 2 Menu = { 3 '电器':{ 4 '电视':{'索尼':'￥2999','康佳':'￥3999','飞利浦':'￥4999','购物车':' ...

一个简单的OPPO商城页面

一个简单的OPPO商城页面相关推荐

最新文章

热门文章