如何用CSS写网页的head,要图片居中,文字写在图片的左下方。

html-css020

如何用CSS写网页的head,要图片居中,文字写在图片的左下方。,第1张

垂直居中问题

css

-----------------------------

虽然css有一个垂直居中属性,CSS垂直居中属性不能决绝如下问题:

存在的问题:

*

已知div高度

*

div动态内容,不确定高度

*

想要内容垂直居中

*

不用table

在IE下:

位于相对容器的一半高度.

div内容所占有的高度默认设置为div高度

在标准浏览器中如:Mozilla,

Opera,

Safari

等等是完全不同的.

div被当做一个table

被现实出来.

<!DOCTYPE

HTML

PUBLIC

"-//W3C//DTD

HTML

4.01//EN">

<html>

<head>

<title>Universal

vertical

center

with

CSS</title>

<style>

.greenBorder

{border:

1px

solid

green}

</style>

</head>

<body>

<div

class="greenBorder"

style="display:

table

height:

400px

#position:

relative

overflow:

hidden">

<div

style="

#position:

absolute

#top:

50%display:

table-cell

vertical-align:

middle">

<div

class="greenBorder"

style="

#position:

relative

#top:

-50%">

any

text<br>

any

height<br>

any

content,

for

example

generated

from

DB<br>

everything

is

vertically

centered

</div>

</div>

</div>

</body>

</html>

在浏览器中显示:

any

text

any

height

any

content,

for

example

generated

from

DB

everything

is

vertically

centered

CSS可以写在head和body中的。

写在head中可以给整个body使用,而写在body中可能只能给某一个DIV使用,具体是要看怎么使用。本质上是没有什么差的,从整洁度上当然是head上更好了。

当讨论到Web标准时,一些事情总是被提及,那就是结构和表现分离的重要性。结构和表现分离可以给我们带来很多好处,比如样式复用、统一标准等等。而结构与标签分离的第一件是就是需要把所有设置元素样式的语句单独提取到一个css文件。

所以更推荐将样式表单独写一个文件,在head出调用来控制整个页面的表现。

css没有headbg,,,上面的headbg是自定的类名

你id为default的元素下调用的时候class="head"就是调用#default .head。。class=headbg就是#default .headbg的样式。。

这两个有什么不同嘛,.headbg是Y平铺,.head是X平铺,,,X是横向,Y是纵向。多了高度,多了一个,定位。