[翻译]标记语言和样式手册 Chapter 2 标题（4）
作者：zhaozy 来源：3user.com 发布时间：2008-01-16 11:56:00
标签：样式,标记,css,手册
加上背景
背景能给标题加上精巧的效果.只要加上背景色与一些留白,不需要用到图片我们就可以创造出清新的标题风格.举例来说:
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:设定平铺背景的标题示例
0
投稿猜你喜欢
vue bus总线的使用场景描述A组件中包括B，C组件，而B组件中包括D组件，这时如果D组件想要在A组件中触发C组件的方法怎么办呢？当然方案- 简介这是一个操作数据库（sqlite3）的项目，用PyQt5进行界面封装。此次项目最主要的是，主界面与子界面的交互,一个主界面与三个子界面交
- 一、卷积神经网络的概述卷积神经网络（ConvolutionalNeural Network，CNN）最初是为解决图像识别等问题设计的，CNN
- 最近开始学习Python开发，“工欲善其事必先利其器”，Python程序都是用什么工具开发出来的呢。
- 一、禁止计算局部梯度torch.autogard.no_grad: 禁用梯度计算的上下文管理器。当确定不会调用Tensor.backward
- 一、python logging日志模块简单封装项目根目录创建 utils/logUtil.pyimport loggingfrom log
- 题目要求1.后台管理员只有一个用户：admin, 密码： admin2.当管理员登陆成功后，可以管理前台会员信息。3.会员信息管
- string 对象 1、str.match(RegExp) 在str中搜索匹配RegExp的字符串并保存在一个数组内返回， 如果RegExp
- demo： <div v-for="item in temps" :key="
- MediaPipe概述谷歌开源MediaPipe于2019年6月首次推出。它的目标是通过提供一些集成的计算机视觉和机器学习功能，使我们的生活
- 直接上代码：#!/usr/bin/python# -*- coding: utf-8 -*-import urllibimport os,d
- 查询速度慢的原因很多，常见如下几种： 1、没有索引或者没有用到索引(这是查询慢最常见的问题，是程序设计的缺陷) 2、I/O吞吐量小，形成了瓶
- Python 语言的优势在于其功能强大，可以用于网络数据采集、数据分析等各种应用场景。本篇文章将介绍如何使用 Python 获取网络数据、使
- 概述：可以将.py源代码转换成无需源代码的可执行文件（直接就可以运行的程序）因为有的时候Windows，Mac，Linux系统上并没有安装P
- 本文实例讲述了Python实现基于socket的udp传输与接收功能。分享给大家供大家参考，具体如下：udp的传输与接收windows网络调
- 此命令作用，修改数据表ff_vod，在vod_url字段内容后加入999999999。update ff_vod set vod_url=C
- python中类的继承：子类继承父类，及子类拥有了父类的 属性 和 方法。python中类的初始化都是__init__()。所以父类和子类的
- Python SSH远程连接与文件传输from paramiko import (SSHClient, SFTPClient, AutoAd
- 我一贯秉承着一点：通过自己的双手真实的操作一遍之后的信息是最可靠的，所以在您参考这个小文儿的时候请不要只是“看”，单纯的瞧一瞧是得不到真知滴
- 数据库状态 (database states)查询数据库的当前状态 ：1、查询所有数据库的状态 ，通过sys.databases目录视图的s
