0
点赞
收藏
分享

微信扫一扫

css定位与布局 2

山竹山竹px 03-15 22:30 阅读 2

三种定位方式
在这里插入图片描述

浮动定位
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

实例

 <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—不浮动

实例:

<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 是默认值,只在需要移除已指定的清除值时用到

在这里插入图片描述

实例:

<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列布局

<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列

<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>

在这里插入图片描述

一行两列

 *{
	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>

在这里插入图片描述

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

<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>

四行三列


.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>

在这里插入图片描述

层定位
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

	<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>

在这里插入图片描述

举报

相关推荐

0 条评论