前端oppo网页布局练习

最新推荐文章于 2024-04-22 03:19:21 发布
最新推荐文章于 2024-04-22 03:19:21 发布
阅读量1.3k 收藏 11
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tao__f/article/details/108608075
版权

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";
    }
}
LT_ya
关注
专栏目录
OPPO官网页面前端代码
01-10
OPPO官网页面前端代码
仿oppo官网页面，前端初学，html css js.zip
07-13
前端初学者的福利啦，基于html，css，js做的OPPO官网页面源码，有需要的小伙伴可以下载看看哦
OPPO官网web界面开发案例
热门推荐
weixin_43698704的博客
01-08 1万+
成品 等等 一、框架实现 构建top,header,nav,banner,star,accessory,world,serve,after_sale,footer10个部分框架，然后再逐步构建每一部分。 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...
仿oppo网站（前端静态页面）.rar
08-08
仿oppo网站（前端静态页面）.rar
OPPO网站 HTML +CSS
04-19
OPPO网站的仿制，HTML+CSS文件。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
前端基础-静态页面练习.zip
07-08
这个压缩包包含多个实际网站的仿制练习，如360安全卫士、尚和、唯品会、站酷网、好赞官网、榛果民宿、木槿生活、YOHO、视觉中国以及OPPO等知名网站的页面设计。通过这些项目的实践，开发者可以深入了解和掌握前端...
前端提高篇（四十七）练习4：响应式布局
最新发布
2401_84092169的博客
04-22 829
/ }else {// }}else{按F12出现的调试面板的这个部分，越往上排，权重越大，这张图式点击’=’，class名加上’gn-liat-activate’之后的效果，可以看到，此时.gn-list是设置成flex的，而下一条的display: none;则因为权重没有上一条大而不生效当屏幕小时，点击了’='但没有收回，就放大了屏幕，此时gn-list-activate并没有收回，当屏幕再次缩小时，由于gn-list-activate存在，所以这时候就直接显示出了gn-list。
基于HTML仿oppo手机商城电商项目的设计与实现6个页面
08-10
- **DIV+CSS布局**：项目使用了DIV+CSS来进行网页布局，这是一种常见的网页布局方式，通过CSS样式控制DIV容器的位置、大小等属性，从而实现灵活的页面布局。 - **鼠标滑过特效**：通过CSS或JavaScript实现鼠标悬停时...
Vue后台管理系统练习-3首页主要布局
Yuki_Aruki的博客
05-14 2353
上周一直在赶期末考试和ddl, 因此一直没有空出时间写 这部分的内容主要是一些element-ui组件和css样式的架构, 比较基础因此讲解部分比较少 效果如下: 整体页面布局采用element-ui的layout布局 + el-card组件 layout布局中通过el-row与el-col控制页面 el-row: :gutter属性可以规定每个分隔的间距 :span规定此块占用的列数(一共有24列), 其他的部分具体参见element-ui的文档 教程中的table也使用了elementUI的table
oppo官网web前端.zip
01-08
本人学习中国大学Mooc网，《web前端开发》课程，北京林业大学，孙俏、张吉、祖明、王建新、田萱、刘士营等老师的课程，进行课程最后综合实验的实现代码。
淘宝首屏静态页面（HTML+CSS）布局练习.zip
05-07
适合刚接触前端基础知识的同学，初步了解了HTML+CSS后，可以尝试练习类似项目；该项目主要为HTML+CSS实现，不涉及交互、逻辑功能，旨在提高样式布局能力
仿Oppo手机官网，html+css
09-12
html5+css,是现在非常流行的开发模式，这是我的一个例子，是仿oppo手机官网
oppo（内含图片素材）.rar
08-25
学完html和css基础就可以独立制作的网页，制作网页的图片素材都在压缩包中，可以用它来检验自己的水平
基于HTML电商项目的设计与实现——html静态网站基于数码类电商购物网站网页设计与实现共计30个页面...
qq_365392777
10-23 3491
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作...
制作一个静态oppo官网页面
luohanisme的博客
11-28 2519
制作一个静态oppo官网页面
小菜鸟日记之模仿oppo官网页面设计
qq_20543667的博客
06-10 2185
网页设计课的作业，太难了，又是扒网页源码又是取色找图片，断断续续做了半个月，光放出html的代码吧，好累555 <!DOCTYPE html> <html> <head> <title>OPPO</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/swiper.css"> <link rel="style
JavaScript - OOP编程思想
王佳斌
07-17 4985
JavaScript不是一门面向对象的语言，是基于对象的语言，但可以模拟面向对象。 什么是对象(Object) Everything is object（万物皆对象），也叫无序属性的集合。 对象是单个事物的抽象 一台电脑、一个程序员、一辆法拉利、一个服务器等等，这些都可以称之为对象。 当实物被抽象化为对象时，实物之间的关系就变成了对象之间的关系，从而达到模拟现实情况。把一切看做对象，然后进行抽象化...
vue拖曳式分割布局的实例
grow_的博客
02-24 237
效果图： 代码： （可直接使用） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue...
oppo sans前端开发
01-03
OPPO SANS前端开发是指用于OPPO智能手机及其他设备前端应用程序开发的技术。它涉及使用HTML、CSS和JavaScript等技术，来创建用户界面并实现各种交互功能。前端开发是构建网页或应用程序用户界面的过程，这是用户直接与产品进行交互的部分。 在OPPO SANS前端开发中，开发人员需要了解和掌握HTML、CSS和JavaScript等技术。HTML是用于创建网页结构的标记语言，CSS是用于设计和样式化网页的样式表语言，而JavaScript则是用于实现网页交互和动态效果的脚本语言。此外，还需要学习一些前端框架和库，如React和Vue.js等，来更高效地开发前端应用程序。 使用OPPO SANS前端开发技术，开发人员可以创建各种各样的前端应用程序，包括网页、移动应用和桌面应用等。他们可以根据产品需求设计并构建用户界面，选择合适的布局、颜色和字体等来提高用户体验。他们还可以通过添加交互功能，如按钮、表单和动画效果等，使应用程序更加生动和易于操作。 总之，OPPO SANS前端开发是一项涉及使用HTML、CSS和JavaScript等技术来创建用户界面和实现交互功能的任务。它是开发OPPO智能手机及其他设备前端应用程序的重要工作，需要开发人员具备相关的技术知识和经验。通过使用这些技术，开发人员可以为用户提供出色的产品体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值