Pro026-从零开始HTML[#026]——10分钟- Logo

标签

#26_Lay_logo

    Logo，能通过形象的徽标可以让别人记住你和你的品牌文化。如果你想让别人记住你，在一进网页的时候就对你产生深刻印象，你就要设计好你的Logo，当然总督这里不教如何绘制logo，只教如何将logo添加如你的网页中去。

---

标题logo

内容和样式

    这里是为了方便截图所以写成了内联样式表，大家要养成习惯写到外部样式表去。

    这个做法是将 h1 元素的背景图片换成我们网页的logo图片，代码是被注释掉的那一行，其效果是这样的。

效果

    可以看到，这样的做饭有两个问题，我图片就是一张，怎么重复了呢？我的文字怎么参杂到图片中，看不清了呢？下面就来解决这两个问题。

黄色框框中新增内容

    在背景设置这个属性中加入 no-repeat (不重复) 就可以解决这个问题，这个属性还有 repeat-x (X-横向重复) repeat-y（如果设置合理的话可以做到Y-纵向重复) 还有如果打错成 none-repeat 会错认为是 none 从而整一个logo给你不显示。

    第二个属性是 text-indent ，将这个属性的值设置为 -9999px ，这样的话 text 文字内容就会飞到天边去，再也看不到，就不会挡住logo了。

    等等，MD智障这个网页挡住我看智障了，怎么办？

---

注意分辨率

    出现这种问题，第一个是因为作为背景图的logo会对 h1 元素内部的内容进行长宽自动适应，只有 h1 元素里面的内容足够多，才能占到整个logo图的长宽，这样才能把图片显示出来。

    所以，于其填补内容显示logo，不如直接对 h1 元素的长宽进行设置，通过 width 和 height 属性对 h1 进行设置，从而让图片完全显示出来。当然，logo 所在的 h1 最好和别的 h1 区分开来，否则会影响到版面布局。 

分辨率

    可是总督， 我要版权没版权，要画师没画师，我哪来logo图啊，没关系，我们可以弄一个炫酷的网页标题，让网友们留下深刻的印象。

---

自定义标题

    这里说的自定义不是内容上的自定义，而是说标题样式上的自定义。

内容基础

    我们先写一些文字内容作为显示基础（不必要说每个内容都弄一个id，我这里只是贪图一时方便）

样式设置

    这里重新设置了 h1 一级标题元素的诸多属性——

font-size             设置字体大小

text-align            设置文字对齐方式

margin-top          设置布局方式

font-family           设置字体

letter-spacin        设置字间距

text-transform      设置字体变形方式

text-shadow         设置字体阴影

    具体的属性值我就不一一解释了，搞懂这些属性，根据自己喜好搭配，就可以自由的做创作自己的标题样式了。这时候就是考验大家审美能力的时候咯~

效果图