效果图:
Bootstrap:
- 组件 (静态CSS)
- JS插件(动态JS)
反色导航条:
基本都是去bootstrap官网(组件-导航条)复制过来, 改一改文字內容即可.
bootstrap可参考: https://blog.csdn.net/qq_42986107/article/details/82929465
<!-- 反色导航条组件 -->
<nav class="navbar navbar-inverse" style="margin-top: 20px;"><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><span class="icon-bar"></span><span class="icon-bar"></span><span class="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><a href="#">手机数码 </a></li><li><a href="#">电脑办公</a></li><li><a href="#">大型家电</a></li><li><a href="#">日用百货</a></li></ul><form class="navbar-form navbar-right" role="search"><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>
轮播图:
JS插件 - - > Carousel 里复制. 改掉图片路径和图片个数.
<!-- 轮播图 , -->
<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><!-- 修改图片路径和要轮播的图片个数. --><div class="carousel-inner" role="listbox"><div class="item active"><img src="img/1.jpg" alt="图片已丢失"><div class="carousel-caption"></div></div><div class="item"><img src="img/2.jpg" alt="图片已丢失"><div class="carousel-caption"></div></div><div class="item"><img src="img/3.jpg" alt="图片已丢失"><div class="carousel-caption"></div></div><div class="item"><img src="img/4.jpg" alt="图片已丢失"><div class="carousel-caption"></div></div></div><!-- Controls --><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div>