1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> 9 <title>网站首页</title> 10 11 <!-- Bootstrap --> 12 <link href="../css/bootstrap.min.css" rel="stylesheet"> 13 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> 14 <script src="../js/jquery-1.11.0.js"></script> 15 <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> 16 <script src="../js/bootstrap.min.js"></script> 17 18 <!--以上是标准模板，导入写好的css文件，导入bootstrap.js文件前先导入jq文件，因为里面用了jq的东西--> 19 <!--BootStrap： 20 1.轻量级开发响应式页面的前端框架 21 2.全局CSS,组件，js插件 22 3.栅格系统：将页面的宽度分为12的等分--> 23 </head> 24 25 <body> 26 <!--logo部分--> 27 <div class="container"><!--都放入容器中 容器中先写行，然后对一行12个单位列进行分配，最后的数字是每列占多少个单位列--> 28 <div class=" row "> 29 <div class="col-md-4 "><!--xs,sm,md,lg 依次是手机，平板，电脑，大屏幕--> 30 <img src="../img/logo2.png " /> 31 </div> 32 <div class="col-md-4 "> 33 <img src="../img/header.png " /> 34 </div> 35 <div class="col-md-4 " style="padding-top:15px "><!--内边距--> 36 <a href="# ">登录</a> 37 <a href="# ">注册</a> 38 <a href="# ">购物车</a> 39 </div> 40 </div> 41 </div> 42 <!--导航栏部分--><!--组建下的导航条--> 43 44 <div class="container" margin-top="10px"> 45 <nav class="navbar navbar-inverse"><!--navbar-inverse修改了背景颜色--> 46 <div class="container-fluid"> 47 <!-- Brand and toggle get grouped for better mobile display --> 48 <div class="navbar-header"> 49 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 50 <span class="sr-only">Toggle navigation</span> 51 <span class="icon-bar"></span> 52 <span class="icon-bar"></span> 53 <span class="icon-bar"></span> 54 </button> 55 <a class="navbar-brand" href="#">首页</a> 56 </div> 57 58 <!-- Collect the nav links, forms, and other content for toggling --> 59 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 60 <ul class="nav navbar-nav"> 61 <li class="active"><a href="#">手机数码 <span class="sr-only">(current)</span></a></li> 62 <li><a href="#">家用电器</a></li> 63 <li><a href="#">鞋靴箱包</a></li> 64 <li><a href="#">麻辣隔壁</a></li> 65 <li><a href="#">神马浮云</a></li> 66 <li class="dropdown"> 67 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 68 <ul class="dropdown-menu"> 69 <li><a href="#">手机数码</a></li> 70 <li><a href="#">家用电器</a></li> 71 <li><a href="#">鞋靴箱包</a></li> 72 <li role="separator" class="divider"></li> 73 <li><a href="#">麻辣隔壁</a></li> 74 <li role="separator" class="divider"></li> 75 <li><a href="#">神马浮云</a></li> 76 </ul> 77 </li> 78 </ul> 79 <form class="navbar-form navbar-right"> 80 <div class="form-group"> 81 <input type="text" class="form-control" placeholder="Search"> 82 </div> 83 <button type="submit" class="btn btn-default">Submit</button> 84 </form> 85 </div><!-- /.navbar-collapse --> 86 </div><!-- /.container-fluid --> 87 </nav> 88 </div> 89 90 <!--轮播图--> 91 <!--使用bootstrap中的js插件，复制官网上carousel代码--> 92 <div class="container"> 93 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 94 <!-- Indicators --> 95 <ol class="carousel-indicators"> 96 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 97 <li data-target="#carousel-example-generic" data-slide-to="1"></li> 98 <li data-target="#carousel-example-generic" data-slide-to="2"></li> 99 <li data-target="#carousel-example-generic" data-slide-to="3"></li><!--对应图片个数--> 100 </ol> 101 102 <!-- Wrapper for slides --> 103 <div class="carousel-inner" role="listbox"> 104 <div class="item active"> 105 <img src="../img/1.jpg" alt="..."> 106 <div class="carousel-caption"> 107 ... 108 </div> 109 </div> 110 <div class="item"> 111 <img src="../img/2.jpg" alt="..."> 112 <div class="carousel-caption"> 113 ... 114 </div> 115 </div> 116 <div class="item"> 117 <img src="../img/3.jpg" alt="..."> 118 <div class="carousel-caption"> 119 ... 120 </div> 121 </div> 122 <div class="item"><!--添加图片--> 123 <img src="../img/okwu.jpg" alt="..."> 124 <div class="carousel-caption"> 125 ... 126 </div> 127 </div> 128 </div> 129 130 <!-- Controls --> 131 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 132 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 133 <span class="sr-only">Previous</span> 134 </a> 135 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 136 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 137 <span class="sr-only">Next</span> 138 </a> 139 </div> 140 </div> 141 <!--热门商品--> 142 <div class="container" style="margin-top: 10px;"> 143 <div class="row"> 144 <div class="col-md-12"> 145 <font size="6">热门商品</font><img src="../img/title2.jpg" /> 146 </div> 147 </div> 148 <div class="row" > 149 <div class="col-md-2 hidden-xs hidden-sm" style="height:380px"> 150 <img src="../img/big01.jpg" height="100%"/> 151 </div> 152 <div class="col-md-10"> 153 <div class="row"> 154 <div class="col-md-6 hidden-xs hidden-sm" style="height:190px" align="center"> 155 <img src="../img/middle01.jpg" width="100%" height="100%"/> 156 </div> 157 <div class="col-md-2 col-sm-4 col-xs-6"align="center"> 158 <img src="../img/small06.jpg"/><br /> 159 <a href="#"><font color="gray">洗衣机</font></a><br /> 160 <a href="#"><font color="red">￥998</font></a> 161 </div> 162 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 163 <img src="../img/small06.jpg"/><br /> 164 <a href="#"><font color="gray">洗衣机</font></a><br /> 165 <a href="#"><font color="red">￥998</font></a> 166 </div> 167 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 168 <img src="../img/small06.jpg"/><br /> 169 <a href="#"><font color="gray">洗衣机</font></a><br /> 170 <a href="#"><font color="red">￥998</font></a> 171 </div> 172 173 </div> 174 <div class="row"> 175 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 176 <img src="../img/small06.jpg"/><br /> 177 <a href="#"><font color="gray">洗衣机</font></a><br /> 178 <a href="#"><font color="red">￥998</font></a> 179 </div> 180 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 181 <img src="../img/small06.jpg"/><br /> 182 <a href="#"><font color="gray">洗衣机</font></a><br /> 183 <a href="#"><font color="red">￥998</font></a> 184 </div> 185 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 186 <img src="../img/small06.jpg"/><br /> 187 <a href="#"><font color="gray">洗衣机</font></a><br /> 188 <a href="#"><font color="red">￥998</font></a> 189 </div> 190 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 191 <img src="../img/small06.jpg"/><br /> 192 <a href="#"><font color="gray">洗衣机</font></a><br /> 193 <a href="#"><font color="red">￥998</font></a> 194 </div> 195 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 196 <img src="../img/small06.jpg"/><br /> 197 <a href="#"><font color="gray">洗衣机</font></a><br /> 198 <a href="#"><font color="red">￥998</font></a> 199 </div> 200 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 201 <img src="../img/small06.jpg"/><br /> 202 <a href="#"><font color="gray">洗衣机</font></a><br /> 203 <a href="#"><font color="red">￥998</font></a> 204 </div> 205 206 </div> 207 </div> 208 </div> 209 </div> 210 211 <!--广告图片--> 212 <div class="container"style="margin-top: 10px;"> 213 <div class="row"> 214 <div class="col-md-12 hidden-xs hidden-sm"> 215 <img src="../img/ad.jpg" width="100%"/> 216 </div> 217 218 </div> 219 </div> 220 <div class="container"> 221 <div class="row"> 222 <div class="" align="center"> 223 <ul class="list-inline"> 224 <li><a href="#">关于我们</a></li> 225 <li><a href="#">联系我们</a></li> 226 <li><a href="#">招纳贤士</a></li> 227 <li><a href="#">法律声明</a></li> 228 <li><a href="#">友情链接</a></li> 229 <li><a href="#">支付方式</a></li> 230 <li><a href="#">配送方式</a></li> 231 <li><a href="#">服务声明</a></li> 232 <li><a href="#">广告声明</a></li> 233 </ul> 234 </div> 235 <div style="text-align:center;margin-top:5px;margin-bottom:20px;"> 236 Copyright ©2005-2016版权所有 237 </div> 238 </div> 239 </div> 240 241 242 243 </body> 244 </html>