Bootstrap实现网站首页（Bootstrap概述）

来源：互联网发布：淘宝买lol账号安全吗编辑：程序博客网时间：2024/04/30 04:43
<!DOCTYPE html><html><head><title>网上商城的首页</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="css/bootstrap.min.css" /><link rel="stylesheet" href="css/bootstrap-theme.min.css" /><script type="text/javascript" src="jquery-3.2.1.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script><style type="text/css"></style></head><body><div class="container"><div class="row"><div class="col-md-4"><img alt="" src="../imag/head1.png"></div><div class="col-md-4"><img alt="" src="../imag/head2.png"></div><div class="col-md-4" style="padding-left: 100px ;padding-top: 20px"><a href="#">登陆</a> <a href="zhuce.html">注册</a> <a href="#">购物车</a></div></div><div class="rows"><nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span> <spanclass="icon-bar"></span> <span class="icon-bar"></span> <spanclass="icon-bar"></span></button><a class="navbar-brand" href="#">首页</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse"id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">手机数码 <spanclass="sr-only">(current)</span> </a></li><li><a href="#">电脑办公</a></li><li><a href="#">日用百货</a></li><li class="dropdown"><a href="#" class="dropdown-toggle"data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">更多 <span class="caret"></span> </a><ul class="dropdown-menu"><li><a href="#">母婴</a></li><li><a href="#">家具</a></li><li><a href="#">饮品</a></li><li role="separator" class="divider"></li><li><a href="#">其他</a></li><li role="separator" class="divider"></li><li><a href="#">还需更多</a></li></ul></li></ul><form class="navbar-form navbar-right"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav></div><div class="row"><div id="carousel-example-generic" class="carousel slide"data-ride="carousel"><!-- Indicators --><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0"class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><!-- Wrapper for slides --><div class="carousel-inner" role="listbox"><div class="item active"><img src="../imag/dianzi.png" alt="..."><div class="carousel-caption"></div></div><div class="item"><img src="../imag/dianzi2.jpg" alt="..."><div class="carousel-caption">你好，中国</div></div><div class="item"><img src="../imag/dianzi3.jpg" alt="..."><div class="carousel-caption"></div></div></div><!-- Controls --><a class="left carousel-control" href="#carousel-example-generic"role="button" data-slide="prev"> <spanclass="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span> </a> <aclass="right carousel-control" href="#carousel-example-generic"role="button" data-slide="next"> <spanclass="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span> </a></div></div><div class="row"><h3>热门商品<img alt="" src="../imag/sign.png"></h3></div><div class="row"><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/11.png" width=100% height=100% style="padding: 0px;"></div><div class="col-md-10"><div class="row"><div class="col-md-6" style="padding: 0px;"><img alt="" src="../imag/12.png" width=100% height=100% ></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/13.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/14.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/15.png" width=100% height=100%></div></div><div class="row"><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/13.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/14.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/15.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/13.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/14.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/15.png" width=100% height=100%></div></div></div></div><div class="row"><img alt="" src="../imag/ad.png" width="100%"></div><div class="row"><h3>最新商品<img alt="" src="../imag/sign.png"></h3></div><div class="row"><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/11.png" width=100% height=100% style="padding: 0px;"></div><div class="col-md-10"><div class="row"><div class="col-md-6" style="padding: 0px;"><img alt="" src="../imag/12.png" width=100% height=100% ></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/13.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/14.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/15.png" width=100% height=100%></div></div><div class="row"><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/13.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/14.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/15.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/13.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/14.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/15.png" width=100% height=100%></div></div></div></div><div class="row"><img alt="" src="../imag/q.png" width="100%"></div><div style="text-align: center;"><a href="html.html">关于我们</a>  公司简介  招贤纳士  广告服务  联系方式  合作伙伴  论坛反馈<br>版权声明：Copyright© 1999-2016,赵瑾的网站 , All Rights Reserved</div></div></body></html>
阅读全文
0 0