Book05-No.4 教育公司网站格局

Book05-No.4 教育公司网站布局

1、background-color与background-image

我们在设置背景的时候可以有如下的设置:

body {
		background-color: #2d2d2d;
		background-image: url("images/backup.jpg");
		background-repeat: repeat-x;
		background-position: left top;
	}

可以把背景图片的最后一个像素设置为background-color相同，这样可以平缓的过渡到背景颜色中，以后无论页面有多长，都会显示背景颜色，感觉更加的自然

background-position: 设置背景定位方式，第一个值为水平方向：left、center、right，第二个值为垂直方向：top、center、bottom

当然background-position可以精确的定位到具体的位置：

background-position: 200px 100px;
background-position: 30% 50%;
background-position: 200px 40%;

缩写：

body {
		background-color: #2d2d2d;
		background-image: url("images/backup.jpg");
		background-repeat: repeat-x;
		background-position: left top;
		<!--等价于下面的缩写-->
		background: #2d2d2d url("images/backup.jpg") repeat-x left top;
	}

设置背景图片不随页面的滚动条的移动而移动位置

body {
		background-color: #f3f3f3;
		background-image: url("images/1231_g_1294001414536.jpg");
		background-repeat: no-repeat;
		background-position: 70% center;
		background-attachment: fixed;

	}

加入：background-attachment:fixed 则背景图片的位置不会发生移动

2、案例源码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> 前沿视频教程 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">

  <style type="text/css">
	body {
		margin: 0px;
		padding: 0px;
		font-size: 12px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		line-height: 1.5;
		background-color: #444;
	}

	#header {
		width: 756px;
		margin: 0 auto;
		color: #bbb;
		position: relative;

	}

	#header h1 {
		background-image: url("images/log2o.jpg");
		background-repeat: no-repeat;
		margin: 10px 0;
		height: 63px;
	}

	#header h1 span {
		display: none;
	}

	#header #topMenu {
		margin: 0px;
		padding: 0px;
		position: absolute;
		right: 10px;
		top: 40px;
	}

	#header #topMenu li {
		float: left;
		border-left: white 1px solid;
		
	}

	#header #topMenu li a {
		text-decoration: none;
		padding: 0px 10px;
		color: white;
	}

	#header #topMenu li a:hover {
		text-decoration: underline overline;
		background-color: #fff;
	}

	#header #topMenu li.fristChild {
		border:none;
	}

	ul#mainMenu {
		color: #000;
		width: 500px;
	
	}

	ul#mainMenu li {
		float: left;
		list-style-type: none;
		border-left: 1px #aaa solid;
		border-right: 1px #eee solid;
		background-color: #ccc;
	}

	ul#mainMenu li a {
		text-decoration: none;
		padding: 5px 10px;
		display: block;
		color: #333;
	}
	ul#mainMenu li a:hover {
		background-color: #eee;
	}

	ul#mainMenu li.fristChild {
		border-left:none;
	}

	ul#mainMenu li.endChild {
		border-right: none;
	}

	#searchBox {
		float: right;
		background-color: #ccc;
		
	}

	#searchBox #submit {
		background: transparent;
		border:0;
		margin:0;
		padding:0;
	}

	#searchBox #submit, #searchBox #textfield {
		margin:0;
		padding:0;
	}

	#mainMenuoutSider {
		background-color: #ccc;
		background-image: url(images/1.jpg);
		background-repeat: no-repeat;
		padding-top: 3px;
		margin-top: 13px;
	}

	#mainMenuinSider {
		background-color: #ccc;
		background-image: url(images/1.jpg);
		background-repeat: no-repeat;
		background-position: bottom;
		padding-bottom: 7px;
	}

	#clear {
		clear: both;
	}

	#container {
		margin: 0px auto;
		width: 756px;
	}

	#container #content {
		width: 521px;
		float: left;
		
	}

	#container #sideBar {
		width: 235px;
		float: right;
	}

	#content #depthPath {
		margin: 5px 0 0;
		padding: 0px;
		padding: 2px 10px 0px;
	}
	
	#content #depthPath li {
		list-style-type: none;
		float: left;
		display: inline;
	}

	#content #depthPath li a {
		
		color: #000;
		text-decoration: none;
	}

	#content #depthPath li a:hover {
		text-decoration: underline;
		color: red;
	}

	#content h2 {
		clear: left;
		margin: 0px;
		font-size: 25px;
		font-family: 黑体;
	} 

	#footer {
		clear: both;
		padding-top: 15px;
	}

	#sideBar ul {
		list-style-type: none;
		margin:0px;
		padding: 2px 10px 0px;
	}

	#sideBar ul li {
		border-top: 1px #555 solid;
		font-size: 11px;
		line-height: 2em;
	}

	#sideBar ul li a {
		text-decoration: none;
		display: block;
		color: #ccc;
		padding: 0px 20px;
		
	}

	#sideBar ul li a:hover {
		background-color: #6e6e6e;
	}

  </style>
 </HEAD>

 <BODY>
	<div id="header">
		<h1><span>前沿视频教程</span></h1>
		<ul id="topMenu">
			<li class="fristChild"><a href="#">acher.cn</a></li>
			<li><a href="#">交流中心</a></li>
			<li><a href="#">技术支持</a></li>
		</ul>

		<div id="mainMenuoutSider">
			<div id="mainMenuinSider">
				<form id="searchBox" name="search" method="post" action="">
					<input type="text" id="textfield" name="text" />
					<button type="submit" id="submit">搜索</button>
				</form>
				<ul id="mainMenu">
					<li class="fristChild"><a href="#">教室首页</a></li>
					<li><a href="#">视频教程</a></li>
					<li><a href="#">图书推荐</a></li>
					<li><a href="#">你问我答</a></li>
					<li><a href="#">读者留言</a></li>
					<li><a href="#">联系我们</a></li>
					<li class="endChild"><a href="#">案例分析</a></li>
				</ul>
				
				<div id="clear">

				</div>
			</div>
		</div>
	</div>

	<div id="container">
		<div id="content">
			<ul id="depthPath">
				<li><a href="#">home#</a></li>
				<li><a href="#">经典文章#</a></li>
				<li><a href="#">案例分析#</a></li>
				<li><a href="#">CSS彻底研究</a></li>
			</ul>
			<h2>核心原理技巧与实现</h2>
			<div id="contentBody">

			</div>
		</div>

		<div id="sideBar">
				<ul>
					<li><a href="#">教室首页</a></li>
					<li><a href="#">视频教程</a></li>
					<li><a href="#">图书推荐</a></li>
					<li><a href="#">你问我答</a></li>
					<li><a href="#">读者留言</a></li>
					<li><a href="#">联系我们</a></li>
					<li><a href="#">案例分析</a></li>
					<li><a href="#">教室首页</a></li>
					<li><a href="#">视频教程</a></li>
					<li><a href="#">图书推荐</a></li>
					<li><a href="#">你问我答</a></li>
					<li><a href="#">读者留言</a></li>
					<li><a href="#">联系我们</a></li>
					<li><a href="#">案例分析</a></li>
				</ul>
		</div>

		<div id="footer">

		</div>
	</div>
 </BODY>
</HTML>

Book05-No.4 教育公司网站格局

相关推荐