css教程–十步学会用css建站(全)[翻译]（7）
作者：Jorux 来源：Jorux记事本 发布时间：2008-06-05 18:35:00
标签：教程,布局,div,框架,样式,设计,浏览器
第七步：网站头部图标与logo部分的设计：
为实现设计时的网页头部效果，我们需要以下两幅图：
/images/headers/about.jpg 
/images/general/logo_enlighten.gif (点击看大图)
首先我们给#header层添加背景图案：
#header {
height: 150px;
background: #db6d16
url(../images/headers/about.jpg);
}
我们使用的背景属性为一些简写的属性名，用其能规定背景的颜色，图案，图案的位置，是否重复以及如何重复。之所以把背景色设为桔黄色，是因为当用户使浏览器屏蔽图片时，网站的头部不会变的一片空白。应该注意到图片的路径是相对于css的存放位置而言的，而不是html文件，因此有"../"。
接着替换掉<h1></h1>标签里的"Enlighten Designs":
<div id="header">
<h1><img src="images/general/logo_enlighten.gif"
width="236" height="36" alt="Enlighten Designs" border="0" /></h1>
</div>
logo_enlighten图片浮在头部的左上方，我们需要设置<h1>的属性值为：
h1 {
margin: 0;
padding: 0;
float: right;
margin-top: 57px;
padding-right: 31px;
}
这样我们使存在于<h1>层的图片向右浮动，并且上边距(margin-top)为57px，右间隙(padding-right)为31px，如下图所示(点击看大图)：
注意：细心的你可能会发现我们使用了padding-right而不是margin-right，这是因为IE的怪毛病不少，它会在不定的地方无法正确显示margin-right/left属性，所以使用了padding(间隙,Dreamweaver中又被称为填充)属性。
Jorux提示：希望大家在以后的css编写过程中，尽量使用padding属性，以免造成浏览器调试麻烦。
0
投稿猜你喜欢
以Python 3.x版本为主一、条件语句条件语句基本结构0或null为false，其余则为trueif 判定条件:语句块...可多行els- 1、利用php gd库的函数绘制3D扇形统计图<?phpheader("content-type","t
- 本人最近在做一个GUI项目时，需要用到matplotlib画图，写完代码运行时，发现所需要画图功能不能正常使用，在触发画图事件后，画布未更新
- 本文实例讲述了Python实现繁体中文与简体中文相互转换的方法。分享给大家供大家参考，具体如下：工作中需要将繁体中文转换成简体中文上网找了些
- Cumsum ：计算轴向元素累加和，返回由中间结果组成的数组重点就是返回值是“由中间结果组成的数组”以下代码在python3.6版本运行成功
- 前言今天，我无聊的时候做了一个搜索文章的软件，有没有更加的方便快捷不知道，好玩就行了。基于Python tkinter 制作文章
- 两种方法，一种是为表空间增加数据文件： alter tablespace users add datafile '/opt/orac
- asp 在线备份 恢复 sql server 数据库，对于远程没有提供sql server远程连接或打包下载的朋友是个临时解决方法，对于大数
- 进入root 权限下apt-get install mysql-serverapt-get install mysql-client创建数据
- python中的导入关键字：import 以及from import1、import import一般用于导入包以及模块。不过有
- __init__ 方法是什么？使用Python写过面向对象的代码的同学，可能对 __init__ 方法已经非常熟悉了，__init__ 方法
- 本文实例讲述了python实现可将字符转换成大写的tcp服务器。分享给大家供大家参考。具体分析如下：下面的python代码执行后通过tcp监
- 1、注册时验证数据库用户名是否存在。 2、输入密码时提示密码强度和验证2次密码输入是否一样。 3、注册时验证数据库联系邮箱是否存在。 4、注
- Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。Python 的设计具有很强的可读性，相比其他语言经常使用英文
- PHP屏蔽蜘蛛访问代码代码：常用搜索引擎名与 HTTP_USER_AGENT对应值百度baiduspider谷歌googlebot搜狗sog
- 大多数程序都旨在解决最终用户的问题，为此，需要从用户那里获取一些信息。函数input()让程序暂停运行，等待用户输入一些文本。例如：name
- 很久之前曾经总结过一篇博客“MySQL如何找出未提交事务信息”，现在看来，这篇文章中不少知识点或观点都略显肤浅，或者说不够深入，甚至部分结论
- 本文实例为大家分享了python爬取51job中hr的邮箱具体代码，供大家参考，具体内容如下#encoding=utf8import url
- 实现一个简单地httpServer上一篇文章对http库的基本使用做了说明，下面来实现一个简单地httpServerpackage main
- 相比于range，list等简易单词，enumerate仅凭外形都不太让人愿意用。事实上，enumerate还是很好用的。enumerate
