需要用到一些组件 BootStrap组件
给个官网网址（自己想要的再找）：https://v2.bootcss.com/index.html
需要一些其他的相关文件，这里都有：
链接: https://pan.baidu.com/s/16O9eZm3KphXCS7tFW8asFg 提取码: 7md4 复制这段内容后打开百度网盘手机App，操作更方便哦
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.css" rel="stylesheet"> 13 14 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 15 <script src="../js/jquery-1.11.3.min.js"></script> 16 <!-- Include all compiled plugins (below), or include individual files as needed --> 17 <script src="../js/bootstrap.min.js"></script> 18 19 </head> 20 21 <body> 22 <!--logo部分--> 23 <div class="container"> 24 <div class="row"> 25 <div class="col-lg-4 col-md-4"> 26 <img src="../img/logo2.png" /> 27 </div> 28 <div class="col-lg-5 col-md-4 hidden-xs"> 29 <img src="../img/header.png" /> 30 </div> 31 <div class="col-lg-3 col-md-4" style="padding-top: 17px;"> 32 <a href="#">登录</a> 33 <a href="#">注册</a> 34 <a href="#">购物车</a> 35 </div> 36 </div> 37 </div> 38 39 <!--导航栏--> 40 <div class="container" style="margin-top: 10px;"> 41 <nav class="navbar navbar-inverse"> 42 <div class="container-fluid"> 43 <!-- Brand and toggle get grouped for better mobile display --> 44 <div class="navbar-header"> 45 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 46 <span class="sr-only">Toggle navigation</span> 47 <span class="icon-bar"></span> 48 <span class="icon-bar"></span> 49 <span class="icon-bar"></span> 50 </button> 51 <a class="navbar-brand" href="#">首页</a> 52 </div> 53 54 <!-- Collect the nav links, forms, and other content for toggling --> 55 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 56 <ul class="nav navbar-nav"> 57 <li class="active"> 58 <a href="#">手机数码 <span class="sr-only">(current)</span></a> 59 </li> 60 <li> 61 <a href="#">家用电器</a> 62 </li> 63 <li> 64 <a href="#">鞋靴箱包</a> 65 </li> 66 <li> 67 <a href="#">电脑办公</a> 68 </li> 69 <li> 70 <a href="#">孕婴保健</a> 71 </li> 72 <li class="dropdown"> 73 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">所有分类 <span class="caret"></span></a> 74 <ul class="dropdown-menu"> 75 <li><a href="#">手机数码</a></li> 76 <li><a href="#">家用电器</a></li> 77 <li><a href="#">鞋靴箱包</a></li> 78 <li role="separator" class="divider"></li> 79 <li><a href="#">电脑办公</a></li> 80 <li role="separator" class="divider"></li> 81 <li><a href="#">孕婴保健</a></li> 82 </ul> 83 </li> 84 </ul> 85 <form class="navbar-form navbar-right" role="search"> 86 <div class="form-group"> 87 <input type="text" class="form-control" placeholder="Search"> 88 </div> 89 <button type="submit" class="btn btn-default">Submit</button> 90 </form> 91 <!--<ul class="nav navbar-nav navbar-right"> 92 <li><a href="#">Link</a></li> 93 <li class="dropdown"> 94 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 95 <ul class="dropdown-menu"> 96 <li><a href="#">Action</a></li> 97 <li><a href="#">Another action</a></li> 98 <li><a href="#">Something else here</a></li> 99 <li role="separator" class="divider"></li> 100 <li><a href="#">Separated link</a></li> 101 </ul> 102 </li> 103 </ul>--> 104 </div> 105 106 </div> 107 </nav> 108 </div> 109 110 <!--轮播图--> 111 <div class="container"> 112 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 113 <!-- Indicators --> 114 <ol class="carousel-indicators"> 115 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 116 <li data-target="#carousel-example-generic" data-slide-to="1"></li> 117 <li data-target="#carousel-example-generic" data-slide-to="2"></li> 118 </ol> 119 120 <!-- Wrapper for slides --> 121 <div class="carousel-inner" role="listbox"> 122 <div class="item active"> 123 <img src="../img/1.jpg" alt="..."> 124 <div class="carousel-caption"> 125 ... 126 </div> 127 </div> 128 <div class="item"> 129 <img src="../img/2.jpg" alt="..."> 130 <div class="carousel-caption"> 131 ... 132 </div> 133 </div> 134 <div class="item"> 135 <img src="../img/3.jpg" alt="..."> 136 <div class="carousel-caption"> 137 ... 138 </div> 139 </div> 140 </div> 141 142 <!-- Controls --> 143 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 144 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 145 <span class="sr-only">Previous</span> 146 </a> 147 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 148 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 149 <span class="sr-only">Next</span> 150 </a> 151 </div> 152 </div> 153 154 <!--热门商品--> 155 <div class="container"> 156 <!--上边文字内容--> 157 <div class="row" style="margin-left: 10px; margin-top: 15px; margin-bottom: 10px;"> 158 <span id="" style="font-size: 30px;"> 159 热门商品 <img src="../img/title2.jpg" /> 160 </span> 161 </div> 162 <!--图片内容--> 163 <div class="row"> 164 <div class="col-md-2 col-sm-2 hidden-xs hidden-sm" style="height: 400px;"> 165 <img src="../img/big01.jpg" height="100%" /> 166 </div> 167 <div class="col-md-10 col-sm-10"> 168 <div class="row"> 169 <div class="col-md-6 hidden-xs hidden-sm" style="height: 200px; width: 485px;"> 170 <a href="#"><img src="../img/middle01.jpg" height="100%" width="100%" /></a> 171 </div> 172 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 173 <a href="#"><img src="../img/small03.jpg"/></a> 174 <p><a href="#"><font color="gray">电炖锅</font></a></p> 175 <p><font color="red">￥399</font></p> 176 </div> 177 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 178 <a href="#"><img src="../img/small03.jpg"/></a> 179 <p><a href="#"><font color="gray">电炖锅</font></a></p> 180 <p><font color="red">￥399</font></p> 181 </div> 182 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 183 <a href="#"><img src="../img/small03.jpg"/></a> 184 <p><a href="#"><font color="gray">电炖锅</font></a></p> 185 <p><font color="red">￥399</font></p> 186 </div> 187 </div> 188 <div class="row"> 189 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 190 <a href="#"><img src="../img/small03.jpg"/></a> 191 <p><a href="#"><font color="gray">电炖锅</font></a></p> 192 <p><font color="red">￥399</font></p> 193 </div> 194 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 195 <a href="#"><img src="../img/small03.jpg"/></a> 196 <p><a href="#"><font color="gray">电炖锅</font></a></p> 197 <p><font color="red">￥399</font></p> 198 </div> 199 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 200 <a href="#"><img src="../img/small03.jpg"/></a> 201 <p><a href="#"><font color="gray">电炖锅</font></a></p> 202 <p><font color="red">￥399</font></p> 203 </div> 204 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 205 <a href="#"><img src="../img/small03.jpg"/></a> 206 <p><a href="#"><font color="gray">电炖锅</font></a></p> 207 <p><font color="red">￥399</font></p> 208 </div> 209 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 210 <a href="#"><img src="../img/small03.jpg"/></a> 211 <p><a href="#"><font color="gray">电炖锅</font></a></p> 212 <p><font color="red">￥399</font></p> 213 </div> 214 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 215 <a href="#"><img src="../img/small03.jpg"/></a> 216 <p><a href="#"><font color="gray">电炖锅</font></a></p> 217 <p><font color="red">￥399</font></p> 218 </div> 219 </div> 220 </div> 221 </div> 222 </div> 223 224 <!--广告图片--> 225 <div class="container" style="margin-top: 15px;"> 226 <div class="row"> 227 <div class="hidden-md hidden-sm hidden-xs" style="padding-left: 14px; height: 100px;" > 228 <img src="../img/ad.jpg" style="width: 99%;" height="100%" /> 229 </div> 230 </div> 231 </div> 232 233 <!--最新商品--> 234 <div class="container"> 235 <!--上边文字内容--> 236 <div class="row" style="margin-left: 10px; margin-top: 15px; margin-bottom: 10px;"> 237 <span id="" style="font-size: 30px;"> 238 热门商品 <img src="../img/title2.jpg" /> 239 </span> 240 </div> 241 <!--图片内容--> 242 <div class="row"> 243 <div class="col-md-2 col-sm-2 hidden-xs hidden-sm" style="height: 400px;"> 244 <img src="../img/big01.jpg" height="100%" /> 245 </div> 246 <div class="col-md-10 col-sm-10"> 247 <div class="row"> 248 <div class="col-md-6 hidden-xs hidden-sm" style="height: 200px; width: 485px;"> 249 <a href="#"><img src="../img/middle01.jpg" height="100%" width="100%" /></a> 250 </div> 251 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 252 <a href="#"><img src="../img/small03.jpg"/></a> 253 <p><a href="#"><font color="gray">电炖锅</font></a></p> 254 <p><font color="red">￥399</font></p> 255 </div> 256 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 257 <a href="#"><img src="../img/small03.jpg"/></a> 258 <p><a href="#"><font color="gray">电炖锅</font></a></p> 259 <p><font color="red">￥399</font></p> 260 </div> 261 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 262 <a href="#"><img src="../img/small03.jpg"/></a> 263 <p><a href="#"><font color="gray">电炖锅</font></a></p> 264 <p><font color="red">￥399</font></p> 265 </div> 266 </div> 267 <div class="row"> 268 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 269 <a href="#"><img src="../img/small03.jpg"/></a> 270 <p><a href="#"><font color="gray">电炖锅</font></a></p> 271 <p><font color="red">￥399</font></p> 272 </div> 273 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 274 <a href="#"><img src="../img/small03.jpg"/></a> 275 <p><a href="#"><font color="gray">电炖锅</font></a></p> 276 <p><font color="red">￥399</font></p> 277 </div> 278 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 279 <a href="#"><img src="../img/small03.jpg"/></a> 280 <p><a href="#"><font color="gray">电炖锅</font></a></p> 281 <p><font color="red">￥399</font></p> 282 </div> 283 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 284 <a href="#"><img src="../img/small03.jpg"/></a> 285 <p><a href="#"><font color="gray">电炖锅</font></a></p> 286 <p><font color="red">￥399</font></p> 287 </div> 288 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 289 <a href="#"><img src="../img/small03.jpg"/></a> 290 <p><a href="#"><font color="gray">电炖锅</font></a></p> 291 <p><font color="red">￥399</font></p> 292 </div> 293 <div class="col-md-2 col-sm-4 col-xs-6" align="center"> 294 <a href="#"><img src="../img/small03.jpg"/></a> 295 <p><a href="#"><font color="gray">电炖锅</font></a></p> 296 <p><font color="red">￥399</font></p> 297 </div> 298 </div> 299 </div> 300 </div> 301 </div> 302 303 <!--广告图片--> 304 <div class="container" style="margin-top: 15px;"> 305 <div class="row"> 306 <div class="hidden-md hidden-sm hidden-xs" style="padding-left: 14px; " > 307 <img src="../img/footer.jpg" style="width: 99%;" /> 308 </div> 309 </div> 310 </div> 311 312 <!--友情链接和版权信息--> 313 <div class="container"> 314 <div class="row"> 315 <div class="" align="center" style="margin-top: 10px;"> 316 <ul class="list-inline"> 317 <li><a href="#">关于我们</a></li> 318 <li><a href="#">联系我们</a></li> 319 <li><a href="#">招纳贤士</a></li> 320 <li><a href="#">法律声明</a></li> 321 <li><a href="#">友情链接</a></li> 322 <li><a href="#">支付方式</a></li> 323 <li><a href="#">配送方式</a></li> 324 <li><a href="#">服务声明</a></li> 325 <li><a href="#">广告声明</a></li> 326 </ul> 327 </div> 328 <div style="text-align:center;margin-top: 5px;margin-bottom: 20px;"> 329 Copyright © 2005-2016 传智商城 版权所有 330 </div> 331 </div> 332 </div> 333 334 </body> 335 336 </html>
来源：https://www.cnblogs.com/022414ls/p/12295901.html