27、网站主题样式设置与模板变量详解

网站主题样式设置与模板变量详解

1. 文本隐藏技术与搜索引擎优化

在网站开发中，有时需要在不向用户显示文本的情况下，确保搜索引擎能够识别这些文本，以实现搜索引擎优化（SEO）。可以使用负的text-indent属性来隐藏文本。示例代码如下：

.site-name-slogan { text-indent:-2000px; }

上述代码会将具有site-name-slogan类的DIV容器中的所有文本向左缩进 2000 像素。文本会被渲染到浏览器的画布上，但由于缩进距离过大，人类无法看到，而搜索引擎可以识别。site-name-slogan是一个包含H1元素（包含网站名称site-title）和H6元素（包含网站标语site-slogan）的容器。

2. CSS 定位：logo 与菜单栏的位置调整

2.1 初始背景图像设置

要将主 logo 和菜单栏放置到设计师指定的位置。首先设置背景图像及其高度和宽度，代码如下：

#preface-container { background: transparent url('../i/CDEF-logo-menu.png') no-repeat center top;