简单学习css

这里写图片描述

<!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" />
<title>3列浮动中间列宽度自适应</title>

<style>
body{
    margin:0px; 
}
#left{
    background-color:#cccccc;
    border:2px solid #333333;
    width:100px;
    height:300px;
    position:absolute;
    top:0px;
    left:0px;

}
#center{
    background-color:#cccccc;
    border:2px solid #333333;
    height:300px;
    margin-left:100px;
    margin-right:100px;
}
#right{
    background-color:#cccccc;
    border:2px solid #333333;
    width:100px;
    height:300px;   
    position:absolute;
    right:0px;
    top:0px;
}
</style>
</head>

<body>
        <div id="left">左列</div>
        <div id="center">中列</div>
        <div id="right">右列</div>
</body>
</html>

position属性：

Static：静态定位。
Relative：相对定位。
Absolute：绝对定位。
Fixed：固定定位。

style中position的属性值详解

<!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" />
<title>二列固定宽度</title>

<style>
#left{
    background-color:#cccccc;
    border:2px solid #333333;
    width:300px;
    height:300px;
    float:left; 

}
#right{
    background-color:#cccccc;
    border:2px solid #333333;
    width:300px;
    height:300px;
    float:left;     
}
</style>
</head>

<body>
       <div id="left">左列</div>
<div id="right">右列</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=gb2312" />
<title>二列固定宽度居中</title>
<style>
#layout{
    margin:0px auto;
    width:412px;
}
#left{
    background-color:#cccccc;
    border:2px solid #333333;
    width:200px;
    height:300px;
    float:left; 
}
#right{
    background-color:#cccccc;
    border:2px solid #333333;
    width:200px;
    height:300px;
    float:left;     
}
</style>
</head>
<body>
<div id="layout">
  <div id="left">左列</div>
  <div id="right">右列</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=gb2312" />
<title>二列宽度自适应</title>
<style>

#left{
    background-color:#cccccc;
    border:2px solid #333333;
    width:20%;
    height:300px;
    float:left; 
}
#right{
    background-color:#cccccc;
    border:2px solid #333333;
    width:70%;
    height:300px;
    float:left;     
}
</style>
</head>
<body>
<div id="left">左列</div>
<div id="right">右列</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=gb2312" />
<title>二列右列宽度自适应</title>
<style>

#left{
    background-color:#cccccc;
    border:2px solid #333333;
    width:100px;
    height:300px;
    float:left; 
}
#right{
    background-color:#cccccc;
    border:2px solid #333333;
    height:300px;

}
</style>
</head>
<body>
<div id="left">左列</div>
<div id="right">右列</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=gb2312" />
<title>一列高度自适应</title>
<style>
html,body{
    margin:0px; 
    height:100%;
}
#left{
    background-color:#cccccc;   
    width:300px;
    height:100%;
    float:left;
}

</style>
</head>
<body>
<div id="left">高度自适应</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=gb2312" />
<title>一列固定高度</title>
<style>
#layout{
    background-color:#cccccc;
    border:2px solid #333333;
    width:300px;
    height:300px;
}
</style>
</head>
<body>
<div id="layout">1列固定宽度</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=gb2312" />
<title>一列居中</title>
<style>

#layout{
    background-color:#cccccc;
    border:2px solid #333333;
    width:300px;
    height:300px;
    margin:0px auto;
}
</style>
</head>
<body>
<div id="layout">1列固中</div>
</body>
</html>

这里写图片描述

margin:0 auto;相当于margin:0 auto 0 auto;即上下是0，左右是自动。

<!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=gb2312" />
<title>CSS布局入门</title>
<style>
#layout{
    background-color:#cccccc;
    border:2px solid #333333;
    width:80%;
    height:300px;
}
</style>
</head>
<body>
<div id="layout">1列80%自适应宽度</div>
</body>
</html>

猜你喜欢