标记语言——标题
互联网 发布时间：2008-10-17 18:55:27 作者：佚名 
我要评论
我要评论点击这里返回网页教学网 HTML教程 栏目．
上文：Chapter1 清单
原文出处
标准化设计解决方案 - 标记语言和样式手册
Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup 从标记语法谈起
Chapter2 标题
总览:
不但
加上背景
背景能给标题加上精巧的效果.只要加上背景色与一些留白,不需要用到图片我们就可以创造出清新的标题风格.举例来说:
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #fff;
padding: 4px;
background-color: #696;
}
我们把标题中的文字变成白色,周围留出4像素的内补丁空间,同时把背景改成绿色.如图2-4那样,会有一条宽大的,颜色如同撞球桌的绿带贯穿整个页面,分割两个段落.
图2-4:设定了内补丁和背景色的标题示例
背景和边框
只要在标题下面加上一条细边框,再配上浅色背景,你就能不用一张图片的情况下做出三维的效果.
这份css与上面的十分类似,只改了几个颜色,在底部加上了2像素的边框
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #666;
padding: 4px;
background-color: #ddd;
border-bottom: 2px solid #ccc;
}
借着使用不同亮度的相同颜色,就能做出如图2-5般逼真的三维效果:
图2-5:设定背景和底边的标题
平铺背景
用上图片的话,就能发挥更多的创意了.就让我们用photoshop创建一个10X10的小图片,最上面是黑色的边框,然后下面是从上到下的灰色梯度(如图2-6):
图2-6 用Photoshop创建的小图片
我们可以用css把这个小图片放到我们的<h1>底部去:
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-bottom: 14px;
background: url(10x10.gif) repeat-x bottom;
}
设定 repeat-x 使浏览器在平铺背景图的时候只在水平方向上排列(相对的repeat-y就是在垂直方向上排列),同时我们设定了将图片放置在标题的底部,并加上一些下部内补丁,以便调整图片和标图文字之间的距离(如图2-7)
图2-7:设定平铺背景的标题示例
方便替换的图标
我们也可以使用cssdebackground属性来设定放在文字左边的小图标以此来代替写死图片标签的方法,为标题加上装饰用的小图标.这个方法能使在未来的日子里改变网站显示效果的工作变得十分轻松—只需要替换那么一个css规则,就能同时改变整个网站的显示效果.
代码和上面的平铺背景大致相同:
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-left: 30px;
background: url(icon.gif) no-repeat 0 50%;
}
我们在文字的左边多留出一块空间以便防止我们想要的图标,然后设定no-repeat指定背景图片不进行平铺(如图2-8),同时我们希望图标的位置在据左边0像素,并且对起垂直中线.
图2-8:设定了图标的标题示例
相关文章
文章介绍了HTML中img标签的使用,包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，本文主要给大家介绍HTML img标签和超链2025-06-20- HTML meta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引，本文给大家介绍HTML中meta2025-06-20
input 标签主要用于接收用户的输入，随 type 属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTML input 标签，感兴趣的朋友一起看看吧2025-06-20
这篇文章主要介绍了html 滚动条滚动过快会留下边框线的解决方案,解决方法很简单，可以将 dialog 单独拿出来别放在 transform 的子元素里,需要的朋友可以参考下2025-06-09- 本文将介绍如何使用<img>标签在 HTML 中添加图片，并展示一些常见的用法和技巧,通过本文的介绍，应该掌握了在 HTML 中添加和调整图片的基础知识，感兴趣的朋友一起看2025-05-16
- HTML表格用于在网页上展示数据,通过标签及其相关标签来创建,表格由行和列组成,每一行包含一个或多个单元格,单元格可以包含文本、图像、链接等元素,本文将详细介绍HTML表格2025-03-12
- 本文介绍了三种禁止HTML页面滚动的方法：通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性,每种方法都有其适用场景和优缺点，感兴2025-02-24
在 Web 开发中，文本的视觉效果是提升用户体验的重要因素之一,通过 CSS 技巧，我们可以创造出许多独特的效果，例如文字镂空效果,本文将带你一步一步实现一个简单的文字镂空2024-11-17
在Html中,a标签默认的超链接样式是蓝色字体配下划线,这可能不满足所有设计需求,如需去除这些默认样式,可以通过CSS来实现,本文给大家介绍Html去除a标签的默认样式的操作代码2024-09-25- 在HTML中,可以通过设置CSS的resize属性为none,来禁止用户手动拖动文本域（textarea）的大小,这种方法简单有效,适用于大多数现代浏览器,但需要在老旧浏览器中进行测试以确保2024-09-25
最新评论