技术：HTML+CSS+JS+bootstrap
 

概述

这套代码响应式前端页面基本写完了，适合初学前端的同学，里面主要运用了HTML+CSS布局和动画，js逻辑较少，页面都是静态，未接入接口。响应式借助的是bootstrap这个库。

详细

bootstrap响应式学习参考源码，代码主要是通过bootstrap实现了响应式布局，简单易懂。

一、项目目录

二、演示效果
三、程序实现具体步骤

首页代码 index.html

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<link rel="stylesheet" href="css/bootstrap.css"/>

<link rel="stylesheet" href="css/view.css"/>

</head>

<body>

<div class="my-top">

<div class="container">

<div class="my-text">

<span class="glyphicon glyphicon-phone"></span>

<span>40012345678</span>

</div>

<div class="my-login">

<a href="login.html" class="btn btn-success">登录</a>

<a href="register.html" class="btn btn-success">注册</a>

</div>

</div>

<div id="my-home" class="container">

<div class="row">

<div class="col-xs-6 col-sm-2">

<a href="start.html">

<img src="img/logo.png"/>

</a>

</div>

<div class="col-xs-6 col-sm-10 col-md-4">

<form class="navbar-right navbar-form">

<div class="form-group has-feedback">

<label for="kw" class="sr-only">搜索关键字:</label>

<input type="text" id="kw" class="form-control" placeholder="产品搜索"/>

<span class="glyphicon glyphicon-search form-control-feedback"></span>

</div>

</form>

</div>

<div class="hidden-xs hidden-sm col-md-6">

<img src="img/top.jpg"/>

</div>

</div>

</div>

<div class="navbar" style="background:#C92323;margin-top: 20px;position: relative;z-index: 1000">

<div class="container">

<div class="navbar-header">

<div href="#my-menu" class="navbar-toggle" data-toggle="collapse"style="background: #ffffff">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</div>

</div>

<div id="my-menu" class="navbar-collapse collapse">

<ul class="nav navbar-nav">

<li><a href="start.html">首页</a></li>

<li><a href="about.html">关于我们</a></li>

<li><a href="product.html">产品商城</a></li>

<li><a href="news.html">新闻资讯</a></li>

<li><a href="deduct.html">推荐提成</a></li>

<li><a href="appointment.html">在线预约</a></li>

<li><a href="Alliance.html">招商加盟</a></li>

</ul>

</div>

</div>

</div>

</div>

<div class="my-center" style="margin:180px 0 20px 0;">

<div class="container">

<div class="carousel slide" data-ride="carousel" id="carousel" data-interval="3000">

<div class="carousel-inner">

<div class="item active">

<img src="img/banner02.jpg">

</div>

<div class="item">

<img src="img/banner01.jpg">

</div>

</div>

<a href="#carousel" data-slide="prev" class="carousel-control left">

<span class="glyphicon glyphicon-chevron-left"></span>

</a>

<a href="#carousel" data-slide="next" class="carousel-control right">

<span class="glyphicon glyphicon-chevron-right"></span>

</a>

</div>

</div>

</div>

<div class="container">

<div class="row">

<div class="col-xs-12 col-sm-4">

<div class="view_img">

<a href="#/product">

<div class="view_p">

<img class="img-responsive" src="img/start01-1.jpg"/>

</div>

<div  class="view_q">

<img class="img-responsive" src="img/start01.jpg"/>

</div>

</a>

</div>

</div>

<div class="col-xs-12 col-sm-4">

<div class="view_img">

<a href="#/product">

<div class="view_p">

<img class="img-responsive" src="img/start2-1.jpg"/>

</div>

<div  class="view_q">

<img class="img-responsive" src="img/start2.jpg"/>

</div>

</a>

</div>

</div>

<div class="col-xs-12 col-sm-4">

<div class="view_img">

<a href="#/product">

<div class="view_p">

<img class="img-responsive" src="img/start3.jpg"/>

</div>

<div  class="view_q">

<img class="img-responsive" src="img/start3-1.jpg"/>

</div>

</a>

</div>

</div>

</div>

<div class="row">

<div class="col-xs-12">

<div class="my-img">

<img class="img-responsive" src="img/banner03.jpg"/>

<i></i>

<!--<div class="my-p">-->

<!--酷夏新潮 新品上市-->

<!--</div>-->

</div>

</div>

</div>

</div>

<div class="container">

<div class="row">

<div class="col-xs-6 col-sm-3">

<div class="view_img">

<a href="#">

<div class="view_p">

<img class="img-responsive" src="img/1.jpg"/>

</div>

<div class="view_q">

<img class="img-responsive" src="img/1-1.jpg"/>

</div>

</a>

<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>

<p><s>￥799.00</s> <b>￥349</b></p>

</div>

</div>

<div class="col-xs-6 col-sm-3">

<div class="view_img">

<a href="#">

<div class="view_p">

<img class="img-responsive" src="img/2.jpg"/>

</div>

<div class="view_q">

<img class="img-responsive" src="img/2-1.jpg"/>

</div>

</a>

<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>

<p><s>￥799.00</s> <b>￥349</b></p>

</div>

</div>

<div class="col-xs-6 col-sm-3">

<div class="view_img">

<a href="#">

<div class="view_p">

<img class="img-responsive" src="img/3.jpg"/>

</div>

<div class="view_q">

<img class="img-responsive" src="img/3-1.jpg"/>

</div>

</a>

<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>

<p><s>￥799.00</s> <b>￥349</b></p>

</div>

</div>

<div class="col-xs-6 col-sm-3">

<div class="view_img">

<a href="#">

<div class="view_p">

<img class="img-responsive" src="img/4.jpg"/>

</div>

<div class="view_q">

<img class="img-responsive" src="img/4-1.jpg"/>

</div>

</a>

<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>

<p><s>￥799.00</s> <b>￥349</b></p>

</div>

</div>

<div class="col-xs-6 col-sm-3">

<div class="view_img">

<a href="#">

<div class="view_p">

<img class="img-responsive" src="img/5.jpg"/>

</div>

<div class="view_q">

<img class="img-responsive" src="img/5-1.jpg"/>

</div>

</a>

<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>

<p><s>￥799.00</s> <b>￥349</b></p>

</div>

</div>

<div class="col-xs-6 col-sm-3">

<div class="view_img">

<a href="#">

<div class="view_p">

<img class="img-responsive" src="img/6.jpg"/>

</div>

<div class="view_q">

<img class="img-responsive" src="img/6-1.jpg"/>

</div>

</a>

<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>

<p><s>￥799.00</s> <b>￥349</b></p>

</div>

</div>

<div class="col-xs-6 col-sm-3">

<div class="view_img">

<a href="#">

<div class="view_p">

<img class="img-responsive" src="img/7.jpg"/>

</div>

<div class="view_q">

<img class="img-responsive" src="img/7-1.jpg"/>

</div>

</a>

<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>

<p><s>￥799.00</s> <b>￥349</b></p>

</div>

</div>

<div class="col-xs-6 col-sm-3">

<div class="view_img">

<a href="#">

<div class="view_p">

<img class="img-responsive" src="img/8.jpg"/>

</div>

<div class="view_q">

<img class="img-responsive" src="img/8-1.jpg"/>

</div>

</a>

<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>

<p><s>￥799.00</s> <b>￥349</b></p>

</div>

</div>

<div class="col-xs-6 col-sm-3">

<div class="view_img">

<a href="#">

<div class="view_p">

<img class="img-responsive" src="img/9.jpg"/>

</div>

<div class="view_q">

<img class="img-responsive" src="img/9-1.jpg"/>

</div>

</a>

<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>

<p><s>￥799.00</s> <b>￥349</b></p>

</div>

</div>

<div class="col-xs-6 col-sm-3">

<div class="view_img">

<a href="#">

<div class="view_p">

<img class="img-responsive" src="img/10.jpg"/>

</div>

<div class="view_q">

<img class="img-responsive" src="img/10-1.jpg"/>

</div>

</a>

<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>

<p><s>￥799.00</s> <b>￥349</b></p>

</div>

</div>

<div class="col-xs-6 col-sm-3">

<div class="view_img">

<a href="#">

<div class="view_p">

<img class="img-responsive" src="img/11.jpg"/>

</div>

<div class="view_q">

<img class="img-responsive" src="img/11-1.jpg"/>

</div>

</a>

<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>

<p><s>￥799.00</s> <b>￥349</b></p>

</div>

</div>

<div class="col-xs-6 col-sm-3">

<div class="view_img">

<a href="#">

<div class="view_p">

<img class="img-responsive" src="img/12.jpg"/>

</div>

<div class="view_q">

<img class="img-responsive" src="img/12-1.jpg"/>

</div>

</a>

<p class="my-txt"><a href="#">Levi’s李维斯明星系列504男士标准直脚牛仔裤</a></p>

<p><s>￥799.00</s> <b>￥349</b></p>

</div>

</div>

</div>

</div>

<div class="container" style="margin-top: 100px">

<div id="my-bao" class="row">

<div class="hidden-xs col-sm-2">

<img src="img/start6.png"/>

<p>100%正品</p>

</div>

<div class="hidden-xs col-sm-2">

<img src="img/start5.png"/>

<p>客户认证好评</p>

</div>

<div class="hidden-xs col-sm-2">

<img src="img/start7.png"/>

<p>低价享受</p>

</div>

<div class="hidden-xs col-sm-2">

<img src="img/start8.png"/>

<p>快速发货</p>

</div>

<div class="hidden-xs col-sm-2">

<img src="img/start4.png"/>

<p>七天退货保障</p>

</div>

<div class="hidden-xs col-sm-2">

<img src="img/start6.png"/>

<p>100%满意</p>

</div>

</div>

<div id="my-footer" class="row">

<div class="hidden-xs col-sm-2">

<ul class="list-unstyled">

<li><h4>新手帮助</h4></li>

<li><a href="#">如何注册</a></li>

<li><a href="#">门店认证</a></li>

</ul>

</div>

<div class="hidden-xs col-sm-2">

<ul class="list-unstyled">

<li><h4>常见问题</h4></li>

<li><a href="#">订单状态</a></li>

<li><a href="#">发票说明</a></li>

</ul>

</div>

<div class="hidden-xs col-sm-2">

<ul class="list-unstyled">

<li><h4>支付方式</h4></li>

<li><a href="#">在线支付</a></li>

<li><a href="#">银行转账</a></li>

<li><a href="#">货到付款</a></li>

</ul>

</div>

<div class="hidden-xs col-sm-2">

<ul class="list-unstyled">

<li><h4>配送服务</h4></li>

<li><a href="#">范围及运费</a></li>

</ul>

</div>

<div class="hidden-xs col-sm-2">

<ul class="list-unstyled">

<li><h4>售后服务</h4></li>

<li><a href="#">退换货政策</a></li>

<li><a href="#">退换货流程</a></li>

<li><a href="#">联系客服</a></li>

</ul>

</div>

<div class="col-xs-12 col-sm-2">

<ul class="list-unstyled">

<li><h4>服务热线</h4></li>

<li><h4 style="color: #B22222;">4005-114-114</h4></li>

<li><img src="img/erweima.jpg" width="140" height="150"/></li>

</ul>

</div>

</div>

</div>

<div class="container-fluid">

<div class="fix"

style="width: 301px;height: 459px;position:fixed;bottom: -419px;left: 36px;  border: 1px solid #000">

<div style="width: 301px;height:40px; border-radius: 4px;background: #000;">

<p id="fix" style="color: #ffffff;padding: 10px;">联系我们</p>

</div>

<div style="background: #ffffff;padding: 20px;">

<span>您好，如有任何问题，请填写下面的表单。我们将会在第一时间联系您。</span>

<p style="margin: 10px 0">使用QQ和我们在线交谈</p>

<a href="#"><img src="img/pa.jpg" alt=""/></a>

<form>

<div class="form-group">

<label for="uname" class="control-label">您的姓名：</label>

<input id="uname" class="form-control" type="text" placeholder="请填写您的姓名(必填项)"/>

</div>

<div class="form-group">

<label for="em" class="control-label">邮件地址：</label>

<input id="em" class="form-control" type="email" placeholder="邮件地址(必填项)"/>

</div>

<div class="form-group">

<label for="zx" class="control-label">请告诉我您想咨询的问题：</label>

<textarea name="zx" id="zx" cols="30"></textarea>

</div>

<div class="text-center">

<a href="#" class="btn btn-info">发送</a>

</div>

</form>

</div>

</div>

</div>

<script src="js/jquery-1.11.3.js"></script>

<script src="js/bootstrap.js"></script>

<script>

$("#fix").click(function () {

var dd = $(".fix");

if (dd.css("bottom") == '0px') {

dd.css("bottom", -419);

} else {

dd.css("bottom", 0);

}

})

</script>

</body>

</html>

首页代码 index.css

.my-top{

height: 50px;

line-height: 50px;

background: #333951;

}

.my-text{

color: #ffffff;

float:left;

}

.my-login{

float:right;

}

#my-menu .navbar-nav li a{

color:#FFF;

font-weight: bold;

}

#my-menu .navbar-nav li a:hover{

background: #a9130d;

}

#my-home{

margin-top:20px ;

}

#my-bao{

padding-bottom:50px;

border-bottom: 1px solid #DDDDDD;

margin-bottom: 30px;

}

#my-bao .col-sm-2{

text-align: center;

}

#my-footer .col-sm-2 .list-unstyled li{

margin-top: 10px;

}

#my-footer .col-sm-2 .list-unstyled li a{

color:#555452;

}

#my-footer .col-sm-2 .list-unstyled li a:hover{

text-decoration: none;

color:#E64F75;

}

.my-all h4{

padding-left: 5px;

height: 50px;

line-height: 50px;

color: #ffffff;

background:#E14F4F;

}

#my-ul{

margin-top: -8px;

border: 1px solid #DDDDDD;

border-top: 2px solid #E14F4F;

background: #F6F6F6;

}

#my-ul li a{

display:block;

height: 50px;

line-height: 50px;

padding-left: 20px;

border-bottom:1px solid #FFFFFF ;

color:#333333;

}

#my-ul li a:hover{

text-decoration: none;

}

.view_img{

position: relative;

}

.view_q img{

position: absolute;

top:0;

left: 0;

}

.view_q img{

position: absolute;

top:0;

left: 0;

}

.view_q{

opacity: 1;

-webkit-transition: all .2s ease-in-out;

-moz-transition: all .2s ease-in-out;

-ms-transition: all .2s ease-in-out;

-o-transition: all .2s ease-in-out;

transition: all .2s ease-in-out;

}

.view_q:hover{

opacity:0;

}

.my-txt{

margin: 5px 0;

}

.my-txt a{

color:#6F6F6F;

text-decoration: none;

}

.my-txt a:hover{

color:#333;

}

.view_img p b{

font-size: 18px;

color:#C40000;

}

.img-responsive{

width:100%;

display:block;

height:auto;

}

.my-img{

margin:30px 0;

position:relative;

max-width: 100%;

}

.my-img i{

position:absolute;

top: 0;

left: 0;

width:100%;

height:100%;

background:#1A1F24;

opacity:.5;

}

.my-p{

position:absolute;

top:50%;

left:50%;

z-index: 100;

max-width:100%;

}

.my-p{

color:#FFF;

font-size:60px ;

font-style: normal;

}

.my-register:after{

content:"";

display:table;

clear: both;

}

.my-span{

color: #888;

font-size: 12px;

margin:0;

padding:0;

}

.container .form-horizontal .form-group label{

font-size: 10px;

font-weight: normal;

}

.my-jian,.my-jia{

display: inline-block;

border:1px solid #DDDDDD;

width: 34px;

height: 32px;

text-align: center;

line-height: 32px;

font-size: 25px;

color:#000000;

}

.my-jian:hover,.my-jia:hover{

text-decoration: none;

}

.my-jian{

margin-left: 20px;

}

.count{

display: inline-block;

width: 40px;

height: 32px;

line-height: 32px;

text-align: center;

color: #000000;

font-size: 25px;

border: 1px solid #DDDDDD;

}

.my-list{

background:#DDDDDD;

padding: 10px;

border-top: 2px solid #D81416;

margin-top: -8px;

}

.my-hide p{

display: none;

}

.my-hide .my-show{

display:block;

}

注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

bootstrap响应式前端页面的更多相关文章

  1. jq+bootstrap响应式系统管理页面

    用bootstrap搭建的一个系统管理页面基于经典的HTML+Css 弊端:代码量太大,用vue组件化开发的思想更加便捷且方便!不过如果是做纯展示的系统页面,只需要一些简单的数据交互,用jq配合boo ...

  2. 使用bootstrap做一个响应式的页面

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Crumpet – 使用很简单的响应式前端开发框架

    Crumpet 是一个简单的响应式的基于 SASS/SCSS 的响应式前端框架,保持你的 HTML 代码简洁.内置尽量使用占位符选择器,以减少你的 HTML 标记的大小,没有凌乱的 HTML 代码.快 ...

  4. Furatto – 轻量，友好的响应式前端开发框架

    Furatto 是一个基于 Bootstrap & Foundation 的前端开发框架,用于快速开发网站.这个框架采用流行的扁平化设计和响应式设计.除了布局和网格之外,所有的主要元素都有预定 ...

  5. Foundation 5 发布！最先进的响应式前端框架

    数以百万计的设计师和工程师采用 Foundation 作为他们的产品和网站设计的前端框架.Foundation 是第一个响应式.语义化和移动优先的开源框架.最新发布的 Foundation 5 是最先 ...

  6. 模拟Bootstrap响应式网格系统

    Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...

  7. 带你玩转JavaWeb开发之五-如何完成响应式开发页面

    响应式页面开发 使用BootStrap开发一个响应式的页面出来 响应式开发就是同一个页面在PC端与手机端Pad端显示不同的效果,以给用户更好的体验 需求分析 开发一套页面,让用户能够在PC端, Pad ...

  8. Flex box弹性布局 及 响应式前端设计的优化

    Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...

  9. Bootstrap 响应式设计

    本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...

随机推荐

  1. Cygwin命令

    Cygwin是一个用于在Windows上模拟Linux环境的软件. 通过cygwin,可以在windows环境下使用linux的程序,像find.tar等一些工具也可以在windows下使用,让我们可 ...

  2. Python 枚举 enum

    Python 枚举 enum enum 标准模块在 3.4 版本才可以使用,3.3 以下版本需要独立安装:https://pypi.python.org/pypi/enum34#downloads,官 ...

  3. Scala-Unit6-final/type关键字、样例类&样例对象

    一.关键字 1.final关键字 用final修饰的类:不能被继承 用final修饰的方法:不能被重写 注意:(1)在Scala中变量不需要用final修饰,因为val与var已经限制了变量是否可变 ...

  4. jOOR

    --摘自<android插件化开发指南> 1.jOOR库就一个Reflect.java类很重要 2.Reflect.java包括6个核心方法 1)on:包裹一个类或者对象,表示在这个类或对 ...

  5. 轻松3步设置sublime text2/sublime text3的预览浏览器

    转https://www.cnblogs.com/swii/p/5888494.html 1,打开sublime 依次选择 tools > build system > new build ...

  6. HDU 1010 Tempter of the Bone (DFS+可行性奇偶剪枝)

    <题目链接> 题目大意:一个迷宫,给定一个起点和终点,以及一些障碍物,所有的点走过一次后就不能再走(该点会下陷).现在问你,是否能从起点在时间恰好为t的时候走到终点. 解题分析:本题恰好要 ...

  7. 从零搭建 ES 搜索服务（二）基础搜索

    一.前言 上篇介绍了 ES 的基本概念及环境搭建,本篇将结合实际需求介绍整个实现过程及核心代码. 二.安装 ES ik 分析器插件 2.1 ik 分析器简介 GitHub 地址:https://git ...

  8. Springmvc借助SimpleUrlHandlerMapping实现接口开关功能

    一.接口开关功能 1.可配置化,依赖配置中心 2.接口访问权限可控 3.springmvc不会扫描到,即不会直接的将接口暴露出去 二.接口开关使用场景 和业务没什么关系,主要方便查询系统中的一些状态信 ...

  9. http Content-Type 知多少

    前言 作为前端开发,工作中少不了与接口请求打交道.对于常见的content-type,也能说上来几个,感觉还算了解.直到有一天,我要在查看google的批量接口合并时发现Content-Type: m ...

  10. #6164. 「美团 CodeM 初赛 Round A」数列互质-莫队

    #6164. 「美团 CodeM 初赛 Round A」数列互质 思路 : 对这个题来言,莫队可以 n*根号n 离线处理出各个数出现个的次数 ,同时可以得到每个次数出现的次数 , 但是还要处理有多少 ...