前端oppo网页布局练习

2024-03-18 23:08
文章标签 网页 布局 练习 前端 frontend oppo

本文主要是介绍前端oppo网页布局练习，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

html部分：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>oppo商城</title><link rel="stylesheet" href="index.css">
</head>
<body><!-- 顶部 --><div id="top"><div class="container"></div></div><!-- 头部 --><div id="header">
<div class="container"><div class="box"><a href="#"><img src="./img/0.png" alt="加载错误"></a><a href="#">电话：400-666-608</a></div><div class="box"><a href="#">登录|</a><a href="#">注册|</a><a href="#">积分兑换|</a><a href="#">帮助中心|</a><a href="#">购物车</a></div>
</div></div><!-- 导航栏 --><div id="nav"><div class="container"><div class="box" ><img src="./img/logo.png" alt=""></div><div class="box" style="text-align: left;"><a href="#">首页</a><a href="#">手机</a><a href="#">配件</a><a href="#">服务</a><a href="#">体验店</a><a href="#">软件商店</a><a href="#">ColorOs</a></div></div></div><!-- 轮播图 --><div id="banner">
<div class="container"><div id="main"><div class="banner-page slide1" ></div><div class="banner-page slide2" ></div><div class="banner-page slide3" ></div><div class="banner-page slide4" ></div></div><ul><li ></li><li></li><li></li><li></li></ul><div class="btn" id="left"><</div><div class="btn" id="right">></div></div></div><!-- 明星机型 --><div id="star">
<div class="container"><div id="star_box1"><img src="./img/i-c-title.png" alt=""></div><div id="starmain"><div class="starimage" ><img src="./img/star1.jpg" alt="图片加载失败"><h3><b>N3</b></h3><h6>1000万电动旋转摄像头</h6><a href="#">￥3999 立即购买</a></div><div class="starimage" ><img src="./img/star2.jpg" alt="图片加载失败"><h3><b>R5</b></h3><h6>降至4.85mm</h6><a href="#">￥2999 立即购买</a></div><div class="starimage" ><img src="./img/star3.jpg" alt="图片加载失败"><h3><b>R1C</b></h3><h6>钻石流光喷涂</h6><a href="#">￥2999 立即购买</a></div><div class="starimage" ><img src="./img/star4.jpg" alt="图片加载失败"><h3><b>A31</b></h3><h6>镜在掌握</h6><a href="#">￥999 立即购买</a></div></div>
</div></div><!-- 精选配件 --><div id="accessory">
<div class="container"><div id="acc_box1"><img src="./img/wb.png" alt=""></div><!-- 左边主体 --><div class="accmain"> <div class="max_acc"><div class="acc_side" style="float: left;"><a href="#"><img src="./img/20150413174400N0dPnxUKHk.jpg" alt="图片加载失败"></a></div><div class="acc_side" style="float: right;"><div class="acc_1"><b style="font-size: 5px;">OPPO手机官网ACCESSORY配件</b><div id="acc_2"><a href="#">耳机</a><a href="#">移动电源</a><a href="#">保护壳</a><a href="#">贴膜</a><a href="#">皮套</a><a href="#">数据线</a></div><a href="#"><b style="font-size: 5px;">全部商品 <</b></a></div><div class="acc_1"><a href="#"><img src="./img/20131120165101xYIYzhkVEy.jpg" alt="图片加载失败"></a></div></div></div><div class="min_acc"><a href="#"><img src="./img/20150413174340NLV2gvV4FU.jpg" alt="图片加载失败"></a></div></div><!-- 右边主体 --><div class="accmain"><div class="min_acc"><a href="#"><img src="./img/20150123182505RO822scYYt.jpg" alt="图片加载失败"></a></div><div class="max_acc"><div class="acc_side" style="float: left;"><a href="#"><img src="./img/20141230145609l7Fsk7CdHy.jpg" alt="图片加载失败"></a></div><div class="acc_side" style="float: right;"><div class="acc_1"><a href="#"><img src="./img/20141011101157yZEFpMrk0h.jpg" alt="图片加载失败"></a></div><div class="acc_1"><a href="#"><img src="./img/201410270957132inlm3IwsV.jpg" alt="图片加载失败"></a></div></div></div></div>
</div></div><!-- 搜索欧珀 --><div id="world">
<div class="container"><div id="world_box1"><img src="./img/weibo.png" alt=""></div><div class="worldimgs" style=" top: 100px;left: 200px;"><img src="./img/201403261455420lqMPNGENc.png" alt=""></div><div class="worldimgs" style="top: 100px;left: 510px;"><img src="./img/20150226100534QqezQ85N6y.jpg" alt=""></div><div class="worldimgs" style="top: 330px;left: 200px;"><img src="./img/20140926184007v2rjcVFcbW.jpg" alt=""></div><div class="worldimgs" style="top: 330px;left: 510px;"><img src="./img/20131212113902waaLqQUWfB.jpg" alt=""></div><div id="world_main"><div class="worldbtn" id="one">新闻</div><div class="worldbtn" id="two">微博</div><div class="worldnox" name="nt1" style="top: 60px;left: 25px;"><img src="./img/t1.jpg" alt="图片加载失败"><div class="worldtext"><a href="#">1234567889</a></div></div><div class="worldnox" name="nt1" style="top: 170px;left: 25px;"><img src="./img/t2.jpg" alt="图片加载失败"><div class="worldtext"><a href="#">1234567889</a></div></div><div class="worldnox" name="nt1" style="top: 280px;left: 25px;"><img src="./img/t3.jpg" alt="图片加载失败"><div class="worldtext"><a href="#">1234567889</a></div></div><div class="worldnox" name="nt1" style="top: 390px;left: 25px;"><img src="./img/t4.jpg" alt="图片加载失败"><div class="worldtext"><a href="#">1234567889</a></div></div><div class="worldnox" name="nt2" style="top: 60px;left: 25px;"><img src="./img/t1.jpg" alt="图片加载失败"><div class="worldtext"><a href="#">59629</a></div></div><div class="worldnox" name="nt2" style="top: 170px;left: 25px;"><img src="./img/t2.jpg" alt="图片加载失败"><div class="worldtext"><a href="#">48494</a></div></div><div class="worldnox" name="nt2" style="top: 280px;left: 25px;"><img src="./img/t3.jpg" alt="图片加载失败"><div class="worldtext"><a href="#">49494</a></div></div><div class="worldnox" name="nt2" style="top: 390px;left: 25px;"><img src="./img/t4.jpg" alt="图片加载失败"><div class="worldtext"><a href="#">49496</a></div></div></div>
</div></div><!-- 售后 --><div id="server">
<div class="container" style="height: 100%;"><div class="serbox"><a href="#"><img src="./img/server1.png" alt="图片加载失败"></a></div><div class="serbox"><a href="#"><img src="./img/server2.png" alt="图片加载失败"></a></div><div class="serbox"><a href="#"><img src="./img/server3.png" alt="图片加载失败"></a></div><div class="serbox"><a href="#"><img src="./img/server4.png" alt="图片加载失败"></a></div><div class="serbox"><a href="#"><img src="./img/server5.png" alt="图片加载失败"></a></div>
</div><!-- 售后服务 --><div id="after-sale">
<div class="container"><div class="afterbox"><b>关于我们</b><ul><a href="#"><li>关于OPPO</li></a><a href="#"><li>新闻中心</li></a><a href="#"><li>人才招聘</li></a></ul>
</div><div class="afterbox"><b>推荐机型</b><ul><a href="#"><li>N3</li></a><a href="#"><li>R5</li></a><a href="#"><li>R17</li></a><a href="#"><li>Find7</li></a></ul></div><div class="afterbox"><b>购物相关</b><ul><a href="#"><li>帮助中心</li></a><a href="#"><li>周边产品</li></a><a href="#"><li>官方体验店</li></a><a href="#"><li>客户服务政策</li></a></ul></div><div class="afterbox"><b>会员中心</b><ul><a href="#"><li>产品注册</li></a><a href="#"><li>会员注册</li></a><a href="#"><li>会员登录</li></a></ul></div><div class="afterbox"><b>关注我们</b><ul><a href="#"><li><img src="" alt=""> 新浪微博</li></a><a href="#"><li><img src="" alt="">腾讯微博</li></a><a href="#"><li><img src="" alt="">人人网</li></a><a href="#"><li><img src="" alt="">qq空间</li></a></ul></div><div class="afterbox"></div>
</div></div>
</body>
<script src="./index.js"></script>
</html>

css部分：

*{margin: 0;padding: 0;
}
body{background-color: white;}
img{border-radius: 5%;
}
a{display: inline-block;text-decoration: none;color: #666;
}
a:hover{transform: scale(1.2);border-bottom: 1px solid red;transition: all 1.5s ease;
}
.container{width: 100%;margin: 0 auto;}
/* 测试代码 */
/* #banner,#accessory,#star,#world,#server,#after-sale{width: 100%;height: 100px;} */
#top{width: 100%;height: 5px;background-color: rgb(7, 125, 78);
}
#header{width: 100%;height: 35px;margin-bottom: 3px;font-size: 0;background-color: #333;
}
.box{width: 50%;height: 100%;margin: 0 auto;text-align: center;float: left;
}
#header a{display: inline-block;line-height: 35px;margin: 0 auto;font-size: 10px;width: 100px;height: 100%;
}
#header img{width: 30px;height: 100%;margin-right: 5px ;
}
#nav{width: 100%;height: 100px;margin-bottom: 3px;font-size: 0;background-color: rgb(221, 215, 215);
}
#nav a{display: inline-block;line-height: 100px;margin: 0 auto;font-size: 20px;color: #999;width: 90px;height: 100%;
}/* 轮播图 */
#banner{width: 100%;height: 500px;position: relative;margin-bottom: 3px;
}
#main{width: 100%;height: 100%;overflow: hidden;
}
.banner-page{width: 100%;height: 100%;transition: all 2s ease;background-repeat: no-repeat;position:absolute;
}
.slide1{background-image: url(./img/banner1.jpg);background-size:100%;
}
.slide2{background-image: url(./img/banner2.jpg);background-size:100%;
}
.slide3{background-image: url(./img/banner3.jpg);background-size:100%;
}
.slide4{background-image: url(./img/banner4.jpg);background-size:100%;
}
#banner ul{width: 100%;height: 5%;position: absolute;top: 95%;opacity: 50%;background-color: #eee;list-style-type: none;}
#banner ul li{position: relative;left: 50%;float: left;margin-right:20px ;width: 20px;height: 20px; background-color: rgb(146, 240, 146); border-radius: 50%;}.btn{width: 40px;height: 20%;background-color: #eee;opacity: 30%;font-size: 50px;line-height: 80px;cursor: pointer;color: blue;}
#left{position: absolute;top: 45%;float: left;
}
#right{position: absolute;top: 45%;right: 0;float: right;
}
#star{width: 100%;height: 600px;/* background-color: rgb(146, 240, 146); */
}
#star_box1{width: 25%;height: 100px;margin: 0 auto;background-color: rgb(146, 240, 146);
}
#star_box1 img{width: 100%;height: 100%;}
#starmain{width: 80%;height: 450px;margin: 20px auto;line-height: 1.5em;text-align: center;}
.starimage{width: 20%;height: 100%;/* background-color: salmon; */margin-right: 10px;margin-left: 40px;border-bottom: 5px solid #eee;float: left;}
.starimage:hover{border-bottom: 5px solid #f00;
}.starimage img{width: 100%;height: 80%;
}
.starimage img:hover{transform: scale(1.001,1.001);box-shadow: 0 0 5px #666;
}
.starimage h6{color: #999;
}
.starimage a{color: rgb(63, 197, 63);
}/* @media screen and (max-width: 992px) {.starimage{width: 40%;}} *//* 精选配件 */
#accessory{width: 850px;height: 800px;margin: 0 auto;background-color: #eee;
}
#acc_box1{width: 45%;height: 100px;margin: 0 auto;/* background-color: rgb(146, 240, 146); */
}
#accessory a:hover{transform: scale(1,1);border-bottom: 0px;}
.accmain{width: 400px;height: 700px;margin-right: 20px ;float: left;
}.max_acc{width: 400px;height: 450px;border-radius: 5%;margin-top: 15px;margin-bottom: 15px;/* background-color: aqua; */}
.min_acc{width: 400px;height: 200px;border-radius: 5%;margin-top: 15px;background-color: rgb(255,255,255);box-shadow: 0 0 2px #999;}
.min_acc:hover{box-shadow: 0 0 5px rgb(6, 106, 6);}
.min_acc img{width: 100%;height: 100%;}.acc_side{width: 190px;height: 440px;text-align: center;margin: 10px auto;line-height: 2em;}
.acc_side  img:hover{box-shadow: 0 0 5px rgb(6, 106, 6);}
.acc_side img{width: 100%;height: 440px;
}
.acc_1{background-color: rgb(255,255,255);width: 190px;height: 215px;/* background-color: aquamarine; */margin-bottom: 10px;}
.acc_1 img{width: 190px;height: 215px;
}#acc_2{width: 160px;height: 140px;margin: 0 auto;border-top:1px solid #eee;border-bottom: 1px solid #eee;
}
#acc_2 a{display: inline-block;width: 40%;height: 30%;margin: 5px;font-size: 8px;
}
/* 搜索欧珀 */
#world{width: 100%;height: 600px;position: relative;background-image: url(./img/2.jpg);
}
#world img{width: 100%;height: 100%;
}
#world_box1{width: 400px;height: 70px;margin: 0 auto;/* background-color: rgb(146, 240, 146); */
}
.worldimgs{width: 300px;height: 200px;border-radius: 5%;box-shadow: 0 0 2px #333;position: absolute;border-bottom: 2px solid #eee;}.worldimgs:hover{border-bottom: 2px solid rgb(37, 220, 37);
}
#world_main{width: 350px;height: 500px;position: absolute;top: 80px;left: 900px;background-color: white;
}
.worldbtn{width: 50%;height: 50px;text-align: center;line-height: 50px;float: left;cursor: pointer;background-color: #999;border-bottom: 2px solid #eee;
}
.worldbtn:hover{background-color: #eee;border-bottom: 2px solid #0f0;
}
.worldnox{width: 300px;height: 100px;float: left;line-height: 100px;position: absolute;background-color: #eee;
}
.worldnox img {width: 100px !important;height: 100px  !important;margin-right: 25px !important;
}
.worldtext{float: right;width: 170px;height: 80px;margin: 10px auto;text-align: left;
}
/* 售后 */
#server{width: 65%;height: 100px;margin: 0 auto;background-color: white;border-bottom:2px solid #aaa ;}
.serbox{width: 150px;height: 60px;margin: 15px 22px;float: left;}
.serbox img{width: 100%;height: 100%;
}
.serbox a:hover{transition: all 0s ease;transform: translateY(-2px);
}
.serbox a{width: 100%;height: 100%;
}/* 售后服务 */
#after-sale{width: 100%;height: 200px;margin:0 auto;}
.afterbox{width: 150px;height: 200px;margin:0 2px ;text-align: center;line-height: 2em;float: left;}
.afterbox:nth-child(6){width: 200px;
}
#after-sale a{display: inline;cursor: pointer;
}
#after-sale ul{list-style: none;font-size: 10px;
}
js部分：```cpp
//轮播图banner
let time=0;
let count=0;
var al=document.getElementById("banner");
var el=document.getElementById("main");
var bl=el.getElementsByTagName("div");
var cl=al.getElementsByTagName("li");
var btn_left=document.getElementById("left");
var btn_right=document.getElementById("right");
//  通过display控制图片的显示 
function func(){ count=count==4?0:count;for(var i=0;i<bl.length;i++){bl[i].style="display:none "; cl[i].style="background-color:rgb(146, 240, 146)"}bl[count].style="display:blcok";cl[count].style="background-color:red";count++;
}
function rerver(){ count--;count=count==-1?3:count;for(var i=0;i<bl.length;i++){bl[i].style="display:none "; cl[i].style="background-color:rgb(146, 240, 146)"}bl[count].style="display:blcok";cl[count].style="background-color:red";}
// 设置定时器
timer=setInterval(func, 2000);
// 定义鼠标悬停事件
al.onmouseover=function(){clearInterval(timer);
}
// 定义鼠标移出事件
al.onmouseleave=function(){timer=setInterval(func, 2000);
}btn_right.onclick=function(){func();
}btn_left.onclick=function(){rerver();
}
for(var i=0;i<bl.length;i++){cl[i].index = i; /*定义index记录当前鼠标在li的位置*/cl[i].onmouseenter = function(){ /*定义鼠标经过事件*/
for(var i=0;i<bl.length;i++){ /*通过for循环将所有图片隐藏，圆点背景设为白色*/cl[i].style.background = 'rgb(146, 240, 146)';bl[i].style.display = 'none';
}
this.style.background = '#f00'; /*设置当前所指圆点的背景色*/
bl[this.index].style.display = 'block'; /*使圆点对应的图片显示*/}
}//明星机型star
// 背景图
var ao=document.getElementById("star");
ao.style.cssText="background-image:url(./img/2.jpg)";// 新闻微博的div
var as=document.getElementById("one");
var bs=document.getElementById("two");
var nt1=document.getElementsByName("nt1");
var nt2=document.getElementsByName("nt2");
// 鼠标点击新闻事件
as.onclick=function(){fn1(nt1)fn2(nt2)
}
// 鼠标点击微博事件
bs.onclick=function(){fn1(nt2)fn2(nt1)
}function fn1(ele){for(var i=0;i<ele.length;i++){ele[i].style.display="block";}
}function fn2(ele){for(var i=0;i<ele.length;i++){ele[i].style.display="none";}
}

这篇关于前端oppo网页布局练习的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/823973。

相关文章

使用Python实现获取网页指定内容

使用Python实现获取网页指定内容

《使用Python实现获取网页指定内容》在当今互联网时代,网页数据抓取是一项非常重要的技能,本文将带你从零开始学习如何使用Python获取网页中的指定内容,希望对大家有所帮助... 目录引言1. 网页抓取的基本概念2. python中的网页抓取库3. 安装必要的库4. 发送HTTP请求并获取网页内容5. 解
阅读更多...
Vue中组件之间传值的六种方式（完整版）

Vue中组件之间传值的六种方式（完整版）

《Vue中组件之间传值的六种方式（完整版）》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值（通过事件形式）方
阅读更多...
Python使用DrissionPage中ChromiumPage进行自动化网页操作

Python使用DrissionPage中ChromiumPage进行自动化网页操作

《Python使用DrissionPage中ChromiumPage进行自动化网页操作》DrissionPage作为一款轻量级且功能强大的浏览器自动化库,为开发者提供了丰富的功能支持,本文将使用Dri... 目录前言一、ChromiumPage基础操作1.初始化Drission 和 ChromiumPage
阅读更多...
css中的 vertical-align与line-height作用详解

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》：本文主要介绍了CSS中的`vertical-align`和`line-height`属性，包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案，详细内容请阅读本文，希望能对你有所帮助... 目录vertical-ali
阅读更多...
浅析CSS 中z - index属性的作用及在什么情况下会失效

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性（如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处
阅读更多...
Python实现html转png的完美方案介绍

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构：try: with sync_playwright(
阅读更多...
Vue 调用摄像头扫描条码功能实现代码

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤：代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js
阅读更多...
CSS @media print 使用详解

CSS @media print 使用详解

《CSS@mediaprint使用详解》：本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例，如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等，还提供了测试方法和关键注意事项，并分享了进阶技巧，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
Nginx实现前端灰度发布

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分
阅读更多...
基于Canvas的Html5多时区动态时钟实战代码

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》：本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示，通过Canvas的API，可以绘制出6个不同城市的时钟，并且这些时钟可以动态转动，每个时钟上都会标注出对应的24小时制时间，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2