css 固定文字位置

html-css014

css 固定文字位置,第1张

用Table做

按你的想法:

<table>

<tr><td

class="a">哈哈</td><td>类型</td><td>价格</td></tr>

<tr><td

class="a">哈哈1111</td><td>类型</td><td>价格</td></tr>

<tr><td

class="a">哈哈111111</td><td>类型</td><td>价格</td></tr>

</table>

固定每个tr的第一个td宽度就可以了,将你最长的那个数据的宽度设为td宽度

CSS:

.a

{width:200px

}

控制字体位置可以用padding margin text-indent 单位可以是px em % (em是根据你设置的字体大小设定的,假如你设置字体为12px,那么2em就是24px。 %是根据父容器的宽度或高度决定的。

margin-left:automargin-right:auto(左右自动对齐)。position:absolute(绝对定位)

把文字固定在图片中css代码,用CSS样式控制文字浮于图片上方,这个我们首先要明确的知道一个层的概念,这里就是将图片为一个层,然后文字又是一个层,然后我们使用一个position定位,将文字定于图片的位置,然后使用z-index这个层属性,来做,z-index的数值越大,层就越在上面,这里通过具体的代码来理解:

<html>

<head>

<style>

.headr{

width:300px

height:200px

border:1px solid #f00

z-index:100

}

.wenzi{

position:absoulte

left:100px //只是假定的值,具体需测量

top:200px

z-index:101 z-index的数值越大,层就越在上面

}

</head>

<body>

<div class="headr" > //页头

<img src='图片的地址'>

</div>

<div class='wenzi'>

<p>我会在图片的上面</p>

</div>

</body>

</html>