通过bootstrap4框架制作商城网页

这是整个页面显示出来的效果

下面来解析:

最上面显示的是导航栏用到椭圆形头像，下拉列表，文本框，button里设置font-awesome图标，因为bootstrap4没有自带图标了，所以我们就用font awesome。Font Awesome 品牌图标 | 菜鸟教程

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top" ><img src="data:imagess/12.jpg" class="rounded-circle" alt="Cinque Terre" onclick="abc()" id="abc()" style="width: 50px;height: 50px;"><!-- <div id="popup"><div class="bg"><img src="" alt=""/></div></div> -->&nbsp;&nbsp;&nbsp;<a class="navbar-brand" href="潮流穿搭.html">首页</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">所有穿搭</a><div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">裙子</a><a class="dropdown-item" href="#">裤子</a><a class="dropdown-item" href="#">衬衫</a><a class="dropdown-item" href="#">短裤</a></div></li></ul><form class="form-inline my-2 my-lg-0"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"><a href="#" class="btn btn-secondary"><span class="fa fa-search" style="width: 40px;"></span></a></form></div></nav>

此中还用到了点击头像全屏预览 οnclick="abc()",代码如下:

var fullScreenClickCount=0;//调用各个浏览器提供的全屏方法var handleFullScreen = function () {var de = document.documentElement;if (de.requestFullscreen) {de.requestFullscreen();} else if (de.mozRequestFullScreen) {de.mozRequestFullScreen();} else if (de.webkitRequestFullScreen) {de.webkitRequestFullScreen();} else if (de.msRequestFullscreen) {de.msRequestFullscreen();}else {wtx.info("当前浏览器不支持全屏！");}};//调用各个浏览器提供的退出全屏方法var exitFullscreen=function() {if(document.exitFullscreen) {document.exitFullscreen();} else if(document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if(document.webkitExitFullscreen) {document.webkitExitFullscreen();}}function abc() {if (fullScreenClickCount % 2 == 0) {handleFullScreen();} else {exitFullscreen();}fullScreenClickCount++;};

轮播图 carousel:

<div class="container" style="margin-top:100px"><div class="row"><div class="col-lg-12"><div id="demo" class="carousel slide" data-ride="carousel"><!-- 指示符 --><ul class="carousel-indicators"><li data-target="#demo" data-slide-to="0" class="active"></li><li data-target="#demo" data-slide-to="1"></li><li data-target="#demo" data-slide-to="2"></li><li data-target="#demo" data-slide-to="3"></li></ul><!-- 轮播图片 --><div class="carousel-inner"><div class="carousel-item active"><img src="img/123456.jpg" style="height: 400px;"></div><div class="carousel-item"><img src="data:imagess/main-banner2-1903x600.jpg" style="height: 400px;"></div><div class="carousel-item"><img src="img/12345678.jfif"style="height: 400px;"></div><div class="carousel-item"><img src="img/123456789.jfif"style="height: 400px;"></div></div><!-- 左右切换按钮 --><a class="carousel-control-prev" href="#demo" data-slide="prev"><span class="carousel-control-prev-icon"></span></a><a class="carousel-control-next" href="#demo" data-slide="next"><span class="carousel-control-next-icon"></span></a></div></div></div></div>

<div class="container" style="padding-top: 50px"><div class="row" ><div class="col-lg-12"><div class="heading"><h2>Ladies trendy wear</h2></div><div class="products"> <hr>  </div></div><div class="row"><div class="col-md-4"><div class="card mb-4 shadow-sm"><img src="data:imagess/10.jpg" alt="200*200"  class="img-fluid"><div class="card-body"><div class="product" style="text-align: center"><div class="buttons"><a class="btn wishlist" href="#"><span class="fa fa-shopping-cart" style="font-size: 30px;"></span></a><a class="btn wishlist" href="#"><span class="fa fa-heart" style="font-size: 30px;"></span></a><a class="btn compare" href="#"><span class="fa fa-sign-in" style="font-size: 30px;"></span></a></div><div class="name"><h3>JMSHOP 误入凡间精灵 裙子女夏显瘦甜美泡泡袖短款仙气网纱连衣裙</h3></div><div class="price">$145<span>$159</span></div><div class="d-flex justify-content-end"><button type="button" class="btn btn-sm btn-outline-secondry">更多>></button></div></div></div></div>        </div><div class="col-md-4"><div class="card mb-4 shadow-sm"><img src="data:imagess/2.jpg" alt="200*200"  class="img-fluid"><div class="card-body"><div class="product" style="text-align: center"><div class="buttons"><a class="btn wishlist" href="#"><span class="fa fa-shopping-cart" style="font-size: 30px;"></span></a><a class="btn wishlist" href="#"><span class="fa fa-heart" style="font-size: 30px;"></span></a><a class="btn compare" href="#"><span class="fa fa-sign-in" style="font-size: 30px;"></span></a></div><div class="name"><h3>西遇国潮连衣裙女2022年夏季新款中国风旗袍改良复古新中式裙子</h3></div><div class="price">$299<span>$450</span></div><div class="d-flex justify-content-end"><button type="button" class="btn btn-sm btn-outline-secondry">更多>></button></div></div></div></div></div><div class="col-md-4"><div class="card mb-4 shadow-sm"><img src="data:imagess/1.jpg" alt="" class="w-100"><div class="card-body"><div class="product" style="text-align: center"><div class="buttons"><a class="btn wishlist" href="#"><span class="fa fa-shopping-cart" style="font-size: 30px;"></span></a><a class="btn wishlist" href="#"><span class="fa fa-heart" style="font-size: 30px;"></span></a><a class="btn compare" href="#"><span class="fa fa-sign-in" style="font-size: 30px;"></span></a></div><div class="name"><h3>仙女裙2022新款吊带小清新裙子超仙森系夏天气质长裙连衣裙夏季女</h3></div><div class="price">$199<span>$299</span></div><div class="d-flex justify-content-end"><button type="button" class="btn btn-sm btn-outline-secondry">更多>></button></div></div></div></div></div><div class="col-md-4"><div class="card mb-4 shadow-sm"><img src="data:imagess/4.jpg" alt="" class="w-100"><div class="card-body"><div class="product" style="text-align: center"><div class="buttons"><a class="btn wishlist" href="#"><span class="fa fa-shopping-cart" style="font-size: 30px;"></span></a><a class="btn wishlist" href="#"><span class="fa fa-heart" style="font-size: 30px;"></span></a><a class="btn compare" href="#"><span class="fa fa-sign-in" style="font-size: 30px;"></span></a></div><div class="name"><h3>夏季白色法式雪纺连衣裙女设计感小众小个子长款仙女裙子2022新款</h3></div><div class="price">$188<span>$199</span></div><div class="d-flex justify-content-end"><button type="button" class="btn btn-sm btn-outline-secondry">更多>></button></div></div></div></div></div><div class="col-md-4"><div class="card mb-4 shadow-sm"><img src="data:imagess/11.jpg" alt="" class="w-100"><div class="card-body"><div class="product" style="text-align: center"><div class="buttons"><a class="btn wishlist" href="#"><span class="fa fa-shopping-cart" style="font-size: 30px;"></span></a><a class="btn wishlist" href="#"><span class="fa fa-heart" style="font-size: 30px;"></span></a><a class="btn compare" href="#"><span class="fa fa-sign-in" style="font-size: 30px;"></span></a></div><div class="name"><h3>性感纯欲辣妹碎花吊带连衣裙女夏季2022新款短裙温柔收腰蓬蓬裙子</h3></div><div class="price">$130<span>$149</span></div><div class="d-flex justify-content-end"><button type="button" class="btn btn-sm btn-outline-secondry">更多>></button></div></div></div></div></div><div class="col-md-4"><div class="card mb-4 shadow-sm"><img src="data:imagess/6.jpg" alt="" class="w-100"><div class="card-body"><div class="product" style="text-align: center"><div class="buttons"><a class="btn wishlist" href="#"><span class="fa fa-shopping-cart" style="font-size: 30px;"></span></a><a class="btn wishlist" href="#"><span class="fa fa-heart" style="font-size: 30px;"></span></a><a class="btn compare" href="#"><span class="fa fa-sign-in" style="font-size: 30px;"></span></a></div><div class="name"><h3>绿古力仙女裙子无袖2022新款夏季法式温柔风开叉碎花吊带连衣裙</h3></div><div class="price">$119<span>$129</span></div><div class="d-flex justify-content-end"><button type="button" class="btn btn-sm btn-outline-secondry">更多>></button></div></div></div></div></div><div class="col-md-4"><div class="card mb-4 shadow-sm"><img src="data:imagess/7.jpg" alt="" class="w-100"><div class="card-body"><div class="product" style="text-align: center"><div class="buttons"><a class="btn wishlist" href="#"><span class="fa fa-shopping-cart" style="font-size: 30px;"></span></a><a class="btn wishlist" href="#"><span class="fa fa-heart" style="font-size: 30px;"></span></a><a class="btn compare" href="#"><span class="fa fa-sign-in" style="font-size: 30px;"></span></a></div><div class="name"><h3>SunsetPark日落公园 白色甜美连衣裙女夏提花小众设计感吊带裙子</h3></div><div class="price">$249<span>$299</span></div><div class="d-flex justify-content-end"><button type="button" class="btn btn-sm btn-outline-secondry">更多>></button></div></div></div></div></div><div class="col-md-4"><div class="card mb-4 shadow-sm"><img src="data:imagess/9.webp" alt="" class="w-100"><div class="card-body"><div class="product" style="text-align: center"><div class="buttons"><a class="btn wishlist" href="#"><span class="fa fa-shopping-cart" style="font-size: 30px;"></span></a><a class="btn wishlist" href="#"><span class="fa fa-heart" style="font-size: 30px;"></span></a><a class="btn compare" href="#"><span class="fa fa-sign-in" style="font-size: 30px;"></span></a></div><div class="name"><h3>XinmonLee方领泡泡袖拼接假两件连衣裙女a字露腰设计感小众裙子夏</h3></div><div class="price">$159<span>$189</span></div><div class="d-flex justify-content-end"><button type="button" class="btn btn-sm btn-outline-secondry">更多>></button></div></div></div></div></div><div class="col-md-4"><div class="card mb-4 shadow-sm"><img src="data:imagess/8.jpg" alt="" class="w-100"><div class="card-body"><div class="product" style="text-align: center"><div class="buttons"><a class="btn wishlist" href="#"><span class="fa fa-shopping-cart" style="font-size: 30px;"></span></a><a class="btn wishlist" href="#"><span class="fa fa-heart" style="font-size: 30px;"></span></a><a class="btn compare" href="#"><span class="fa fa-sign-in" style="font-size: 30px;"></span></a></div><div class="name"><h3>Sun日落新中式白色純欲甜美连衣裙小众设计公主蓬蓬茶歇裙子女夏</h3></div><div class="price">$149<span>$159</span></div><div class="d-flex justify-content-end"><button type="button" class="btn btn-sm btn-outline-secondry">更多>></button></div></div></div>  </div></div></div></div></div>

其他的大概还好吧主要就是引用font awesome图标

css布局:

.fakeimg {height: 200px;background: #aaa;}.carousel-inner img {width: 100%;height: 100%;}.product .name {border-bottom: 1px solid #eee;}.product .name h3{font-weight: 500;font-size: 20px;color: #666;margin-top: 10px;}.product .price {font-size: 22px;margin: 10px 0;}.product .price span{color: #aaa;margin-left: 10px;text-decoration: line-through;}

下面则是选择规格片段:

<div class="row"><div class="col-sm-3 mt-2 d-none d-sm-block"><img src="data:imagess/13.jpg" alt="" class="w-100" style="height: 300px"></div><div class="col-sm-9"><div class="product"><h4>甜美蕾丝碎花a字连衣裙女夏季系带v领气质高级感收腰显瘦吊带裙子</h4><p class="text-muted d-none d-sm-block">发布时间:2022-05-23</p><p style="font-size: 20px;">供应商: 黑色草莓 STRAWBERRY</p>                 <div class="options" style="font-size: 20px;">规格<select><option value="" selected>----请选择----</option><option value="red">吊带裙</option><option value="black">针织防嗮</option></select></div><div class="price">价格:$149<span>$159</span></div><a href="#"><button type="button" class="btn btn-danger">立即购买</button></a><a href="#" class="btn btn-danger"><span class="fa fa-shopping-cart">加入购物车</span></a></div>   </div>

<section id="conatcat-info" class="bg-light text-dark" style="padding-top: 50px;"><div class="container"><div class="row"><div class="col-sm-8"><div class="media contact-info wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms"><div class="pull-left"><i class="fa fa-phone" style="font-size: 40px;"></i></div><div class="media-body"><h2>Have a question or need a custom quote?</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation +0123 456 70 80</p></div></div></div></div></div><!--/.container-->    </section><!--/#conatcat-info-->

footer:

<div class="jumbotron text-center" style="margin-top:0px;margin-bottom:0"><footer class="container"><div class="row"><div class="row-content col-lg-2 col-sm-4 col-xs-6"><h3>Subscribe</h3><ul><li><a href="#">Newsletter</a></li><li><a href="#">RSS feed</a></li><li><a href="#">RSS to Email</a></li><li><a href="#">Product Hunt</a></li><li><a href="#">Twitter</a></li><li><a href="#">Facebook</a></li><li><a href="#">Pinterest</a></li><li><a href="#">Google+</a></li></ul></div>

<div><p align="center" style="color:#878B91;"><h4><i class="fa fa-phone" style="color: black;"></i>&nbsp;联系方式</h4><i class="fa fa-home" style="color: black;"></i>&nbsp;***401120<br/><i class="fa fa-mobile-phone" style="color: black;"></i>&nbsp;+123321123<br/><i class="fa fa-envelope" style="color: black;"></i>&nbsp;10196704941@qq.com<br/></p></div><div class="bg-dark text-white" style="color:#878B91;"><div class="container"><div class="row"><div class="col-md-6">Copyright &copy; 2022.Company name All rights reserved.</div></div></div></div></footer>        </div>

通过bootstrap4框架制作商城网页相关推荐

《锋利的jQuery》读书要点笔记7——制作商城网页：网站脚本
第8章用jQuery打造个性网站上一节将网页的样式设计完了,现在开始用jQuery来编写网站的脚本.首先要确定的是应该完成哪些功能. 首页应该完成的功能是: 详情页: 这个页面要完成的效果是: 接 ...
期末作业代码网页设计代码——网站商城后台通用模板(30页) 大学生后台模板网页作品商城网页设计作业模板学生网页制作源代码下载
HTML5期末大作业:商城后台网站设计--网站商城后台通用模板(30页) 大学生后台模板网页作品商城网页设计作业模板学生网页制作源代码下载常见网页设计作业题材有个人. 美食. 公司. 学校. 旅 ...
HTML5期末大作业：淘宝网站设计——仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计
HTML5期末大作业:淘宝网站设计--仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计常见网页设计作业 ...
HTML+CSS+JS商城网站设计——蛋糕团购商城模板 (4页) 蛋糕团购网页设计制作简单静态HTML网页作品商城网页作业成品网购网站模板
HTML5期末大作业:蛋糕团购商城网站设计--蛋糕团购商城模板 (4页) 蛋糕团购网页设计制作简单静态HTML网页作品商城网页作业成品一.作品展示二.文件目录三.代码实现 <!doct ...
期末作业代码网页设计代码——优分期大学生购物商城(7页) 大学生大学生购物商城作业模板下载静态HTML购物商城网页制作下载_网页设计代码
HTML5期末大作业:大学生购物商城网站设计--优分期大学生购物商城(7页) 大学生大学生购物商城作业模板下载静态HTML购物商城网页制作下载_网页设计代码常见网页设计作业题材有个人. 美食. ...
HTML5期末大作业：网购商城网站设计——服装商城-功能齐全(40页) HTML+CSS 学生HTML个人网页作业作品下载个人商城网页设计制作大学生个人网站作业模板简单个人网页制作
HTML5期末大作业:网购商城网站设计--服装商城-功能齐全(40页) HTML+CSS 学生HTML个人网页作业作品下载个人商城网页设计制作大学生个人网站作业模板简单个人网页制作常见网页设计 ...
HTML5期末大作业：大学生购物商城网站设计——优分期大学生购物商城(7页) 大学生大学生购物商城作业模板下载静态HTML购物商城网页制作下载_网页设计代码
HTML5期末大作业:大学生购物商城网站设计--优分期大学生购物商城(7页) 大学生大学生购物商城作业模板下载静态HTML购物商城网页制作下载_网页设计代码常见网页设计作业题材有个人. 美食. ...
HTML5期末大作业：服装购物商城网站设计——时尚服装购物商城(1页) 大学生服装购物商城网页作品服装网页设计作业模板学生网页制作源代码下载
HTML5期末大作业:服装购物商城网站设计--时尚服装购物商城(1页) 大学生服装购物商城网页作品服装网页设计作业模板学生网页制作源代码下载常见网页设计作业题材有个人. 美食. 公司. 学校. ...
HTML5期末大作业：品优购网站设计——品优购 (3页) HTML+CSS+JavaScript 大学生网购网页作品商城网页设计作业模板学生网页制作源代码下载
HTML5期末大作业:品优购网站设计--品优购 (3页) HTML+CSS+JavaScript 大学生网购网页作品商城网页设计作业模板学生网页制作源代码下载常见网页设计作业题材有个人. 美食. ...
HTML5期末大作业：商城网站设计——男女装商城-功能齐全(40页) HTML+CSS+JavaScript 大学生网店作品商城网页设计作业模板学生网页制作源代码下载
HTML5期末大作业:商城网站设计--男女装商城-功能齐全(40页) HTML+CSS+JavaScript 大学生网店作品商城网页设计作业模板学生网页制作源代码下载常见网页设计作业题材有个人 ...

通过bootstrap4框架制作商城网页

通过bootstrap4框架制作商城网页相关推荐

最新文章

热门文章