本特效支持PC浏览器和触屏浏览器。

效果展示 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

响应式手机商城页面顶部样式HTML代码的更多相关文章

  1. 响应式的账号登录界面模板完整代码，内置form表单和js控件

    响应式的账号登录界面模板,内置form表单和js控件 <!DOCTYPE html> <html lang="en"><head><met ...

  2. 前端笔记之移动端&响应式（下）默认样式&事件&惯性抛掷&swiper&loaction对象

    一.移动端默认样式 ·IOS和Android下触摸元素时出现半透明灰色遮罩 a,input,button{ -webkit-tap-highlight-color: transparent; } ·I ...

  3. cssSlidy.js 响应式手机图片轮播

    cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等. 在线实例 实例演示 使用方法 <div id="slidy-container"& ...

  4. html5/css3响应式页面开发总结

    一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...

  5. H5 前端页面适配响应式

    辞职有半个月了,面试了几家公司,还在挣扎中.... 不废话,H5页面适配成响应式,可以用百分比或者rem. rem是相对于html根元素的单位,可以根据根元素的大小做出等比缩放, 通常,假如设置,ht ...

  6. Connect教程系列--响应式布局(一)

    微软终于跨平台了,最近在第九频道(Event-Visual Studio)下面出来一系列关于vs2015的视频,介绍vs2015以及.NET5.0的新特性等,现针对其讲解的.NET和ASP.NET,进 ...

  7. html5/css3响应式布局介绍及设计流程

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

  8. flex布局 响应式布局

    移动端页面开发流程   移动端页面布局 一.移动端app分类 1.Native App原生app手机应用程序 使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是objec ...

  9. 【css】响应式布局入门【转】

    最近研究响应式设计框架的时候,发现网上很多相关的属性介绍,却很少有系统的入门级使用的文章,我自己整理了一篇入门知识,并没有什么高深的理论,也不牵扯到框架. 目前已经越来越多的站点以及wap站点使用响应 ...

随机推荐

  1. ECharts数据图表系统？ 5分钟上手！

    目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...

  2. 万向节锁(Gimbal Lock)的理解

    [TOC] 结论 我直接抛出结论: Gimbal Lock 产生的原因不是欧拉角也不是旋转顺序,而是我們的思维方式和程序的执行逻辑没有对应,也就是说是我们的观念导致这个情况的发生. 他人解释 首先我们 ...

  3. 钉钉开放平台demo调试异常问题解决：hostname in certificate didn't match

    今天研究钉钉的开放平台,结果一个demo整了半天,这帮助系统写的也很难懂.遇到两个问题: 1.首先是执行demo时报unable to find valid certification path to ...

  4. XSS 前端防火墙 —— 无懈可击的钩子

    昨天尝试了一系列的可疑模块拦截试验,尽管最终的方案还存在着一些兼容性问题,但大体思路已经明确了: 静态模块:使用 MutationObserver 扫描. 动态模块:通过 API 钩子来拦截路径属性. ...

  5. CYQ.Data V5 从入门到放弃ORM系列：教程 - MProc类使用

    MProc介绍 MProc:是一个用于执行SQL或存储过程的数据库操作类,它轻量高性能地类似于Dapper. MProc:它出现的场景很少,因为MAction自身就能处理掉90%-100%的数据操作( ...

  6. 通过Mono 在 Heroku 上运行 .NET 应用

    英文原文:Running .NET on Heroku 中文原文:在 Heroku 上运行 .NET 应用 自从加入了Heroku之后,我就想在这个平台上运行.NET程序.现在我很高兴向大家宣布,我们 ...

  7. 安全防范：nginx下git引发的隐私泄露问题

    安全防范:nginx下git引发的隐私泄露问题 1   安全事件 最近阿里云服务器后台管理系统中收到一条安全提示消息,系统配置信息泄露: http://my.domain.com/.git/confi ...

  8. HTPC家庭娱乐和XBOX未来发展畅想<另：创业工作机会>

    微软中国在上海举办新闻发布会,正式宣布Xbox One将于9月23日在中国开始销售,定价3699元起.这款早在2001年就发布的电视游戏机终于在经历了14年的等待后,进军中国大陆市场.此次Xbox O ...

  9. 跨越语言的障碍：C++/CLI 调用 C#

    首先我想投诉一下博客园首页右边栏的广告..最近总是出现很恐怖的整容脸的广告.真的是吓坏了.=.=大家有同感吗? 博客园前一阵子掀起了语言的广泛讨论,事实上语言的争执在整个程序员圈子也没有停止过.以我个 ...

  10. magic方法的magic

    事实上,在python中一个类被实例化的时候首先被调用的并不是__init__方法,而是__new__方法.只是new方法一般很少重写.new方法会有返回值传给init方法.因此,init方法不能够有 ...