b2主题登录框二次美化开发

我们先看下效果:
b2主题登录框二次美化开发-咸鱼织梦

首页,在主题的常规设置-头部标签里引入外部css:

<link href="https://cdn.jsdelivr.net/npm/remixicon@2.3.0/fonts/remixicon.css" rel="stylesheet">

下面在用子主题的child.js在代码添加外框代码:

 

$(function(){

/*追加登录弹窗效果*/

$('.login-box-content').prepend(


'<div class="wxlogin-sidebar">'+
'<h2>在咸鱼织梦你可以获得</h2>'+
'<ul>'+
' <li> <i class="ri-checkbox-circle-fill"></i> 全站24234个高清热门模型资源 </li>'+
'<li> <i class="ri-checkbox-circle-fill"></i> 最新活动资讯,免费教程不断更 </li>'+
'<li> <i class="ri-checkbox-circle-fill"></i> 各类娱乐资讯,每日最新报道! </li>'+
'<li> <i class="ri-checkbox-circle-fill"></i> 社群交流,结识志同道合设计好友 </li>'+
'</ul>'+

'</div>'


);
})

最后在子主题style.css里添加:

 

 


/*登录框
*/

.login-box-content{width:800px;

background: #3385ff;
padding: 0;
background-image: url(http://v8.xianyuwl.com/90xyw/xiaoji.png);
background-position: 146px bottom;
background-repeat: no-repeat;
}

.wxlogin-sidebar{width:400px; height:auto;
float: left;padding: 50px 60px;
}

.login-box-content .login-box-top{width:400px;float:left;background:#fff;}

.wxlogin-sidebar h2{font-size: 22px;
margin-bottom: 30px; color:#fff;}

.wxlogin-sidebar li{display: block;
margin-bottom: 25px;
font-size: 15px; color:#fff;}

@media (max-width:800px) {

.wxlogin-sidebar{display:none;}
.modal-content{width:19rem; background:none; }
.login-box-content .login-box-top{width:auto;}
.impowerBox .qrcode{
max-width: 100%;

}
}

人已赞赏
教程分享织梦教程

Dedecms教程:批量替换文章中的超链接

2020-11-17 17:50:11

B2主题美化

B2主题免插件实现文章页相关文章

2020-11-28 9:38:42

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索