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>
360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
