网络编程
位置:首页>> 网络编程>> 网页设计>> [翻译]标记语言和样式手册 Chapter 2 标题(4)

[翻译]标记语言和样式手册 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
投稿

猜你喜欢

  • 网站设计时,有一个最常用的指导性原则:页面长度原则上不超过3屏,宽度不超过1屏。这个原则明显是从用户的体验出发,特别是宽度不超过一屏,其最基
  • 元素浮动导致的问题及解决办法大家都应该很熟悉了,举个简单的例子:<style type="text/css">
  • 原文地址:30 Days of Mootools 1.2 Tutorials - Day 7 - Set and Get Style Pro
  • 1. RS.OPEN SQL,CONN,A,B,C2. CONN.EXECUTE(SQL,RowsAffected,C)参数含义:SQL的值
  •   今天编ZBlog上传模块的时候,需要用到一个提取文章中文件名的子程,开始我把问题想复杂了,匹配了所有可能的文件名,不仅正则表达
  • Ajax的流行给用户体验带来了很大程序的提升,而“注册“这项做为互联网最常用到的功能也自然而然的成为Ajax最常光顾的地方,实时判断用户输入
  • 首先感谢比尔、感谢微软、感谢MSDN,是他们让我看到他们富有创意的一面,好了好了不废话了。我们经常把多个CSS或者多个JS并成一个,以节省请
  •   本人就职于一个本地门户网站,每天网站上的天气都得更新。久而久之感到相当麻烦,于是写了一个定时的新闻小偷,帖出来大家参考一下系统
  • 当where子句对某一列使用函数时,除非利用这个简单的技术强制索引,否则Oracle优化器不能在查询中使用索引。通常情况下,如果在WHERE
  • 在日常的前端开发工作中,我们会经常的与HTML、javascript、css等语言打交道,和一门真正的语言一样,计算机语言也有它的字母表、语
  • 因些朋友发来邮件讲根据文章修改后无效,懒羊再次检查后发现在工具栏中并无添加,所以还得做一下下面步骤,再此给大家造成的不便还请多多谅解!因FC
  • 问题:如何把具有相同字段的记录删除,只留下一条。   例如:表test里有id,name字段,如果有name相同的记录只留下一条,
  • 我设了两个SESSION:SESSION(A1),SESSION(A2),然后我现在想结束其中一个SESSION(如:ESEEION(A1)
  • Rel-License 是微格式的开发标准之一,简单的说就是通过给引用标签(通常是链接)加上REL属性,来标明所引用链接/数据与文章的关系。
  • match()方法用于从字符串中查找指定的值本方法类似于indexOf()和lastindexOf(),不同的是它返回的是指定的值,而不是指
  •  <input type=button value=刷新 onclick="hist
  • Adodb.Stream是ADO的Stream对象,提供存取二进制数据或者文本流,从而实现对流的读、写和管理等操作. 组件:&qu
  • 在输入框里面预设一段提示文字,当焦点在输入框的时候清空这段文字,这在目前来说已经不是什么新鲜事了。淘宝的搜索框就用到了这样一种设计:这种设计
  • 历时半年,我独自一人完成了一个局级单位的管理信息系统,共发布BETA版29次,正式版本3次。ASP+ORACLE环境,285个ASP文件,功
  • 用HZHOST实用工具集的服务器安全设置里安装了MSSQL安全配置,现在SQL2000还原不了数据库了,从还原选定设备浏览文件夹时出现&qu
手机版 网络编程 asp之家 www.aspxhome.com