本特效支持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. Android之SharedPreferences数据存储

    一.SharedPreferences保存数据介绍 如果有想要保存的相对较小键值集合,应使用SharedPreferences API.SharedPreferences对象指向包含键值对的文件并提供 ...

  2. Python学习基础

    1.使用范围: 大数据 .图像处理.web .运维.爬虫.自动化.科学计算 2.准备环境: linux/mac python 3.5.2 ipython vim/sublime/atom 3.列表 3 ...

  3. SpringMvc中的数据校验

    SpringMvc中的数据校验 Hibernate校验框架中提供了很多注解的校验,如下: 注解 运行时检查 @AssertFalse 被注解的元素必须为false @AssertTrue 被注解的元素 ...

  4. 用apt-file解决找不到头文件的问题

    在编译C语言的开源项目的时候,经常会出现头文件找不到的问题. 解决这类问题有一个特别好用的工具apt-file 1.在ubuntu下安装 sudo apt install apt-file 2.更新索 ...

  5. Windows 上安装 Jekyll.

    Jekyll是一个静态网站生成工具.它允许用户使用HTML.Markdown或Textile来建立静态页面,然后通过模板引擎Liquid(Liquid Templating Engine)来运行. 原 ...

  6. 应用r.js来优化你的前端

    r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器的文件请求.要使用 ...

  7. Electron 不完全快速手册

    Electron能干嘛 Vscode 基于Electron开发的,他是用来开发桌面软件的,可以轻易的跨平台 他的前身是atomshell,图标很丑,不用在意,一点也不像vscode也不用在意.   L ...

  8. CSharpGL(18)分别处理glDrawArrays()和glDrawElements()两种方式下的拾取(ColorCodedPicking)

    CSharpGL(18)分别处理glDrawArrays()和glDrawElements()两种方式下的拾取(ColorCodedPicking) 我在(Modern OpenGL用Shader拾取 ...

  9. es6之let和const

    在javascript中,我们都知道使用var来声明变量.javascript是函数级作用域,函数内可以访问函数外的变量,函数外不能访问函数内的变量. 函数级作用域会导致一些问题就是某些代码块内的变量 ...

  10. ceph架构剖析

    unitedstack有云 :https://www.ustack.com/blog/ceph_infra/