网站logo在网站中怎么表现,用图片or背景图?

网站logo在网站中怎么表现,用图片or背景图?,第1张

这个话题好像很废话,但我觉得还是有得说的。图形化的网站logo目前流行两种做法:方法一、直接用。这个做法是最直接的,大家也很多是这样做的。方法二、用背景图模拟出来得视觉效果,省出空位用来写网站名称之类的文字,再用css中得text-indent属性把文字推出屏幕视界。具体我会这样做:(例如)css代码:#logo{width:px;height:px;text-indent:-9999px;background:url(image/logogif) no-repeat;}(x)html代码:<h1 id=”logo”>永明则名</h1>这样的做法好处是在页面文档中,网站的名字就是最高一级的标题文字,增强了文档的可读性和易读性;坏处就是人们无法通过搜索引擎来找到相应的logo,也就是说由于logo是作为背景了,搜索引擎目前是无法收录这个logo得。那么具体到项目中,选择那种做法呢?对!要看具体项目的需求是什么样的?如果网站是个人blog站,是以展示内容为主那么两者可以任选其一,我偏重于css+文字的做法;如果网站是商业类或门户类抑或是你想让自己网站的logo更好的最大面的得到“推广”,以此来做为突显企业VI形象的途径之一,那么就直接选择形式就好,当然别忘了给这个logo命好名字,如:sina logo,sohu logo这样命名,切不可简单的写上logo一字,当然记住加上alt属性和合适的属性值,因为这样搜索引擎才能够更容易的为你的logo分类索引出来,以更好的服务于通过搜索引擎寻找你网站信息的网民。记住没有绝对,只有因人因需求而定。

CSS样式可能会是这个样子的:body{background:#999;}
#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
} 下面是一个效果预览: 设置为相对定位,当我们定位logo的时候,我们希望它的位置是相对于容器的,因此使用相对定位:
#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
position:relative;
} 将它定位到盒子的外面现在你需要做的就仅仅是定位logo,将其水平定位,让它从容器中突出出来。
#logo{position:absolute;

一般logo都是设置到logo容器里面的背景。
把承载logo的容器的height值改的和的高度一致就可以了。
例如,logo大小为150px 50px:
<!-- html部分 -->
<h1><a href=">最好是把用户和密码框放在一个div里面,在左浮动。
<div style="float:left"><img src=""></div>
<div style-"float:left">
<input type="text" />
<input type="password"/>
</div>
<div style="clear:both;"></div>
如果需要可以设置input的属性来满足设计需求

F12使用
开发者工具
或者在网页上右键
审查元素,在左上或者左下(根据版本)的放大镜至你要查看的元素上点击一下右边会有csss样式的具体参数。
如果是扒站,整个css带走,可以切换至资源界面(Resources)查看Stylish下拉栏。点击一个个的直接可以拿走

将Logo放入表格中,设置表格按%大小,CSS样式表,规定的长宽高都为100%,就可以了将Logo放入表格中在CSS样式表中,使LOGO的大小与背景大小相同,且在层中加上代码就是啊,放在CSS里边就行了啊,是不是我明白楼主的意思呢将logo放在表格当表格背景就行了,还可以用css进去设置处理在css中div有一个属性叫做background通过background:url()no-repeatcentercenter;可以来设置。这个设置最好在css中设置。因为dz的页面是系统自动生成的。

例子如果你的div层的id为header可以为header这个层设置一个高度在css中可以这样写

#header{background:url()no-repeatcentercenter;width:1234px;height:257px;}css的用法有很多而且很灵活所以你如果想要使效果符合你心里面的想法,需要接触一下专业书籍如(苏沈小雨的css20手册等)


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/12901964.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-28
下一篇 2023-05-28

发表评论

登录后才能评论

评论列表(0条)

保存