web前端，css

css页面中的body背景图片，必须在此HTML页面上，返回上一个文件夹，然后才能进入img文件夹中，不需要重复。

body {
          background-image: url(../img/3.jpg);
          background-repeat: no-repeat;
      }

这是文件等级

链接另一个css样式的代码 <title></title><link href="css/s.css" rel="stylesheet" type="text/css" >

<p>标签的字体类型，行高和字体大小。

.p{
    font-style:normal;
    line-height:8px;
    font-size:14px;
}

一个类选择器，float左浮动，自己的边框高度和宽度，背景颜色，行高。

.s1{
    float:right;
    color:white;
    70px;
    height:20px;
    background-color:red;
    line-height:14px;

}

另一个类选择器，浮动分为绝对定位和相对定位，position=absolute/relative;

可以定位图片最下方的字体，使用top的值大于div的高度（因为它是绝对定位，相当于最近的div），也可以left，right=200px；设置位置。

.s2{
     position: absolute;
    250px;/*自己框的宽高*/
    height: 22px;
    color:black;
    background-color:pink;
    top:200px;
}

div.d1 {

          background-image: url(../img/1.jpg);
          position: absolute;
          250px;
          height: 222px;
          left:20px;
      }

html总体代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="css/s.css" rel="stylesheet" type="text/css" >

</head>
<body>
    <p><strong><span class="s">P</span>roducts </strong>/作品欣赏</p>
    <p class="p">three color scenery services <span class="s1">+MORE</span></p>

    <hr style="border:1px dashed #000; height:1px">
    <div style="height:30px;"></div>
    <div>
        <div class="d1">1<p><span class="s2">美丽的山湾小镇 2014-09-15</span></p></div>
        <div class="d2"><span class="s2">美丽的山湾小镇 2014-09-15</span></div>
        <div class="d3"><span class="s2">美丽的山湾小镇 2014-09-15</span></div>
        <div class="d4"><span class="s2">美丽的山湾小镇 2014-09-15</span></div>
        <div class="d5"><span class="s2">美丽的山湾小镇 2014-09-15</span></div>
    </div>
    <div style="height:240px;"></div>
    <div>
        <div class="d6"><span class="s2">美丽的山湾小镇 2014-09-15</span></div>
        <div class="d7"><span class="s2">美丽的山湾小镇 2014-09-15</span></div>
        <div class="d8"><span class="s2">美丽的山湾小镇 2014-09-15</span></div>
        <div class="d9"><span class="s2">美丽的山湾小镇 2014-09-15</span></div>
        <div class="d10"><span class="s2">美丽的山湾小镇 2014-09-15</span></div>
    </div>
</body>
</html>
特别注意再title下的背景图片的地址使用相对路径，不需绝对路径。

body {
          background-image: url(img/3.jpg);
          background-repeat: no-repeat;
      }