网站美化教程-猫玖鱼柒
网站美化教程
此内容为付费阅读,请付费后查看
1
若购买存在问题请联系QQ:2149268560
付费阅读
已售 6

网站美化教程

①好多小伙伴私信我想要一期主题的美化教程,现在它来了!全程干货分享,有需求的小伙伴抓紧时间收藏啦!本篇美化教程按照网站从顶部到底部的顺序挨个讲解。

②最重要的一点,站长精通html,css,JavaScript这些美化教程所必需的技术,且有些教程仅子比主题可以生效,因此有需要定制美化的小伙伴也可加QQ:2149268560定制美化哦。(定制付费,谨慎添加)

③美化代码分为自定义html代码,自定义css代码,自定义JavaScript代码。小伙伴们一定要看清需要添加的位置哦。

④该美化教程主要基于本站简约干净风格,部分美化如:彩色标签、顶层进度条、右侧进度条、右侧菜单、导航栏图片、go跳转、底部水波浪、版权声明彩色标签、网站统计图片、天气及ip显示、头像呼吸光环、小窗彩色文字、复制成功提示、复制带版权、文章底部版权等等这种上世纪审美,有些还会引起反感的美化不在本教程内。

1、logo扫光

首先呢,这个logo扫光应该是大家都会的,但是我看整个博客圈,这个logo扫光都是如出一辙,可以说都是套用,整个logo扫光显得不太美观,这一点大家对比一下就知道问题出在哪了,所以给大家带来了logo扫光的优化版本。

直接上代码(自定义css代码):

2、导航栏字体加粗

导航栏的字体加粗,可以起到突出显示的效果。这个没啥难度,关键就是找到导航栏字体的定义是:ul.nav,然后直接css样式就可以了,font-weight属性后边的值大家可以自由修改。

直接上代码(自定义css代码):

3、去掉搜索栏

这个美化教程就比较冷门了,可能好多人都用不到,这个是前段时间一个朋友提出来的需求,这位朋友就是不想要搜索栏,那这也难不倒站长。

直接上代码(自定义JavaScript代码):

4、纪念日全局灰主题

遇到纪念日的时候把自己的网站设置成全局灰既是对革命先烈的缅怀也是自身爱国情怀的体现。

直接上代码(自定义css代码):

5、全局樱花特效

网站整个布局都有樱花飘落,显得格外的浪漫,这个推荐大家在浪漫的七夕,圣诞节,女朋友的生日啊等一些浪漫的节日开启,这款樱花代码小巧简单,不影响网站的加载速度。

直接上代码(自定义html代码):

6、元旦灯笼特效

as67

这款元旦灯笼和梅花树的特效可谓是过年期间的绝绝子特效。

直接上代码(自定义html代码):

7、网站背景自定义图片

考虑到电脑屏幕是横屏显示,而手机屏幕是竖屏显示,同一个壁纸很难在两个设备上同时适应,因此站长将手机端和PC端的背景自定义图片分开处理。

直接上代码(自定义css代码):

①PC端

②手机端

注意:若图片出现不能全覆盖,显示不全等问题。修改background-size的属性:

background-size:auto;———————-图像将保持其默认大小

background-size:contain;——————调整图像大小以适合容器

background-size:cover;——————–图片覆盖,超出裁掉

8、手机侧边栏背景

给手机侧边栏加上你喜欢的背景图片,建议不要太花里胡哨,不然会影响到用户的浏览体验。

直接上代码(自定义css代码):

9、幻灯片(轮播图)圆角

子比主题的幻灯片指示器太矩形了,因此给它加上圆角属性以增加美观性。

直接上代码(自定义css代码):

10、自定义网站字体

这个自定义网站字体,我看到博客圈都流行一个织音插件的教程,个人拿来试了一试,发现并没有任何卵用,直接一行代码就完事,还非得弄个插件,关键是还不管用。

这类字体是电脑上本来就存在的,如:”华文新魏”,”华文隶书”,”方正舒体”等等,这些字体拿来直接引用就可以,而且不影响网站的加载速度。

直接上代码(自定义css代码):

电脑端自定义字体:

手机端自定义字体:

注:由于本站简约干净风格,所以没有进行字体涉及,网站任意字体自定义涉及外部引入字体样式,可联系站长定制哦(付费服务,谨慎添加)

11、鼠标样式

直接上代码(自定义css代码):

注意:可以将两个鼠标png格式的图片下载到本地后上传自己云端,避免因本站媒体库出现问题而导致的连锁效应。同时,你也可以自定义鼠标样式:

第一个图片是正常状态下的鼠标样式,第二个图片是鼠标位于超链接下的鼠标样式。

12、首页文章上浮

这个特效可以让你的网站变得更加生动,避免呆板的显示效果。

直接上代码(自定义css代码):

13、夜间切换文字提醒

当主题在白天、夜晚模式切换时会有提示框。

直接上代码(自定义JavaScript代码、自定义html代码):

注:分别将两个代码放入自定义JavaScript代码、自定义html代码。

14、网站功能

网站功能代码都放入自定义JavaScript代码中。这些个功能可以有效阻止扒站,创作权维护。

①屏蔽右键

//屏蔽右键
document.oncontextmenu = function (event){
if(window.event){
event = window.event;
}try{
var the = event.srcElement;
if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")){
return false;
}
return true;
}catch (e){
return false;
}
}

②屏蔽F12键

//小子别想扒站
document.onkeydown = function(){

    if(window.event && window.event.keyCode == 123) {
        alert("小子,别想扒站!——猫玖鱼柒工作室");
        event.keyCode=0;
        event.returnValue=false;
    }
    if(window.event && window.event.keyCode == 13) {
        window.event.keyCode = 505;
    }
    if(window.event && window.event.keyCode == 8) {
        alert(str+"\n请使用Del键进行字符的删除操作!");
        window.event.returnValue=false;
    }

}

③屏蔽复制

//屏蔽复制
document.oncopy = function (event){
if(window.event){
event = window.event;
}try{
var the = event.srcElement;
if(!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")){
return false;
}
return true;
}catch (e){
return false;
}
}

④屏蔽剪切

//屏蔽剪切
document.oncut = function (event){
if(window.event){
event = window.event;
}try{
var the = event.srcElement;
if(!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")){
return false;
}
return true;
}catch (e){
return false;
}
}

⑤屏蔽选中

//屏蔽选中
document.onselectstart = function (event){
if(window.event){
event = window.event;
}try{
var the = event.srcElement;
if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")){
return false;
}
return true;
} catch (e) {
return false;
}
}

15、网站运行时间

站长重新优化了时间代码代码,进行了00秒两位数补全,避免了传统代码到单位数秒时“秒”字左移,及其影响美观。还可自定义字体大小、颜色、变色。(本站简约干净风就去掉了颜色渐变,但是代码里有哦)

注:#momk{animation:change 10s infinite;font-weight:550; color:cornflowerblue;}可自定义时间的颜色改变周期,字体粗细,颜色。

16、底部友情链接

<div id="pc">
<p>友情链接</p>
<ul id="menu">
     <li><a href="https://csxandlsy.xyz/work/1/%E9%AD%94%E6%96%B9/index.html" target="_blank">魔方小站</a></li>
     <li><a href="https://csxandlsy.xyz/work/" target="_blank">猫玖小站</a></li>
     <li><a href="https://csxandlsy.xyz/sample-page" target="_blank">关于我们</a></li>
     <li><a href="https://v6.51.la/report/visit_detail?comId=122273" target="_blank">51LA统计</a></li>
     <li><a href="https://tongji.baidu.com/web5/welcome/login" target="_blank">百度统计</a></li>
     <li><a href="https://www.jq22.com/" target="_blank">jQuery插件库</a></li>
     <li><a href="https://www.w3school.com.cn/" target="_blank">W3school</a></li>
     <li><a href="https://www.runoob.com/" target="_blank">程序员客栈</a></li>
     <li><a href="http://console.smsbao.com/"target="_blank">短信宝</a></li>
     <li><a href="https://xy.csxandlsy.xyz/User/Login"target="_blank">云支付</a></li>
</ul>
<br><br><br>
</div>
<style>
    #menu, #menu li {
        list-style:none; /* 将默认的列表符号去掉 */
        padding:0; /* 将默认的内边距去掉 */
        margin:0; /* 将默认的外边距去掉 */
        float: left; /* 往左浮动 */
        display: block;
    }
    #menu li a {
        display:inline-block; /* 将链接设为块级元素 */
        width:100px; /* 设置宽度 */
        height:23px; /* 设置高度 */
        line-height:20px; /* 设置行高,将行高和高度设置同一个值,可以让单行文本垂直居中 height=line-height+border*/
        text-align:center; /* 居中对齐文字 */
        color:blackgray; /* 设置文字颜色 */
        text-decoration:none; /* 去掉下划线 */
        border-right:3px solid white; /* 在左侧加上分隔线 */
        border-bottom:3px solid white; /* 在下侧加上分隔线 */
        font-size:9px;
        background-color:floralwhite;
        border-radius: 8px;
    }
    #menu li a:hover {
        color:black; /* 变换文字颜色 */
        background-color:whitesmoke;
    }
    #menu li a.last {
        border-right:0; /* 去掉左侧边框 */
    }
</style>
<div id="dibubanquan">
<a href="#">Copyright © 2022 猫玖鱼柒</a>  |  <a target="_blank" href="https://www.miit.gov.cn/">鲁ICP备2022014288号</a>
</div>
$(document).ready(function(){
	if(window.screen.width > window.screen.height){	
		$("#pc").show();
		$("#mp").hide();
	}else{
		$("#pc").hide();
		$("#mp").show();
	}
})

注:第一个代码放在页面显示——底部页脚——板块二中,第二个代码放在自定义JavaScript代码中。

17、SVIP图标

位置:用户&互动——用户等级——等级参数配置

SVIP1:https://csxandlsy.xyz/wp-content/uploads/2022/07/d1.gif

SVIP2:https://csxandlsy.xyz/wp-content/uploads/2022/07/d2.gif

SVIP3:https://csxandlsy.xyz/wp-content/uploads/2022/07/d3.gif

SVIP4:https://csxandlsy.xyz/wp-content/uploads/2022/07/d4.gif

SVIP5:https://csxandlsy.xyz/wp-content/uploads/2022/07/d5.gif

SVIP6:https://csxandlsy.xyz/wp-content/uploads/2022/07/d6.gif

18、图片视频设计

本站多数图片及视频设计来在于稿定设计,一款集图片、视频、H5网页、PPT设计于一体的网站。

19、图标设计

本站多数图标来源于阿里巴巴图标库,多种图标,一键svg代码引用。

© 版权声明
THE END
喜欢就支持一下吧
点赞6赞赏 分享
评论 抢沙发
头像
欢迎提交评论!
提交
头像

昵称

取消
昵称表情代码图片