本特效支持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. iOS开源项目周报1229

    由OpenDigg 出品的iOS开源项目周报第三期来啦.我们的iOS开源周报集合了OpenDigg一周来新收录的优质的iOS开发方面的开源项目,方便iOS开发人员便捷的找到自己需要的项目工具等. Ma ...

  2. [AlwaysOn Availability Groups]健康模型 Part 1——概述

    健康模型概述 在成功部署AG之后,跟踪和维护健康状况是很重要的. 1.AG健康模型概述 AG的健康模型是基于策略管理(Policy Based Management PBM)的.如果不熟悉这个特性,可 ...

  3. angularJS（5）

    angularJS(5) 一,数据循环:特别要注意作用域 使用ng-repeat指令. <div ng-app="myApp" ng-controller="myC ...

  4. ASP.NET MVC Model元数据(一)

    ASP.NET MVC Model元数据(一) 前言 在我初学的时候对Model元数据的概念很模糊,或者说是在大脑中没有它的一个模型,作为小白的我去看网上的一些文章还是两眼一黑啥都看不明白,然后我想退 ...

  5. 解决CSharpGL使用CGCompiler时发现的几个问题

    解决CSharpGL使用CGCompiler时发现的几个问题 为了获取CSharpShadingLanguage的token流,我设计了这样一个文法: <Expression> ::= & ...

  6. OAuth认证原理及HTTP下的密码安全传输

    很多人都会问这样一个问题,我们在登录的时候,密码会不会泄露?随便进一个网站,登录时抓包分析,可以看到自己的密码都是明文传输的,在如此复杂的web环境下,我们没有百分的把握保证信息在传输过程中不被截获, ...

  7. Vim常用命令

    一.插入命令 a 在光标所在字符后插入A 在光标所在行尾插入i 在光标所在字符前插入I 在光标所在行首插入o 在光标下插入新行O 在光标上插入新行 二.定位命令 :set nu 设置行号:set no ...

  8. python __globals__, __file__

    Attribute Meaning   __doc__ The function's documentationstring, or None ifunavailable; not inherited ...

  9. 【Win 10 应用开发】在后台进行多媒体转码

    前面,老周给大伙儿讲了如何运用 MediaTranscoder 类来完成多媒体.然而,你懂的,要是多媒体文件比较大,转码时间会更长,有可能用户不会一眭停在当前应用界面上,或许会切换到其他应用程序,甚至 ...

  10. Android消息传递之Handler消息机制

    前言: 无论是现在所做的项目还是以前的项目中,都会遇见线程之间通信.组件之间通信,目前统一采用EventBus来做处理,在总结学习EventBus之前,觉得还是需要学习总结一下最初的实现方式,也算是不 ...