css定位与布局 2

三种定位方式

浮动定位

实例

css 复制代码

 <style>
    *{
    padding:0;
    margin:0} /* 全局声明 清除浏览器原有的格式*/
    #nav{
    width:300px;
    margin:0 auto; /*设置水平居中*/
    font-size:0; /* 字体大小为0 目的是为了 把 文字标签 的 默认字体大小 去掉*/
    }
    a{
    display:inline-block; /* 设置成 inline-block 就可以设置 高和宽了*/
    width:80px;
    height:30px;
    font-size:14px; /* 字号*/
    line-height:30px; /* 行高 文字垂直居中*  当行高等于height 就垂直居中了/
text-align:center;  /* 文字水平居中*/
 text-decoration:none;/* 去除下划线*/
 border-bottom:1px solid #ccc; /* 设置下划线*/}

 a:hover{
 /* 超链接 悬停时效果*/
 color:white;
 background-color:#ccc; /* 设置背景颜色*/
 border:1px solid ;/* 设置边框 实体*/
 border-left-color:orange;/* 设置左边框颜色*/
 border-right-color:orange;/* 设置右边框颜色*/
 border-top-color:orange;/* 设置上边框颜色*/
 }  </style>
</head>
<body>
<div id="nav">
  <a href="#">链接1</a>
  <a href="#">链接2</a>
  <a href="#">链接3</a></div>
</body>

float属性 left、right

clear属性left、right、both

float属性:

left---左浮动

right---右浮动

none---不浮动

实例：

css 复制代码

<style>
    div{
    height:200px;
    width:200px;
    float:left;  /*向左浮动*/
    border:1px solid black;
    }
  </style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
</body>

clear属性

both，清除左右两边的浮动。

left 和 right 只能清除一个方向的浮动。

none 是默认值，只在需要移除已指定的清除值时用到

实例：

css 复制代码

<style>
    *{
    padding:0;
    margin:0;}
    #container{
    width:850px;
    margin:0 auto;

    }
    #header {
	width:850px;
	height:100px;
	background-color: #ccc;
}
    #main{
    width:100%;
    /*如果left和right部分都浮动，则父元素main坍缩为0
	如果不去设置height，则父元素背景颜色都显示不出来
	可以将下面语句加注释、去掉注释，观察结果区别*/
	/*height: 300px;*/

    margin-top:5px;
    background-color: #eee;}
    .left{
    width:390px;
	height:200px;
	border:#63f 1px solid;
	float:left;
}
.right{
width:390px;
	height:200px;
	border:#f63 1px solid;
	float:left;
	margin-left:16px;
}
#footer{
	width:850px;
	height:80px;
	background-color:#ccc;
	margin-top:5px;
	/*如果main部分没有设置高度，对比一下
	下面这条语句是否存在，结果会有什么影响？*/
	clear:both;
	}

  </style>
</head>
<body>
<div id="container">
  <div id="main">
    <div class="left">左侧内容</div>
    <div class="right">右侧内容 </div>
  </div>
  <div id="footer">页脚部分</div>
</div>
</body>

1行1列布局

css 复制代码

<style>
        *{
        padding:0;
        margin:0;}
        body{font-size:14px;}
        
        #container{
        margin:0auto;
        width:1000px;
        height:500px;
        background:#ccc;}
    </style>
</head>
<body>
<div id="container"></div>

</body>

三行1列

css 复制代码

<style>
     *{
	margin: 0;
	padding: 0;
}
body {
	font-family:"微软雅黑";
	font-size:14px;
}

#container {
	margin:0 auto;
	width:900px;
}
#header {
	height:100px;
	background:#6cf;
	margin-bottom:5px;
}
#main{
	height:500px;
	background:#cff;
	margin-bottom:5px;
}
#footer {
	height:60px;
	background:#6cf;
}
  </style>
</head>
<body>
<div id="container">
  <div id="header"></div>

  <div id="main"></div>

  <div id="footer"></div>
</div>

</body>

一行两列

css 复制代码

 *{
	margin: 0;
	padding: 0;
}
body {
	font-family:"微软雅黑";
	font-size:14px;
}

#container {
	margin:0 auto;
	width:1000px;
	height:500px;
}
#aside { float:left; width:300px; height:500px; background:#f00;}
#content { float:right; width:695px; height:500px; background:#0f0;}
  </style>
</head>
<body>
<div id="container">
  <div id="aside"></div>
  <div id="content"></div>
</div>
</body>

三行两列把前面的组合起来

css 复制代码

<style>
    *{
	margin: 0;
	padding: 0;
}
body {
	font-family:"微软雅黑";
	font-size:14px;
}

#container {
	margin:0 auto;
	width:900px;
}
#header {
	height:100px;
	background:#6cf;
	margin-bottom:5px;
}
#main{
	height:500px;
	background:#cff;
	margin-bottom:5px;}
	#aside { float:left; width:300px; height:500px; background:#f00;}
#content { float:right; width:695px; height:500px; background:#0f0;}
#footer {
	height:60px;
	background:#6cf;
}
  </style>
</head>
<body>
<div id="container">
  <div id="header"></div>
  <div id="main">
    <div id="aside"></div>
    <div id="content"></div>
  </div>
  <div id="footer"></div>
</div>
</body>

四行三列

css 复制代码

.aside{
	float:left;
	width:100px;
	height:500px;
	background:#6cf;
}
#aside1 {

}
#aside2 {
    margin-left:5px;
}
#content{
	float:left;
	margin-left:5px;
	width:690px;
	height:500px;
	background:#cff;
}
#footer {
	height:60px;
	background:#6cf;
}
  </style>
</head>
<body>
<div id="container">

  <div id="header">
  </div>

  <div id="nav">
  </div>

  <div id="main">
	  <div id="aside1" class="aside">
	  </div>

	  <div id="content">
	  </div>

	  <div id="aside2" class="aside">
	  </div>
  </div>

  <div id="footer">
  </div>
</div>

</body>

层定位

css 复制代码

	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	div{
    	border:2px red solid;
    	color: #fff;
	}
	#box1{
	    width:170px;
	    height:190px;
	    position:relative;
	}
	#box2{
	    width:99%;
	 	position:absolute;
		bottom:0;
	}
	</style>
</head>
<body>

<div id="box1">
    <img src="第二章 前端快速入门/2.jpg">
    <div id="box2">一起享受咖啡带来的温暖吧</div>
</div>

</body>