bootstrap响应式前端页面

技术：HTML+CSS+JS+bootstrap

 

概述

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

详细

代码下载：http://www.demodashi.com/demo/14991.html

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

一、项目目录

二、演示效果

三、程序实现具体步骤

首页代码 index.html

40012345678


登录
注册












搜索关键字:





















首页
关于我们
产品商城
新闻资讯
推荐提成
在线预约
招商加盟

























































































Levi’s李维斯明星系列504男士标准直脚牛仔裤
￥799.00 ￥349












Levi’s李维斯明星系列504男士标准直脚牛仔裤
￥799.00 ￥349












Levi’s李维斯明星系列504男士标准直脚牛仔裤
￥799.00 ￥349












Levi’s李维斯明星系列504男士标准直脚牛仔裤
￥799.00 ￥349












Levi’s李维斯明星系列504男士标准直脚牛仔裤
￥799.00 ￥349












Levi’s李维斯明星系列504男士标准直脚牛仔裤
￥799.00 ￥349












Levi’s李维斯明星系列504男士标准直脚牛仔裤
￥799.00 ￥349












Levi’s李维斯明星系列504男士标准直脚牛仔裤
￥799.00 ￥349












Levi’s李维斯明星系列504男士标准直脚牛仔裤
￥799.00 ￥349












Levi’s李维斯明星系列504男士标准直脚牛仔裤
￥799.00 ￥349












Levi’s李维斯明星系列504男士标准直脚牛仔裤
￥799.00 ￥349












Levi’s李维斯明星系列504男士标准直脚牛仔裤
￥799.00 ￥349








100%正品



客户认证好评



低价享受



快速发货



七天退货保障



100%满意





新手帮助
如何注册
门店认证




常见问题
订单状态
发票说明




支付方式
在线支付
银行转账
货到付款




配送服务
范围及运费




售后服务
退换货政策
退换货流程
联系客服




服务热线
4005-114-114








联系我们


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

使用QQ和我们在线交谈




您的姓名：



邮件地址：



请告诉我您想咨询的问题：



发送

首页代码 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;
}

代码下载：http://www.demodashi.com/demo/14991.html

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

转载于:https://www.cnblogs.com/demodashi/p/10503445.html