梅林网站建设公司,展馆展示设计公司排名推荐,做外贸门户网站,三明企业网站建设公司文章目录 1. 导航栏样式进一步调整2. 入驻企业信息展示栏2.1 Title设置2.2 具体信息添加 3. 轮播图4. 注册登录按钮及其他信息5. 一些五颜六色的、丰富视觉效果的中间件…… 1. 导航栏样式进一步调整 这种导航栏#xff0c;选中的时候字体变蓝色#xff0c;可能还是不够美观选中的时候字体变蓝色可能还是不够美观根据Bootstrap提供的效果再调整下 Bootstrap5 navs-tabs 根据需要修改代码调整CSS样式如下
nav { background-color: #56ac69; justify-content: center; }
.nav li a { font-size: 1.3rem; color: white }
.nav li a:hover { color: #1b6d84; background-color: white}结果如下 当前active的项是“网站首页”选中了“名企优录”
2. 入驻企业信息展示栏
2.1 Title设置
Bootstrap将一行均分为了12栏我们让信息企业展示栏占3栏则需要使用类“col-md-3”。同时这里主要使用了Bootstrap的nav-pills如下 写我们自己的 html
div classcol-md-3!--最新入驻企业--div classtabbableul classnav nav-pills nav-fill title-bgli classnav-itema classnav-link idnew-enterprise-title aria-currentpage href#最新入驻企业/a/li/ul/div
/div设置一些属性
/*最新入驻企业标题*/
.title-bg { background-color: #b4d5e3; }
#new-enterprise-title { font-size: 1.0rem; color: white; background-color: #337ab7; width: fit-content; text-align: left; }效果
2.2 具体信息添加
就用一个普通的列表就可以
!--最新入驻企业--
div classtabbableul classnav nav-pills nav-fill title-bgli classnav-itema classnav-link idnew-enterprise-title aria-currentpage href#最新入驻企业/a/li/uldiv classtab-contentdiv classtab-pane activeul classinfo-contentlia hrefhttp://www.hbzhunong.com/home/?uid1113莱芜市合盛农产品有限公司/a/lilia hrefhttp://www.hbzhunong.com/home/?uid1112山东粮能有机食品公司/a/lilia href#金乡县金洲万盛冷藏有限公司 /a/lilia href#烟台黑苹商贸有限公司 /a/lilia href#海阳市海发果蔬有限公司 /a/lilia href#威海三昌食品有限公司 /a/lilia href#青岛金华粮油食品集团股份有限公司 /a/lilia href#青岛大海边食品有限公司 /a/li/ul/div/div/divCSS
/*内容*/
.tab-pane { border: 1px solid rgba(0, 0, 0, 0.2); padding-top: 5px;}
.info-content li a { text-decoration: none; }效果大概这样 再加一个照葫芦画瓢就可以 右侧加一个供求信息但去掉无序列表的点并顶格放置同时利用flex分成两栏一栏放供一栏放求
!--供求信息--div classtabbableul classnav nav-pills nav-fill title-bgli classnav-item stylewidth: 50%a classnav-link idnew-supply-title aria-currentpage href#供求信息/a/lili classnav-item stylewidth: 50%a classnav-link idnew-need-title aria-currentpage href#求购信息/a/li/uldiv styledisplay: flex
!-- 供应信息--div classtab-content stylewidth: 50%; float: leftdiv classtab-pane activeul classinfo-content stylelist-style: none; padding-left: 0li【供应】a href#国光甜苹果/a/lili【供应】a href#红薯/a/lili【供应】a href#和田玉枣/a/lili【供应】a href#意大利冰酒/a/lili【供应】a href#草鸡蛋/a/lili【供应】a href#鸭梨/a/lili【供应】a href#草鸡蛋/a/lili【供应】a href#红色经典/a/li/ul/div/div
!-- 求购信息--div classtab-content stylewidth: 50%; float: rightdiv classtab-pane activeul classinfo-content stylelist-style: none; padding-left: 0li【求购】a href#国光甜苹果/a/lili【求购】a href#红薯/a/lili【求购】a href#和田玉枣/a/lili【求购】a href#意大利冰酒/a/lili【求购】a href#草鸡蛋/a/lili【求购】a href#鸭梨/a/lili【求购】a href#草鸡蛋/a/lili【求购】a href#红色经典/a/li/ul/div/div/div/div注意使用之前的标题栏样式
#new-enterprise-title, #new-hot-title, #new-supply-title, #new-need-title { font-size: 1.0rem; color: white; background-color: #337ab7; width: fit-content; text-align: left; }3. 轮播图
轮播图对应Bootstrap的Carousel部分Bootstrap5-Carousel 这里在带前后按钮、123按钮的基础上加上了carousel-dark属性使按钮颜色变黑色 !--轮播图--div classcol-md-6 carousel carousel-dark slide idcarouselExampleIndicators data-bs-ridecarousel
!-- 底部三个按钮--div classcarousel-indicatorsbutton typebutton data-bs-target#carouselExampleIndicators data-bs-slide-to0 classactive carousel-button aria-currenttrue aria-labelSlide 1/buttonbutton typebutton data-bs-target#carouselExampleIndicators data-bs-slide-to1 classcarousel-button aria-labelSlide 2/buttonbutton typebutton data-bs-target#carouselExampleIndicators data-bs-slide-to2 classcarousel-button aria-labelSlide 3/button/div
!-- 图片--div classcarousel-innerdiv classcarousel-item activeimg src/img/carousel1.png classd-block w-100 alt.../divdiv classcarousel-itemimg src/img/carousel2.png classd-block w-100 alt.../divdiv classcarousel-itemimg src/img/carousel3.png classd-block w-100 alt.../div/div
!-- 左右两个按钮--button classcarousel-control-prev typebutton data-bs-target#carouselExampleIndicators data-bs-slideprevspan classcarousel-control-prev-icon aria-hiddentrue/spanspan classvisually-hiddenPrevious/span/buttonbutton classcarousel-control-next typebutton data-bs-target#carouselExampleIndicators data-bs-slidenextspan classcarousel-control-next-icon aria-hiddentrue/spanspan classvisually-hiddenNext/span/button/div效果如下
4. 注册登录按钮及其他信息
右侧占3栏使用Bootstrap中的Button来做登录注册按钮 这里用到了Bootstrap图标库Bootstrap Icons以及Buttons中的一些类属性Bootstrap5 Buttons
由于使用图标库直接导入了它们的CSS文件
link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/bootstrap-icons1.11.3/font/bootstrap-icons.min.cssHTML代码为
div classcol-md-3 columnbutton typebutton classbtn btn-lg loginspan classbi bi-person onclickjavascript:toLogin()emsp;登emsp;录/span/buttonbutton typebutton classbtn btn-lg registerspan classbi bi-person-add onclickjavascript:toRegister()emsp;注emsp;册/span/button
/div自己设置一些关于按钮背景色、宽度的CSS
.login, .register { width: 100%; color: #fff9f8; margin-bottom: 5px; }
.login { background-color: #f0ad4e; }
.register { background-color: #5cb85c; }
.login:hover { background-color: #ec971f; color: #fff9f8; }
.register:hover { background-color: #449d44; color: #fff9f8; }效果如下
5. 一些五颜六色的、丰富视觉效果的中间件……
使用了Bootstrap中的表格插件Bootstrap5 tables 就是用了一些颜色表格的类很简单
!--首页快捷栏--
div classcol-md-12 stylemargin-top: 10pxtable classtable table-borderedtbody classtext-centertr classtable-successtda href#创建商铺/a/tdtda href#发布产品/a/td/trtr classtable-warningtda href#发布求购信息/a/tdtda href#发布供应信息/a/td/trtr classtable-infotda href#登记品牌/a/tdtda href#关于我们/a/td/tr/tbody/table
/div效果如下
