杨泽业:给你的mipmcs网站默认模板添加网站logo详细教程

  • 时间:
  • 浏览:395次
  • 来源:网站服务商官网 网址:https://www.wzfws.com

网站服务商杨泽业:给你的mipmcs网站默认模板添加网站logo详细教程


今天我在我的另一个新的网站上面,感觉还是必须添加logo才更加有意义,但是默认的模板是显示文字的,于是我今天就开始研究怎么把默认的mipcms网站添加logo,而且在电脑和手机上面都能完美的展示。经过我在测试的网站什么操作,已经完美的解决了问题,于是就把研究的成果分享给大家,希望对想添加logo的人有用。


一、关于logo的高度,宽度,格式。


1.1、logo的高度。在默认的网站导航栏里面,默认的高度是60px的,所以我们做的logo的最大高度不应该超过60px,超过的话,就会拉高了默认模板的高度,感觉很难看。logo的高度建议在50-60px之间,网站服务商网设计的宽度是60px。


1.2、logo的宽度。宽度我觉得是不限制的。根据自己的实际需求来做。如果logo上面的字或者图像多的话,就会宽一点,字少就会窄一点,所以说,logo的宽度,每个网站都不应该是一样的,各自设计自己的logo的宽度就行了。网站服务商网设计的宽度是120px。

1.3、logo的格式。我的建议是设计透明背景的png格式的logo,那样可以与网站底色一致,不会感觉看起来怪怪的。

1.4、ftp上传logo。我们把做好的logo.png图片,上传到网站的指定位置,我是建议和网站服务商一样上传到网站的根目录里面即可。


二、修改网站代码

2.1、替换原理。理论上只要把显示文字地方{$mipInfo['siteName']}改成显示图片<mip-img src=""></mip-img>就行了,实际上呢?这样做是不行的,电脑看起来还好,到了手机上面那就把logo全屏显示了。logo缩放得超大,太难看了,所以我们还要添加一个样式表才行。


2.2、图片代码替换文字代码。我们打开头部模板文件,路径/template/default/main/header.html里面的把logo图片加一个样式就行了代码是{$mipInfo['siteName']}改成<div class="logo"><mip-img src="{$domain}/logo.png"></mip-img></div>。


2.3、从第4行起,代码是:

<div class="logo-text">

<a data-type="mip" href="{$domain}" data-title="{$mipInfo['siteName']}">

<div class="logo"><mip-img src="{$domain}/logo.png"></mip-img></div></a>

</div>


2.4、修改好的代码上传到网站里面,替换原来的内容。我们这里的代码是没有指定logo的宽度和高度的,也不需要指定大小,因为每个人是不一样的。


三。修改网站的  css样式表文件。

我们在样式表mipcms.css的文件,路径/public/assets/default/css/mipcms.css最后一行添加下面的代码即可:

.logo img {

  vertical-align: middle;

  width: auto;

  min-width: auto;

  height: auto;

}

上面的 css样式代码也是没有指定宽度和高度的,自动大小就行,设计多大就是多大,最大也是不会超过原来的大小的,这样的话,就不会全屏缩放了,在电脑和手机都能完美展示了。大家可以看看本站网站服务商的效果哦!

欢迎关注我的微信和微信公众号


网站服务商经典语录

猜你喜欢

阿里云虚拟主机免费开启https安全访问的方法

网站服务商杨泽业提醒你:阿里云的虚拟主机里面可以直接免费开通https安全访问哦,更快去试试吧!

2019-05-25  分类:基础知识  浏览:9次

关于做网站的网站类型的一点心得

相对于用户来说,基本上一个网站程序是满足不了所有的用户需求的,我们可以根据自己的实际情况来增加不同的网站,让自己的网站的功能更加丰富,以便为用户提供更好的服务。就拿本站来说,网

2019-05-23  分类:本站公告  浏览:24次

今日更新mip建站模版diy模版,修改了分享代码的位置

由网站服务商制作的mipjz模版diy模版,今日有小幅更新,主要是mip分享代码的位置由原来的文章底部的猜你喜欢的上方,改成了右侧边栏的搜索下方。我原来制作模版的时候,认为要分

2019-05-19  分类:本站公告  浏览:23次

mipjz模板更新:网站服务商的diy模版的tag标签页面模版更新

网站服务商(wzfws.com)站长杨泽业于2019年5月16日更新了标签列表页(diy/tag/tag.html)本次的更新属于小幅度的更新。原来的tag列表页模版,和官方的

2019-05-16  分类:本站公告  浏览:22次

mipjz网站添加的视频代码大全(实时更新)

网站服务商今天重新更新了我的模版使用说明,在讲述添加视频代码的时候,我认为还是重新捋一捋所有的视频代码到一个文章里面,那样就新手用户在使用代码的时候就方便一点,于是把代码贴出来

2019-05-16  分类:mipcms  浏览:83次

html5游戏:方块消除游戏-消消乐源码演示与下载

网站服务商今天开通了HTML5游戏栏目,今天上线了一个基于HTML5开发的消消乐游戏,并且陷入到了本站的404页面里面。HTML5页面是跨平台的,不管是电脑、平板、手机都能访问

2019-05-14  分类:HTML5游戏  浏览:40次

超链接标签<a>

HTML<a>标签标签定义及使用说明<a>标签定义超链接,用于从一个页面链接到另一个页面。<a>元素最重要的属性是href属性,它指定链接的

2019-05-07  分类:建站百科  浏览:68次

声明标签 <!DOCTYPE>

HTML声明标签<!DOCTYPE>位于文档中的最前面的位置,处于<html>标签之前。<!DOCTYPE>声明不是一个HTML标签;它是用

2019-05-07  分类:建站百科  浏览:24次

注释标签<!--...-->

欢迎你来到建站百科学习HTML标签:标签,注释标签,HTML注释标签。标签定义及使用说明注释标签用来在源文档中插入注释。注释不会在浏览器中显示。您可使用注释对您的代码进行解释,

2019-05-07  分类:建站百科  浏览:58次

mipjz

mipjz什么?mipjz就是mip建站系统。《MIP建站系统》原名《MIPCMS内容管理系统》软件著作权登记号:2018SR838831。《MIP建站系统》是一套基于《百度移

2019-05-06  分类:建站百科  浏览:39次