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

于 2020-06-10 21:33: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
    评论
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值