B2实现带轮播背景的搜索
搜索 实现 背景 轮播 b2
2023-06-13 09:15:15 时间
B2实现带轮播背景的搜索
效果站从界面我们可以分析出,这是个轮播+搜索的组合形成的,也就是我们可以用B2的轮播+B2的搜索也行成这个样式。那想要达到这个效果需要做些什么呢? 往下看
首先你就要在后后台模块设置增加两个模块,如下
上面我用的是轮播的大幻灯片+搜索模块 设置如下
轮播内容用 (网址连接+幻灯图片地址+标题(适合外链到其他网站)) 搜索模块只要开启了就
这样配置好了我们回到主页可以看到是这个吊样如下图
这一步完成了,接下来的事情就是css样式的收尾工作了、
幻灯片样式 注意把zmlb改成你的轮播id
.slider-height{
width: 100%!important;
}
#home-row-zmlb/*轮播名id*/ .wrapper{
width: 100%!important;
margin-top: -128px;
z-index: 0;
height: auto;
}
.home-row-left.content-area{
width: 100%!important;
height: auto;
border-radius: 0;
}
.home_row.home_row_bg_img {
background-size: 1920px 1249px;
background-repeat: no-repeat;
overflow: hidden;
background-position: center 0;
margin-top: -126px;
background-attachment: initial;
}
#home-row-zmlb/*轮播名id*/ .slider-1 .flickity-page-dots {
position: absolute;
bottom: 0;
top: 90%;
left: auto;
right: 100px;
padding: 0 .1rem .12rem 0;
font-size: 0
}
#home-row-zmlb/*轮播名id*/ .slider-1.slider-type-width .slider-info-box {
height: 100%;
display: flex;
justify-content: flex-end;
align-items: self-start;
flex-flow: column
}
.dot.is-selected{
width: 22px!important;
height: 26px;
margin: 0 3px;
border-radius: 8px!important;
transition-delay: 0.1s;
}#home-row-zmlb/*轮播名id*/ .slider-1 .flickity-page-dots .dot {
width: 10px;
height: 10px;
margin: 0 3px;
border-radius: 50%
}
/* 幻灯片样式结束*/
轮播样式记得把zmss改成你的搜索模块id
/*搜索模块样式*/
.search-module-form .search-button-action::after{
content: '搜索';
font-size: 22px;
width: auto;
height: auto;
}
.search-module-form ul {/*搜索分类*/
width: auto;
}
.search-module-form ul li {/*分类右浮动*/
float: left;
}
.search-module-form ul::before {
content: '';
display: block;
position: absolute;
top: -8px;
left: 25px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid rgb(181, 181, 181);
z-index: 2;
}
.search-module-key {
display: flex;
width: 65%;
justify-content: center;/*剧中*/
}
/*//符号*/
#home-row-zxsc .module-title:before{ content: "♢♢♢";
font-weight: 700;
position: relative;
left: -15px;
opacity: .7;
}
#home-row-zxsc .module-title:after{ content: "♢♢♢";
font-weight: 700;
position: relative;
right: -15px;
opacity: .7;
}
#home-row-zmss .search-module-title:before{ content: "//";
font-weight: 700;
position: relative;
left: -15px;
opacity: .7;}
#home-row-zmss .search-module-title:after {
content: "//";
font-weight: 700;
position: relative;
left: 15px;
opacity: .7;
}
/*//符号*/
.home_row.module-search {
background-image: inherit;
position: absolute;
/* top: -700px; */
text-align: center;
width: calc(50% - 0%);
margin-top: -500px;
height: auto;
left: 25%;
}.search-module-key ul li {
margin-right: 16px;
opacity: .8;
margin-bottom: 8px;
border-radius: 4px;
width: auto;
font-size: 16px;
}.picked-category,.search-module-form input{
font-size: 16px;
}.search-module-form {
background: #fff;
position: relative;
width: 75%;
border: 1px solid #fff;
background: #fff;
box-shadow: 0 10px 30px 0 rgba(0,0,0,.16);
border-radius: 10px;
}.search-module-key ul li:first-child {
width: 100px;
margin-right: 16px;
opacity: 1;
margin-bottom: 8px;
font-size: 18px;
background: none;
box-shadow: none;
/*搜索模块样式结束*/}
最后记得把你的头部背景设置透明或直接none
即可
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
相关文章
- 数据透视表上线!如何在纯前端实现这个强大的数据分析功能?
- 【说站】js中字符串位置的搜索方法
- 【算法竞赛 - 搜索】 Solitaire
- leetcode 35. 搜索插入位置 js 实现
- Alpha-Beta 剪枝搜索实现黑白棋AI
- 国产开源基于.net实现的本地文档全文索引定位器,本地文本搜索神器
- 本周六,快手&高瓴人工智能学院启动WWW23论文分享会,探讨推荐搜索领域热点(30个现场名额)
- 不同的二叉搜索树算法详解编程语言
- search使用MongoDB实现文本搜索功能(mongodbtext)
- Linux通配符:轻松实现文件搜索与匹配(linux通配符)
- MySQL多条件查询:实现高效搜索(mysql多条件查询)
- SQL Server搜索表:利用最佳结果实现快速检索(sqlserver搜索表)
- 利用Linux实现高效的关键字搜索技巧(linux搜索关键字)
- 利用Oracle数据库实现全表搜索(oracle 全表 搜索)
- 系统51Oracle题库系统实现智能学习路径搜索(51oracle 题库)
- Redis搜索优化策略挖掘更高效率(如何优化redis搜索)
- MySQL实现海量标题搜索(mysql上千万标题搜索)
- Oracle 优于 LIKE实现更高效的搜索(oracle代替like)
- Oracle中搜索字符串的完美解决方案(oracle中包含字符串)
- Redis实现模糊搜索的可能性(redis能不能模糊匹配)
- 360搜索宣布即日起下线“明星人气榜”
- javascript实现划词标记+划词搜索功能
- javascript下搜索子字符串的的实现代码(脚本之家修正版)
- 利用jQuery实现可输入搜索文字的下拉框
- c#反射表达式树模糊搜索示例