技术：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大师发表，拒绝转载，转载需要作者授权

最新文章

  1. Jersey 2 + Maven + Tomcat + IntelliJ IDEA 搭建RESTful服务
  2. UITextField 的重写
  3. Xcode中的常用快捷键
  4. C语言复习（1）
  5. spring实战六之使用基于java配置的Spring
  6. jquery、js操作checkbox全选反选
  7. 1021 Fibonacci Again （hdoj）
  8. USACO chapter1
  9. mac安装mysql的两种方法（含配置）
  10. java学习笔记(详细)
  11. 快速排序的两种实现方法（js）
  12. Java的运行原理（转载）
  13. py3+urllib+re，轻轻松松爬取双色球最近100期中奖号码
  14. SURF算法
  15. Java通过jxl读取Excel
  16. Codeforces Round #520 (Div. 2) E. Company（dfs序判断v是否在u的子树里+lca+线段树）
  17. 【大数据系列】hadoop集群的配置
  18. socket编程一些注意的东西
  19. django之基本配置
  20. logstash定义表达式

热门文章

  1. instance of的java用法
  2. dubbo spring bean id冲突
  3. HDU 1281 棋盘游戏 (枚举+最大匹配)
  4. suctf逆向部分
  5. Adams/Car与Simulink联合仿真方法
  6. [iOS]视图与UIVIew
  7. SpringBoot整合Mybatis完整详细版二：注册、登录、拦截器配置
  8. QtQuick自定义主题以及控件样式指引
  9. ARC101E - Ribbons on Tree
  10. Idea创建一个springboot多模块项目