前端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. 基础爬虫实现3. 高级功能扩展3.1 抓取文章详情3.2 保存数据到文件4. 完整示例
阅读更多...
python获取网页表格的多种方法汇总

python获取网页表格的多种方法汇总

《python获取网页表格的多种方法汇总》我们在网页上看到很多的表格,如果要获取里面的数据或者转化成其他格式,就需要将表格获取下来并进行整理,在Python中,获取网页表格的方法有多种,下面就跟随小编... 目录1. 使用Pandas的read_html2. 使用BeautifulSoup和pandas3.
阅读更多...
HTML5中的Microdata与历史记录管理详解

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M
阅读更多...
html5的响应式布局的方法示例详解

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》：本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法，简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局，详细内容请阅读本文，希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的
阅读更多...
HTML5表格语法格式详解

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中，表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中，表格主要通过< tab
阅读更多...
Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》：本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例，但是返回n
阅读更多...
JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
前端CSS Grid 布局示例详解

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统，可以同时控制行和列，相比Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,：本文主要介绍前端CSSGri... 目录css Grid 布局详解（通俗易懂版）一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行
阅读更多...
前端下载文件时如何后端返回的文件流一些常见方法

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》：本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子：使用 Blob
阅读更多...
Vuex Actions多参数传递的解决方案

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法（推荐）二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2