（27）-- 用Bootstrap写的OPPO官网商城
2024-05-30 22:47:52
#用Bootstrap写的OPPO官网商城首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
body,ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
body{
height: 3000px;
padding-top:20px;
}
.item1,.item2,.item3,.item4{
width: 186px;
height: 140px;
float: left;
}
.item5{
width: 200px;
height: 140px;
float: right;
}
.item6{
width: 40%px;
height: 25px;
float: left;
}
.item7{
width: 20%px;
height: 25px;
float: right;
}
</style>
<link rel="stylesheet" href="./public/css/bootstrap.min.css">
<script src="./public/js/jQuery.1.12.4.js"></script>
<script src="./public/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="row">
<div class="col-md-3"> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">OPPO</a>
</div></div>
<div class="col-md-6"><!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<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>
<li><a href="#">云服务</a></li>
</ul>
</div></div>
<div class="col-md-3"><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">用户菜单<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">购物车</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">我的订单</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">个人中心</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">登录</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse --></div>
</div>
</nav>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
<li data-target="#carousel-example-generic" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./picture/201801031101085a4c4a80dc4f7.jpg" alt="...">
<div class="carousel-caption">
OPPO
</div>
</div>
<div class="item">
<img src="./picture/201712041012115a255e4b9b521.jpg" alt="...">
<div class="carousel-caption">
R11
</div>
</div>
<div class="item">
<img src="./picture/201712041012275a255d6b27233.jpg" alt="...">
<div class="carousel-caption">
2000wpx
</div>
</div>
<div class="item">
<img src="./picture/201712041012285a255c404c6dd.jpg" alt="...">
<div class="carousel-caption">
camera
</div>
</div>
<div class="item">
<img src="./picture/201712041012475a255eabd065f.jpg" alt="...">
<div class="carousel-caption">
big screen
</div>
</div>
<div class="item">
<img src="./picture/201712041012545a255d0eced53.jpg" alt="...">
<div class="carousel-caption">
R11s
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="row container-fluid" >
<div class="col-xs-12 col-md-6" style="text-align: center ;"><img src="./picture/201712260112275a41e503ceb6b.jpg" class="img-responsive" alt="Responsive image">
R11s 高配版 6GB 运存+128GB 内存 ¥3599
</div>
<div class="col-xs-12 col-md-6" style="text-align: center;"><img src="./picture/201712140712305a325bea559f1.jpg" class="img-responsive" alt="Responsive image">
A73 更清晰的全面屏手机 ¥1699
</div>
</div>
<div class="row" >
<div class="col-xs-12 col-md-6" style="text-align: center;"><img src="./picture/201712261012535a41b81df157f.jpg" class="img-responsive" alt="Responsive image">
A83 大屏大内存手机 ¥1399
</div>
<div class="col-xs-12 col-md-6" style="text-align: center;"><img src="./picture/201712041012145a2560a67a0af.jpg" class="img-responsive" alt="Responsive image">
A57 前置 1600 万美颜自拍 ¥1299
</div>
</div>
<div class="row" >
<div class="col-xs-12 col-md-6" style="text-align: center;"><img src="./picture/201712220212575a3ca1f1ee628.jpg" class="img-responsive" alt="Responsive image">
A79 充电更快的全面屏手机 ¥2099
</div>
<div class="col-xs-12 col-md-6" style="text-align: center;"><img src="./picture/201712051212495a257e151dd45.jpg" class="img-responsive" alt="Responsive image">
A77 3GB + 32GB ¥1599
</div>
</div>
<br><br>
<div class="row container-fluid" >
<div class="col-md-4" style="text-align: center" ><img src="./picture/201801171101035a5ebf3f50542.png" class="img-responsive" alt="Responsive image">
入耳式耳机 MH133 ¥39
</div>
<div class="col-md-4" style="text-align: center"><img src="./picture/201801220101575a657d656f4a4.png" class="img-responsive" alt="Responsive image">
VOOC 车载闪充 V103 ¥149
</div>
<div class="col-md-4" style="text-align: center"><img src="./picture/201801220201205a65804cf153a.png" class="img-responsive" alt="Responsive image">
自拍杆 樱花粉 ¥39
</div>
</div>
<div class="row container-fluid" >
<!-- <div class="col-md-4" style="text-align: center"><img src="./picture/201712041012485a2561b818176.png" alt="..." >
闪充电源适配器 AK779 ¥79
</div> -->
<div class="col-md-4" style="text-align: center"><img src="./picture/201712041012545a2561be58fe2.png" class="img-responsive" alt="Responsive image">
电源适配器 ¥19
</div>
<div class="col-md-4" style="text-align: center"><img src="./picture/201712041012005a2561c456f3d.png" class="img-responsive" alt="Responsive image">
闪充 USB 数据线 ¥29
</div>
<div class="col-md-4" style="text-align: center"><img src="./picture/201712041012335a2561a9a1636.png" class="img-responsive" alt="Responsive image">
自拍杆晴空蓝 ¥39
</div>
</div>
<!-- <div class="col-md-3" style="text-align: center"><img src="./picture/201712041012055a2561c90428d.png" alt="..." >
充电器
</div> -->
<!-- <div class="col-md-6" style="text-align: center"><img src="./picture/201712041012145a2561964ae78.jpg" alt="...">
入耳式耳机 MH130 ¥59
</div> -->
<!-- <div class="col-md-3" style="text-align: center"><img src="./picture/201801160801265a5de95ac69b5.png
" alt="..." >
小充电器 VC54JBCH ¥79
</div> -->
<br><br><br><br><br>
<div class="row container-fluid hidden-xs" >
<div class="col-md-2" style="text-align: center"><img src="./picture/oc-qecode-alipay.png
" alt="..." >
1 年全国联保
</div>
<div class="col-md-2" style="text-align: center"><img src="./picture/oc-qecode-alipay.png
" alt="..." >
7 天退货保障
</div>
<div class="col-md-2" style="text-align: center"><img src="./picture/oc-qecode-alipay.png
" alt="..." >30天换货保障
</div>
<div class="col-md-2" style="text-align: center"><img src="./picture/oc-qecode-alipay.png
" alt="..." >
全场包邮
</div>
<div class="col-md-2" style="text-align: center"><img src="./picture/oc-qecode-alipay.png
" alt="..." >555家售后</div>
<div class="col-md-2" style="text-align: center"><img src="./picture/oc-qecode-alipay.png
" alt="..." >
正品保障
</div>
</div>
</div>
<br><br><br>
<hr ></hr>
<div class="item1 hidden-xs">
<div class="item1_top" >
<h4 align="center">推荐机型</h4>
</div>
<div class="item1_bottom">
<ul align="center">
<li>R11s</li>
<li>A73</li>
<li>A57</li>
<li>A79</li>
</ul>
</div>
</div>
<div class="item2 hidden-xs">
<div class="item2_top" >
<h4 align="center">服务</h4>
</div>
<div class="item2_bottom">
<ul align="center">
<li>服务网点查询</li>
<li>零配件价格查询</li>
<li>官方授权网店</li>
<li>预置软件公示</li>
</ul>
</div>
</div>
<div class="item3 hidden-xs">
<div class="item3_top" >
<h4 align="center">关于我们</h4>
</div>
<div class="item3_bottom">
<ul align="center">
<li>关于 OPPO</li>
<li>加入我们</li>
</ul>
</div>
</div>
<div class="item4 hidden-xs">
<div class="item4_top" >
<h4 align="center">商务合作</h4>
</div>
<div class="item4_bottom">
<ul align="center">
<li>开放平台</li>
<li>采购相关</li>
</ul>
</div>
</div>
<div class="item5 hidden-xs">
<div class="item5_top" >
<h4 align="center">在线客服</h4>
</div>
<div class="item5_bottom">
<ul align="center">
<li><h3>4001-666-888</h3></li>
<li><h5>24 小时全国热线</h5></li>
</ul>
</div>
</div>
<br><br><br><br><br><br>
<hr ></hr>
<div class="item6 ">
<h6 >© 2005 - 2018 OPPO 版权所有 粤ICP备14056724号-2
</h6>
</div>
<div class="item7 ">
<h6 >关注我们：
oppp官方微博
oppp官方微信
Global
</h6>
</div>
</body>
</html>
兄弟连学python
Python学习交流、资源共享群：563626388 QQ
（27）-- 用Bootstrap写的OPPO官网商城相关推荐
- 【源码共享】我花2小时写了微信官网的响应式布局HTML+CSS 换成旅行主题风格更炫酷了
微信官网仿写效果 ↑ 移动端响应式效果 ↑ 微信官网首页,简约干净,能学习写好这个首页,就能掌 握HTML网页设计前端盒子的布局.嵌套,及css效果的 使用... 微信官网首页主要有以下几个需要关注的 ...
- 制作一个静态oppo官网页面
一个静态的oppo官网页面制作过程 文章目录 一.项目准备 二.过程编写 1.版心和顶通盒子 2.顶通栏 3.头部 4.banner 5.内容_明星机型 5.1.明星机型标题区域 5.2.手机结构 6 ...
- 买新机去OPPO官网还是线下实体店？一文带你了解其中区别
众所周知,OPPO Find X3 系列将于3月19日开卖,其凭借全链路 10bit 色彩引擎.双主摄.显微镜头等亮眼配置,已然吸引了不少消费者,大家都按耐不住想要剁手的心了.虽然网购已成为当今人们消 ...
- 手把手带你写米课官网
手把手带你写米课官网 人生没有白走的路,每一步都算数,大家好,我是小王,今天,手把手教你写一个米课官网原创不易,希望大家多多支持! 需要源代码或者素材的评论区留言.大家记得关注我哦!我会不定期的跟大家 ...
- HTML5期末大作业：仿苏宁易购商城网站设计——仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业
HTML5期末大作业:仿苏宁易购商城网站设计--仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...
- 网页设计作业 仿苏宁易购商城网站设计——仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业
HTML5期末大作业:仿苏宁易购商城网站设计--仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...
- 我为什么要写FansUnion个人官网-BriefCMS-电子商务malling等系统
不少朋友一直关注我最近几个月,已经做的和正在做的项目,比如个人官网.BriefCMS.电子上午malling等系统. 但是呢,部分朋友比较好奇,为啥要去写.他们比较疑惑的是,市面上已经有很多类似的系统 ...
- OPPO官网web界面开发案例
成品 一.框架实现 构建top,header,nav,banner,star,accessory,world,serve,after_sale,footer10个部分框架,然后再逐步构建每一部分. i ...
- oppo官网首页html代码里,仿oppo官网手机商城建站模板html源码
OPPO仿建站模板html下载 资源下载此资源下载价格为4D币,请先登录 资源文件列表 codedown123-0802-27/css/base.css , 569 codedown123-0802- ...
最新文章
- sun服务器清理内存日志_SUN 服务器消除黄灯告警灯详情教程
- Vue.js TypeScript 支持
- 【通知】3月当当购书大额优惠券赠送，仅限今明两天
- Django从理论到实战(part18)--配置templates文件夹路径
- php月历,PHP生成月历代码
- 6. Observable 和 数组的区别
- FAT32U盘挂载无法更改权限记录
- matlab菲涅尔衍射光强分布,矩孔菲涅耳衍射的光强分布.pdf
- 安装Alfa Awus 1900 驱动到 Kali Linux
- 2009年中国直销业9大主旋律
- java将数据库数据转换成word文档并且生成pdf文件最后转换成对应的图片
- Zynq7跑peta linux,ZYNQ跑系统 系列（二） petalinux方式移植linux petalinux-config遇到问题...
- python相关性分析模型,相关性分析原理及Python实战
- 中职组网络安全教你如何正确的颁发证书
- 数据之美（九）：50个精美绝伦的 Infographics（上）
- vim 插入模式小技巧
- 怎么把ide改成ahci_怎样把已安装好的IDE硬盘模式改成AHCI模式 格式已整理 可直接下载打印...
- Docker---docker安全加固之安全隔离
- 汽车车漆计算机调色的基本程序,汽车喷漆调色有什么程序标准
- 复盘2020年全球科技行业：5G建设加速、半导体行业洗牌、云计算爆发 | TMT观察...