CSS实践10：定位

1、主页效果

设置前

设置后

为主页设置大小背景图及说明文字
登录条设置透明的红色背景，不随滚动条的滚动而移动。
天气预报设置成白色字体。

2、实现

将头、尾加进来。
为了控制更灵活，用三层div进行布局。
将主页的

<div class="main-content">
	<h2>主页</h2>
</div><!-- .main-content结束 -->

替换成

<div class="home_imgbox">
	<div class="info">
		<div class="info_wrap">
			<h3>年货记忆</h3>
			<p>小时候，每到快过年，家家户户都会上街采购年货，然后用自行车、
			摩托车将一箱箱年货运回家。成箱成箱的橘子、苹果，各式时鲜蔬菜，
			都要赶在年前备齐全家的分量。现如今，不仅年货种类有了更多选择
			——从散称糖果到进口巧克力；从买普通河鱼到进口海产，而且越来越
			多的人也不再需要自己上街采购年货——那一辆辆穿梭在街头巷尾的快
			递车上，载满了各式各样的网购年货。</p>
		</div>
	</div>
</div><!-- .home_imgbox结束 -->

设置home_imgbox的背景图及相对定位（为实现文字绝对定位在背景图下方准备）

/* 主页 */
.home_imgbox{
	height: 640px; /* 图片高度 */
	width: 100%;
	background: url(images/main.jpg) center center no-repeat;
	position: relative;
}

设置文字绝对定位在背景图下方

.home_imgbox .info{
	position: absolute;
	bottom: 0;
	left:0;
	width: 100%;
	height: 200px;
	background-color: rgba(0,0,0,0.75);
}

在info_wrap添加背景小图片

.home_imgbox .info_wrap{
	background: url(images/nw_logo.gif) 0 center no-repeat;
	height: 200px;
	width: 670px;
	margin: 0 auto;
}

让文字和背景图分开

.home_imgbox .info_wrap{
	background: url(images/nw_logo.gif) 0 center no-repeat;
	height: 200px;
	width: 670px;
	margin: 0 auto;
	padding-left: 320px;
}

改变文字样式

.home_imgbox .info_wrap h3{
	color:#ffffff;
	font-size: 32px;
	font-weight: bold;
	height: 44px;
	border:0;
}
.home_imgbox .info_wrap p{
	color: #ffffff;
	font-size: 14px;
	line-height: 24px;
	padding-top: 6px;
}

改变登录条样式，不随滚动条滚动而移动
删掉原来的样式

/* 登录条 */
.login-bar{
	text-align: right;
	margin: 10px 30px 0 0 ;
}

改成如下：

.login-bar{
	/* text-align: right;
	margin: 10px 30px 0 0 ; */
	position: fixed;
	right:30px;
	top:10px;
	background-color: rgba(138,32,10,0.75);
	padding: 10px;
}

登录条会显示在背景图的下方，修改登录条的z-index，让其显示在背景图的上面

.login-bar{
	……
	z-index: 99;
}

修改天气预报的样式，到https://www.tianqi.com/plugin/styleset?id=14设置插件的文字颜色为白色

<!-- <iframe width="421" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=14&icon=1&site=12"></iframe> -->
	 <iframe width="421" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=14&color=%23FFFFFF&icon=1&site=12"></iframe>

调整插件和logo的位置，设置iframe绝对定位，悬浮在其他元素上面。
给iframe一个类名weather

<iframe class="weather" width="421" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=14&color=%23FFFFFF&icon=1&site=12"></iframe>

给插件设置绝对定位

/* 天气预报 */
.weather{
	position: absolute;
	left: 30px;
	top:10px
}