CMS建站知识

网站添加色彩渐变全屏栏目效果

今天在看群里面的消息的时候,有几个群友在聊群内一个大佬网站添加了一个色彩渐变的全屏效果展示,反馈效果还不错;

于是花了几分钟弄了一下,分享给需要用到的朋友;

第一步:添加前端DIV代码

<div class="top-notice-word">
<a data-b="huodong" href="#" target="_blank" class="top-notice-word-link">本站可办理永久VIP会员现价128元(价格会随模板数量增加而上涨)!详情咨询客服&gt;&gt; QQ:2253281662 QQ群:186490681(入群下载免费模板)</a></div>

在将以上代码复制到自己网站前端需要放置此效果的位置;并修改其中的文字显示内容;

第二步:添加DIV对应的样式;

.top-notice-word{
width: 100%;
line-height: 40px;
font-size: 14px;
color: #ffffff;
text-align: center;
background: -o-linear-gradient(left, #ff6c00, #a200ff);
background: -webkit-gradient(linear, left top, right top, from(#ff6c00), to(#a200ff));
background: linear-gradient(to right, #ff6c00, #a200ff);
overflow-x: hidden;
}

在复制上述样式文件后,放到自己网站的整站通用CSS里面即可;操作很简单,满足自己想要的效果最重要;

完成后效果如下:

(0)
【友情提示:】
1、[焦点热议]及其子栏目内容为网络转载,其它栏目内容系作者个人原创文章观点,不代表除作者外的任何第三方观点赞同或支持;
2、「♚付涛纪实阁♚」原创文章均为本人工作、学习过程中重点事项点的记录,便于日后面对相同问题时候的复盘总结,同时原创内容遵循创作共用版权 CC 4.0 BY-SA 协议,转载请附上原文出处链接及声明,否则默认视为侵权。
3、如本站个人观点有涉及不妥的地方,可联系【QQ:860227477】,提供合理合法依据,可无偿给予修改或删除;若文内明确指转载来源于权威渠道,若需删除本站内容,可在处理完权威渠道来源信息后,第一时间联系本站给予无条件删除。
4、同时针对站内所有来自于【精品软件共享】及其子栏目所分享的软件均为网络收集,请用户下载后24小时内删除,否则引起的争议由使用者承担,与本站无关;
5、针对本站内容若有异义,亦可直接与【法律顾问:易兴俊,律师联系电话:13825799821】直接联系沟通;

发表评论