本特效支持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 Handler介绍

    Handler使用介绍: Handler根据接收的消息,处理UI更新.Thread线程发出消息,通知Handler更新UI. Handler mHandler = new Handler() {  p ...

  2. ORACLE从共享池删除指定SQL的执行计划

    Oracle 11g在DBMS_SHARED_POOL包中引入了一个名为PURGE的新存储过程,用于从对象库缓存中刷新特定对象,例如游标,包,序列,触发器等.也就是说可以删除.清理特定SQL的执行计划 ...

  3. [转]nopCommerce Widgets and How to Create One

    本文转自:https://dzone.com/articles/what-are-nopcommerce-widgets-and-how-to-create-one A widget is a sta ...

  4. 一步步开发自己的博客 .NET版（9、从model first替换成code first 问题记录）

    为什么要改用code first 用过code first的基本上都不会再想用回model first或是db first(谁用谁知道).不要问我为什么不一开始就直接使用code first,因为那个 ...

  5. Fedora 22中的DNF软件包管理工具

    Introduction DNF is the The Fedora Project package manager that is able to query for information abo ...

  6. JS入门

    1,undefined,NaN,Null,infinity 1) undefined 是undefined 类型 var a; //声明变量后不赋值 typeof 类型判断方法 console.log ...

  7. jQuery +ajax +json+实现分页

    正文 首先我们创建一般处理程序,来读取数据库中内容,得到返回值. 创建文件,GetData.ashx. 我这里是用的存储过程,存储过程会再下面粘出来,至于数据只是实例,你们可根据需求自行读取数据 代码 ...

  8. 在网上摘录一段对于IOC的解析，比较直观，大家观摩观摩

    其实IoC非常简单,基本思想就是面向接口的编程,只是老外给起了个名字名充分利用之. 简单的说,传统模式下,如果你要用钱,你需要去银行取,IoC模式下,银联在你家安了一个取款机,你直接找取款机要钱就可以 ...

  9. SQL Saturday 北京将于7月25日举办线下活动，欢迎参加

          地点:北京微软(中国)有限公司[望京利星行],三层308室     报名地址:https://onedrive.live.com/redir?page=survey&resid=f ...

  10. Android线程管理之AsyncTask异步任务

    前言: 前面几篇文章主要学习了线程以及线程池的创建与使用,今天来学习一下AsyncTask异步任务,学习下AsyncTask到底解决了什么问题?然而它有什么弊端?正所谓知己知彼百战百胜嘛! 线程管理相 ...