响应式手机商城页面顶部样式HTML代码
2016-09-27 10:20
309 查看
本特效支持PC浏览器和触屏浏览器。
效果展示 http://hovertree.com/texiao/bootstrap/8/
手机扫描二维码体验效果:
HTML代码如下:
转自:http://hovertree.com/h/bjaf/yd5tssek.htm
web前端特效:http://www.cnblogs.com/jihua/p/webfront.html
效果展示 http://hovertree.com/texiao/bootstrap/8/
手机扫描二维码体验效果:
HTML代码如下:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>BootStrap自适应HTML模版之商城首页_何问起</title> <base target="_blank" /> <link href="http://hovertree.com/ziyuan/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <script src="http://down.hovertree.com/jquery/jquery-1.12.4.min.js"></script> <script src="http://hovertree.com/ziyuan/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style type="text/css"> .my-row { margin: 15px auto; } .my-ul { margin-top: 18px; } .my-nav { margin-bottom: 3px; } .my-sming img { height: 120px; width: 120px; } .my-sming div { height: 180px; text-align: center; } </style> </head> <body> <div class="container"> <div class="row my-row"> <div class="col-md-4 col-sm-6 col-xs-6"> <img src="http://hovertree.com/texiao/bootstrap/8/img/logo2.png" /> </div> <div class="col-md-5 hidden-sm hidden-xs"> <img src="http://hovertree.com/texiao/bootstrap/8/img/header.jpg" /> </div> <div class="col-md-3 col-sm-6 col-xs-6"> <ul class="list-inline my-ul"> <li><a href="http://hovertree.com/texiao/html5/12/">登录</a></li> <li><a href="http://hovertree.com/texiao/bootstrap/5/">注册</a></li> <li><a href="http://hovertree.com/menu/jquery/">购物车</a></li> </ul> </div> </div> <div class="row"> <!--导航条--> <nav class="navbar navbar-inverse my-nav"> <div class="container-fluid"> <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="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://hovertree.com/menu/bootstrap/" style="background-color: #000;">首页</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="http://hovertree.com/menu/texiao/">手机数码</a></li> <li><a href="http://hovertree.com/menu/html5/">电脑办公</a></li> <li><a href="http://hovertree.com/menu/webfront/">服饰鞋帽</a></li> <li><a href="http://hovertree.com/h/bjaf/yd5tssek.htm">原文</a></li> <li><a href="http://hovertree.com/map/">......</a></li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" name="hovertree" placeholder="请输入关键字"> </div> <button type="submit" class="btn btn-default">搜索</button> </form> </div> </div> </nav> </div> <div class="row"> <!--轮播图--> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000"> <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> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://hovertree.com/texiao/bootstrap/8/img/lbt01.jpg" alt="图片不存在"> </div> <div class="item"> <img src="http://hovertree.com/texiao/bootstrap/8/img/lbt02.jpg" alt="图片不存在"> </div> <div class="item"> <img src="http://hovertree.com/texiao/bootstrap/8/img/lbt03.jpg" alt="图片不存在"> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev" target="_self"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next" target="_self"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> </a> </div> </div> </div> </body> </html>
转自:http://hovertree.com/h/bjaf/yd5tssek.htm
web前端特效:http://www.cnblogs.com/jihua/p/webfront.html
相关文章推荐
- 纯css3手机页面图标样式代码
- 同一html页面中不同链接的不同样式的css代码
- 简单的html格式的手机页面登录代码
- HTML--如何实现通过鼠标事件拖动页面图像(代码)
- 按字节长度截取字符串(支持截取带HTML代码样式的字符串)
- [代码]HTML页面如何接收外部参数
- 只让页面转向 URL不变的HTML代码
- 生成HTML页面代码
- 在ASP.NET 2.0中直接得到本页面生成的HTML代码
- 精简的CSS代码,实现页面样式通用性。
- 用C#代码动态改变页面样式
- 在textarea中显示html页面的javascript代码
- 用C#代码动态改变页面样式
- 在textarea中显示html页面的javascript代码
- 在ASP.NET 2.0中直接得到本页面生成的HTML代码
- 用C#代码动态改变页面样式
- 在后台代码中控制HTML页面标记属性
- 示例代码:利用Sps提供的remoting服务,把office文档在线转换成html文档(包括页面图片的文件)
- 在ASP.NET 2.0中直接得到本页面生成的HTML代码
- 如何在html页面上随着鼠标的位置显示浮动层图片或别的东东?(附代码)