小菜鸟日记之模仿oppo官网页面设计

最新推荐文章于 2023-12-15 09:36:56 发布
最新推荐文章于 2023-12-15 09:36:56 发布
阅读量2.1k 收藏 28
点赞数 7
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20543667/article/details/106675348
版权

网页设计课的作业，太难了，又是扒网页源码又是取色找图片，断断续续做了半个月，光放出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="stylesheet" type="text/css" href="css/animate.min.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<style type="text/css">
		body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }
        #banner{
        	height:630px;
        }

        .swiper-container {
            width: 100%;
            height: 632px;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
	</style>
</head>
<body>
<!-- 页面的顶部 -->
<div id="top">
	<div class="container"></div>
</div>
<!-- 页面的头部 -->
<div id="header">
	<div class="container">
		<div class="header_left left">
			<div class="xlwb"></div>
			<div class="txwb"></div>
			<div class="tel">4001-666-888</div>
		</div>
		<ul class="right">
			<li><a href="#">登录</a></li>
			<li><a href="#">注册</a></li>
			<li><a href="#">积分兑换</a></li>
			<li><a href="#">帮助中心</a></li>
			<li class="shop_car"><span></span><a href="#">购物车</a></li>
		</ul>
	</div>
</div>
<!-- 页面的导航 -->
<div id="nav">
	<div class="container">
		<div class="logo left">
			<img src="img/logo.png">
		</div>
		<ul class="right">
			<li><a href="#">首页</a></li>
			<li><a href="#">手机</a></li>
			<li><a href="#">配件</a></li>
			<li><a href="#">服务</a></li>
			<li><a href="#">体验店</a></li>
			<li><a href="#">软件商店</a></li>
			<li><a href="#">ColorOS</a></li>
		</ul>
	</div>
</div>
<!-- 页面的banner部分 -->
<div id="banner">
	<!-- <div class="container"></div> -->
	<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/banner1.jpg" width="100%;" height="630"></div>
            <div class="swiper-slide"><img src="img/banner2.jpg" width="100%;" height="630"></div>
            <div class="swiper-slide"><img src="img/banner3.jpg" width="100%;" height="630"></div>
            <div class="swiper-slide"><img src="img/banner4.jpg" width="100%;" height="630"></div>

        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next">1</div>
        <div class="swiper-button-prev"></div>
    </div>
    <div class="banner-nav-bg"></div>
</div>
<!-- 页面的明星机型部分 -->
<div id="star">
	<div class="container">
		<div class="star_top">
			<img src="img/i-c-title.png">
		</div>
		<ul>
			<li>
				<div>
					<img src="img/20150423183545tYnFzYnn3p.jpg">
				</div>
				<h2>N3</h2>
				<p>1600万电动旋转摄像头</p>
				<p class="money">&yen;3999 立即购买 <span></span></p>
			</li>
			<li class="line"></li>
			<li>
				<div>
					<img src="img/20150423183545tYnFzYnn3p.jpg">
				</div>
				<h2>N3</h2>
				<p>1600万电动旋转摄像头</p>
				<p class="money">&yen;3999 立即购买 <span></span></p>
			</li>
			<li class="line"></li>
			<li>
				<div>
					<img src="img/20150423183545tYnFzYnn3p.jpg">
				</div>
				<h2>N3</h2>
				<p>1600万电动旋转摄像头</p>
				<p class="money">&yen;3999 立即购买 <span></span></p>
			</li>
			<li class="line"></li>
			<li>
				<div>
					<img src="img/20150423183545tYnFzYnn3p.jpg">
				</div>
				<h2>N3</h2>
				<p>1600万电动旋转摄像头</p>
				<p class="money">&yen;3999 立即购买 <span></span></p>
			</li>
		</ul>
	</div>
</div>
<!-- 页面的精选配件部分 -->
<div id="accessory">
	<div class="container">
		<div class="acc_top">
			<img src="img/wb.png">
		</div>
		<div class="acc_main">
			<div class="acc_left left">
				<div>
					<img src="img/20150413174400N0dPnxUKHk.jpg">
				</div>
				<div class="acc_all">
					<p>OPPO手机官网AAESSORY配件</p>
					<ul>
						<li>耳机</li>
						<li>耳机</li>
						<li>耳机</li>
						<li>耳机</li>
						<li>耳机</li>
						<li>耳机</li>
					</ul>
					<h2 class="line"></h2>
					<p class="acc">全部配件<span></span></p>
				</div>
				<div>
					<img src="img/20131120165101xYIYzhkVEy.jpg">
				</div>
				<div>
					<img src="img/20150413174340NLV2gvV4FU.jpg">
				</div>
			</div>
			<div class="acc_right right">
				<div>
					<img src="img/20150123182505RO822scYYt.jpg">
				</div>
				<div>
					<img src="img/20141230145609l7Fsk7CdHy.jpg">
				</div>
				<div>
					<img src="img/20141011101157yZEFpMrk0h.jpg">
				</div>
				<div>
					<img src="img/201410270957132inlm3IwsV.jpg">
				</div>
			</div>
		</div>
	</div>
</div>
<!-- 页面的搜索欧珀部分 -->
<div id="world">
	<div class="container">
		<div class="world_top">
			<img src="img/weibo.png">
		</div>
		<div class="world_main">
			<div class="world_left left">
				<div  class="a1 fade">
					<div>
						<img src="img/201403261455420lqMPNGENc.png">
					</div>
					
				</div>
				<div  class="a2 fade">
					<div>
						<img src="img/201403261455420lqMPNGENc.png">
					</div>
					
				</div>
				<div class="a3 fade">
					<div>
						<img src="img/201403261455420lqMPNGENc.png">
					</div>
				</div>
				<div class="a4 fade">
					<div>
						<img src="img/201403261455420lqMPNGENc.png">
					</div>
				</div>
			</div>
			<div class="world_right right">
				<div class="world_title">
					<div class="news">新闻</div>
					<div class="weibo">微博</div>
				</div>
				<ul>
					<li>
						<dl>
							<dt>
								<img src="img/20150227161036GqO59Dvta2.jpg">
							</dt>
							<dd>OPPO R5金色版 打造纽约时装周梦幻之旅</dd>
						</dl>
					</li>
					<li>
						<dl>
							<dt>
								<img src="img/20150227161036GqO59Dvta2.jpg">
							</dt>
							<dd>OPPO R5金色版 打造纽约时装周梦幻之旅</dd>
						</dl>
					</li>
					<li>
						<dl>
							<dt>
								<img src="img/20150227161036GqO59Dvta2.jpg">
							</dt>
							<dd>OPPO R5金色版 打造纽约时装周梦幻之旅</dd>
						</dl>
					</li>
					<li>
						<dl>
							<dt>
								<img src="img/20150227161036GqO59Dvta2.jpg">
							</dt>
							<dd>OPPO R5金色版 打造纽约时装周梦幻之旅</dd>
						</dl>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- 页面的服务部分 -->
<div id="serve">
	<div class="container">
		<ul>
			<li>
				<dl>
					<dt></dt>
					<dd class="dd1">正品保障</dd>
					<dd class="dd2">所有的商品都是原装产品</dd>
				</dl>
			</li>
			<li>
				<dl>
					<dt></dt>
					<dd class="dd1">正品保障</dd>
					<dd class="dd2">所有的商品都是原装产品</dd>
				</dl>
			</li>
			<li>
				<dl>
					<dt></dt>
					<dd class="dd1">正品保障</dd>
					<dd class="dd2">所有的商品都是原装产品</dd>
				</dl>
			</li>
			<li>
				<dl>
					<dt></dt>
					<dd class="dd1">正品保障</dd>
					<dd class="dd2">所有的商品都是原装产品</dd>
				</dl>
			</li>
			<li>
				<dl>
					<dt></dt>
					<dd class="dd1">正品保障</dd>
					<dd class="dd2">所有的商品都是原装产品</dd>
				</dl>
			</li>
		</ul>
	</div>
</div>
<!-- 页面的售后服务部分 -->
<div id="after_sale">
	<div class="container">
		<ul>
			<li>
				<ol>
					<li><a href="#">关于我们</a></li>
					<li><a href="#">关于OPPO</a></li>
					<li><a href="#">新闻中心</a></li>
					<li><a href="#">人才招聘</a></li>
				</ol>
			</li>
			<li>
				<ol>
					<li><a href="#">关于我们</a></li>
					<li><a href="#">关于OPPO</a></li>
					<li><a href="#">新闻中心</a></li>
					<li><a href="#">人才招聘</a></li>
				</ol>
			</li>
			<li>
				<ol>
					<li><a href="#">关于我们</a></li>
					<li><a href="#">关于OPPO</a></li>
					<li><a href="#">新闻中心</a></li>
					<li><a href="#">人才招聘</a></li>
				</ol>
			</li>
			<li>
				<ol>
					<li><a href="#">关于我们</a></li>
					<li><a href="#">关于OPPO</a></li>
					<li><a href="#">新闻中心</a></li>
					<li><a href="#">人才招聘</a></li>
				</ol>
			</li>
			<li>
				<ol>
					<li><span class="xl"></span><a href="#">新浪微博</a></li>
					<li><span class="xl"></span><a href="#">腾讯微博</a></li>
					<li><span class="xl"></span><a href="#">人人网</a></li>
					<li><span class="xl"></span><a href="#">QQ空间</a></li>
				</ol>
			</li>
			<li>
				<ol>
					<li><a href="#">关于我们</a></li>
					<li><a href="#">关于OPPO</a></li>
					<li><a href="#">新闻中心</a></li>
					<li><a href="#">人才招聘</a></li>
				</ol>
			</li>
		</ul>
	</div>
</div>
<!-- 页面的底部 -->
<div id="footer">
	<div class="container">
		<p>
			<img src="img/i-f-logo.png">
			<span>@2020 北京市xxxxxxx</span>
			<a href="#">版权说明</a>
			<a href="#">版权说明</a>
			<a href="#">版权说明</a>
			<a href="#">版权说明</a>
			<a href="#">版权说明</a>
		</p>
	</div>
</div>
<script type="text/javascript" src="js/swiper.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
	var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        loop: true,
        autoplay: 3000,

        
        speed: 1000,
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        effect: 'fade',//  effect: 'flip',effect: 'coverflow',slide', 'fade',cube
        grabCursor: true,
        cube: {
            shadow: false,
            slideShadows: false,
            shadowOffset: 20,
            shadowScale: 0.94
        }
    });
</script>
</body>
</html>

页面预览如下：

仍是个未知数
关注
  • 7
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
仿oppo官网页面，前端初学，html css js.zip
07-13
前端初学者的福利啦，基于html，css，js做的OPPO官网页面源码，有需要的小伙伴可以下载看看哦
产品战略规划十步法ppt_PPT案例：大神用PPT还原手机官网，除了不能买手机，其他什么都行...
weixin_42523907的博客
12-26 115
作为一名PPTer，经常会通过不同的方式来浏览一些设计方案，寻求灵感。前不久，我浏览到OPPO官网时，突然有个想法：“可不可以用PPT来模拟生成一个网站呢？”也许是“大米吃多了”。这个想法让我十分兴奋抑制不住激情，废话不多说，撸起袖子干起来！一、“OPPO”原网站布局分析首先，我们来看一下原版官网的画面布局，在banner顶部依次是logo、导航栏。下滑会出现其他型号的机型。点击导航栏会出现下拉二...
仿Oppo手机官网，html+css
09-12
html5+css,是现在非常流行的开发模式，这是我的一个例子，是仿oppo手机官网
仿oppo网站
我是一只蘑菇17的博客
12-15 563
网址 仿照网址：https://www.opposhop.cn/cn/web/ 初版（没有响应式）github:https://github.com/fj17xz/oppo0 效果图 首页： 登录页 注册页 笔记 仿oppo网站 1.网址：https://www.opposhop.cn/cn/web/ 2.初始化 normalize.css https://github.com/necolas/normalize.css
仿oppo网站（前端静态页面）.rar
08-08
仿oppo网站（前端静态页面）.rar
OPPO手机官网制作
Wdderxu的博客
10-25 376
OPPO手机页面制作
OPPO官网页面前端代码
01-10
OPPO官网页面前端代码
菜鸟成长史-Web网页设计-MIUI10网页模仿.zip
10-07
【标题】"菜鸟成长史-Web网页设计-MIUI10网页模仿.zip" 提供了一个初学者在Web网页设计领域的学习案例，特别是针对MIUI10界面风格的模仿。这通常意味着我们将探讨HTML（超文本标记语言）和前端开发技术。 【描述】...
菜鸟驿站的微信小程序页面模板源码
最新发布
05-18
菜鸟驿站的微信小程序页面模板源码下载是使用微信WEB开发者工具开发，亲测可直接运行。该程序包含了详细完整的框架架构结构，从设计上满足了相关应用服务的设计要求，是一款非常值得学习简介的DEMO小程序源码。
Java 菜鸟 成长日记
11-27
主要是在项目开发和工作中关于Java知识的总结，架构的分析，报表使用的总结，开发中问题的整理和分析以及oracle和MySQL使用情况的整理分析，希望能通过自己的分享给大家带来便利和帮助
oppo网站设计
06-11
电子商务网站设计是信息管理与信息系统专业的重要实践课程。设置本课程的目的是让学生掌握网站系统开发的基本思想和途径，为从事计算机系统开发和应用奠定良好的基础。电子商务网站设计课程作为独立的教学环节，是信息管理与信息系统专业集中实践性环节系列之一，是学习完有关开发方法和工具后进行的一次的实践检验。其目的在于加深对网站规划和设计基础理论和基本知识的理解，掌握使用网站分析、设计的基本方法，提高解决实际问题、开发系统的实践能力。
基于html5的oppo官网模板.rar
11-16
基于html5的oppo官网模板
OPPO网站 HTML +CSS
04-19
OPPO网站的仿制，HTML+CSS文件。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
oppo（内含图片素材）.rar
08-25
学完html和css基础就可以独立制作的网页，制作网页的图片素材都在压缩包中，可以用它来检验自己的水平
ASP.NET菜鸟之路之Response小例子
12-22
　我是一个ASP.NET菜鸟，暂时开始学习ASP.NET，在此记录下我个人敲的代码，没有多少参考价值，请看到的盆友们为我点个赞支持我一下，多谢了。 　Response.Write Redirect 　Response.Write()用于向客户端输出一段...
ASP.NET菜鸟之路之Application小例子
12-22
　我是一个ASP.NET菜鸟，暂时开始学习ASP.NET，在此记录下我个人敲的代码，没有多少参考价值，请看到的盆友们为我点个赞支持我一下，多谢了。 　Session介绍 　Application对象用来保存对所有用户共享的信息，...
web课程设计：HTML+CSS+JavaScript仿oppo官网手机商城(1页)
而风不止
12-15 271
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站
热门推荐
VX_WJ88950106的博客
08-06 2万+
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
菜鸟教程html网页设计
04-27
您好，欢迎来到菜鸟教程！要学习HTML网页设计，首先需要掌握HTML语言的基础知识，包括HTML标签、属性、元素等。您可以通过阅读相关的教程和文档来学习这些基础知识。 在掌握了HTML语言的基础知识后，您可以开始学习网页布局、样式设计等内容，例如CSS样式表、响应式设计等。 最后，为了提高自己的实战能力，您可以尝试编写一些小型的网页项目，例如个人简历、博客等。希望我的回答能够帮助您入门HTML网页设计。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值