当前位置:编程学习 > html/css >>

CSS定位设置实例——盒子的定位

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <link href="css/reset.css" rel="stylesheet" type="text/css" /> 
    <link href="css/layout.css" rel="stylesheet" type="text/css" /> 
    <title>无标题页</title> 
</head> 
<body> 
    <div id="wraper"> 
        <h3> 
            热播电影</h3> 
        <div id="film"> 
            <img src="images/06.jpg" width="190" height="254" alt="电影封面" /> 
            <div class="top"> 
            </div> 
            <div class="filmname"> 
                忠犬八公的故事</div> 
        </div> 
    </div> 
</body> 
</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <link href="css/layout.css" rel="stylesheet" type="text/css" />
    <title>无标题页</title>
</head>
<body>
    <div id="wraper">
        <h3>
            热播电影</h3>
        <div id="film">
            <img src="images/06.jpg" width="190" height="254" alt="电影封面" />
            <div class="top">
            </div>
            <div class="filmname">
                忠犬八公的故事</div>
        </div>
    </div>
</body>
</html>
 

三、CSS

[css]
#wraper 

    text-align: center; 

 
#film 

    position: relative; 
    width: 190px; 
    height: 254px; 

#film .top 

    position: absolute; 
    top: 0; 
    left: 0; 
    width: 53px; 
    height: 48px; 
    background: url(../images/p_dot.png) 0px -1027px; 

#film .filmname 

    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    width: 100%; 
    text-align: center; 
    color: Red; 
    font-size: 24px; 
    font-family: 华文隶书; 
    font-weight: bolder; 

#wraper
{
    text-align: center;
}

#film
{
    position: relative;
    width: 190px;
    height: 254px;
}
#film .top
{
    position: absolute;
    top: 0;
    left: 0;
    width: 53px;
    height: 48px;
    background: url(../images/p_dot.png) 0px -1027px;
}
#film .filmname
{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
    color: Red;
    font-size: 24px;
    font-family: 华文隶书;
    font-weight: bolder;
}
 【基础知识】

CSS中的属性position常用的定位主要有:

值 描述
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
 
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
 
relative 生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
 
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。

【说明】

1、实例图片来自迅雷看看网站http://movie.kankan.com/type,order/movie,rat/,小图片由于是很多图片构成的,因此设置背景的时候,采用了定位:

  background: url(../images/p_dot.png) 0px -1027px;

2、小图片和文字要相对于<div id="film">进行绝对定位,因些,需要设定position: relative;,虽然实际上并没有给定它的left、right、top和bottom值。

3、如果没有这个非默认定位,也就是非static定位,absolute定位的参照物会是body,也就是窗体。

4、absolute和relative的区别,主要是定位的参照物不同,relative的参照物是它本身的正常位置。

补充:web前端 , HTML/CSS  ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,