前端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。

相关文章

vite搭建vue3项目的搭建步骤

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境
阅读更多...
Nginx搭建前端本地预览环境的完整步骤教学

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件：nginx.conf脚本化操作：nginx.shnpm 脚本集成总结：对前端的意义很多
阅读更多...
前端缓存策略的自解方案全解析

前端缓存策略的自解方案全解析

《前端缓存策略的自解方案全解析》缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物,：本文主要介绍前端缓存的自解方案,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、为什么“清缓存”成了技术圈的梗二、先给缓存“把个脉”：浏览器到底缓存了谁？三、设计思路：把“发版”做成“自愈”四、代码
阅读更多...
通过React实现页面的无限滚动效果

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢？... 目录1. 早期的解决方案2. 交叉观察者：IntersectionObserver2.1 Inter
阅读更多...
Vue3视频播放组件 vue3-video-play使用方式

Vue3视频播放组件 vue3-video-play使用方式

《Vue3视频播放组件vue3-video-play使用方式》vue3-video-play是Vue3的视频播放组件,基于原生video标签开发,支持MP4和HLS流,提供全局/局部引入方式,可监听... 目录一、安装二、全局引入三、局部引入四、基本使用五、事件监听六、播放 HLS 流七、更多功能总结在 v
阅读更多...
JS纯前端实现浏览器语音播报、朗读功能的完整代码

JS纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面：本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本：① 语音自选参数，按钮控制语音：② 效果图：二、朗读多条文本：① 语音有默认值：②
阅读更多...
vue监听属性watch的用法及使用场景详解

vue监听属性watch的用法及使用场景详解

《vue监听属性watch的用法及使用场景详解》watch是vue中常用的监听器,它主要用于侦听数据的变化,在数据发生变化的时候执行一些操作,：本文主要介绍vue监听属性watch的用法及使用场景... 目录1. 监听属性 watch2. 常规用法3. 监听对象和route变化4. 使用场景附Watch 的
阅读更多...
前端导出Excel文件出现乱码或文件损坏问题的解决办法

前端导出Excel文件出现乱码或文件损坏问题的解决办法

《前端导出Excel文件出现乱码或文件损坏问题的解决办法》在现代网页应用程序中,前端有时需要与后端进行数据交互,包括下载文件,：本文主要介绍前端导出Excel文件出现乱码或文件损坏问题的解决办法,... 目录1. 检查后端返回的数据格式2. 前端正确处理二进制数据方案 1：直接下载（推荐）方案 2：手动构造
阅读更多...
Vue实现路由守卫的示例代码

Vue实现路由守卫的示例代码

《Vue实现路由守卫的示例代码》Vue路由守卫是控制页面导航的钩子函数,主要用于鉴权、数据预加载等场景,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一、概念二、类型三、实战一、概念路由守卫（Navigation Guards）本质上就是 在路
阅读更多...
uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

《uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)》在uni-app开发中,文件上传和图片处理是很常见的需求,但也经常会遇到各种问题,下面：本文主要介绍uni-app小程序项目中实... 目录方式一：使用<canvas>实现图片压缩（推荐，兼容性好）示例代码（小程序平台）：方式二：使用uni
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2