本特效支持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. [Django]用户权限学习系列之权限管理界面实现

    本系列前三章: http://www.cnblogs.com/CQ-LQJ/p/5604331.htmlPermission权限基本操作指令 http://www.cnblogs.com/CQ-LQJ ...

  2. Spring WebService入门

    Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发布.发现.协调和配置这些应用程序,用于开发分布 ...

  3. 魅力 .NET：从 Mono、.NET Core 说起

    前段时间,被问了这样一个问题:.NET 应用程序是怎么运行的? 当时大概愣了好久,好像也没说出个所以然,得到的回复是:这是 .NET 程序员最基本的...呵呵! 微软开源,其实不只是对 .NET 本身 ...

  4. 【腾讯Bugly干货分享】Android性能优化典范——第6季

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/580d91208d80e49771f0a07c 导语 这里是Android性能优 ...

  5. Unity3D和Egret3D的基情

    Unity3D依靠多平台发布这个核心特点,目前如日中天,屌丝引擎之王绝无来者.Egret白鹭引擎,也着实在微信上刷了一屏又一屏.这二者似乎风马牛不相及,但是这个无处不搞基的年代,让一切皆有可能. U3 ...

  6. Entity Framework 6 Recipes 2nd Edition（12-1）译 -> 当SaveChanges( ) 被调用时执行你的代码

    第12章定制EF 在本章的小节里,定制实体对象和EF处理的一些功能.这些小节将涵盖很多”幕后”的事情,能让你的代码更加统一解决一些事情,比如用一个业务规则中心统一地为实体执行验证. 本章开始的小节,将 ...

  7. 从Fiddler抓包到Jmeter接口测试(简单的思路)

    备注:本文为博主的同事总结的文章,未经博主允许不得转载. Fiddler下载和配置安装 从网上下载fiddler的安装包即可,直接默认,一直点击下一步,直至安装完成. 安装完成后直接打开Fiddler ...

  8. [CentOs7]搭建ftp服务器(2)——添加用户

    摘要 上篇文章完成了ftp服务器的安装与匿名访问的内容,当然出于安全的考虑是不允许匿名访问服务器的,所以就有了本篇的内容 ,为ftp服务器添加用户,用改用户进行访问. vsftpd添加用户 FTP用户 ...

  9. ERP程序开发中遇到的六种错误

    经常回顾同事写的代码,发现一些问题,总结分析,用于员工培训,或系统优化方面的内容教学. 文中有问题的的代码我用黑体字标识. 1 界面与逻辑代码混淆 这是目前发现的比较严重的问题.框架花费了很大的力气, ...

  10. 解析大型.NET ERP系统 高质量.NET代码设计模式

    1 缓存 Cache 系统中大量的用到缓存设计模式,对系统登入之后不变的数据进行缓存,不从数据库中直接读取.耗费一些内存,相比从SQL Server中再次读取数据要划算得多.缓存的基本设计模式参考下面 ...