Book05-No.2 摄影师个人网站格局 _Web前端

Book05-No.2 摄影师个人网站布局

1、设计模型

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;
		background-color: #cc9;
	}

	div#container {
		width: 850px;
		margin: 60px auto 0;
		position: relative;
	}

	ul#profiles {
		margin:0px;
		padding:0px;
		list-style-type: none;
		
	}

	ul#profiles li {
		float:left;
		padding: 4px;
	}

	#container h1 span, #container h2 {
		display: none;
	}
	#container ul li.liClass {
		position: relative;
		left: 200px;
	}

	#content {
		width:180px;
		position: absolute;
		left: 635px;
		top: 30px;
		font-family: Arial;
		font-size: 15px;
		line-height: 17px;
	}

	#container #content ul {
		list-style-type: none;
		margin: 0 0 0 20px;
		padding: 0px;
		font-size: 12px;
	}
	
	#container #content a {
		color: #fff;
		font-weight: bold;
		text-decoration: none;
	}

	#container #content a:visited {
		color: #fff;
		text-decoration: none;
	}

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

  </style>
 </HEAD>

 <BODY>
	<div id="container">
		<ul id="profiles">
			<li><a href="#" ><img src="images/1.jpg" alt="作品1" width="200" height="150" border=0/></a></li>
			<li><a href="#" ><img src="images/2.jpg" alt="作品2" width="200" height="150" border=0/></a></li>
			<li><a href="#" ><img src="images/3.jpg" alt="作品3" width="200" height="150" border=0/></a></li>
			<li class="liClass"><a href="#" ><img src="images/4.jpg" alt="作品4" width="200" height="150" border=0/></a></li>
		</ul>

		<div id="content">
			<h1><span>Chance Wen</span></h1>
			<h2>Your eye on the world</h2>
			<p>A Sri Lanka hen has given birth to a chick without an egg, in a new twist on the age-old question of whether the chicken...</p>
			<ul>
				<li>[<a href="#">United States</a>]</li>
				<li>[<a href="#">Canada</a>]</li>
				<li>[<a href="#">China</a>]</li>
				<li>[<a href="#">Austrila</a>]</li>
				<li>[<a href="#">United Kingdom</a>]</li>
			</ul>
			<p>Hardcouber with shma1664. More than 200 color photos.</p>
			<p>Tel:+86-13511012671</p>
			<a href="mailto:616059480@qq.com; shma1664@metarnet.com">联系我们</a>
		</div>
	</div>
 </BODY>
</HTML>

3、CSS设计总结

超链接的格式设置

a:link{color:black;text-decoration:none;font-family:黑体;font-size:15px}
a:visited{color:black;text-decoration:none;font-family:黑体;font-size:15px}
a:hover{color:#990099;text-decoration:none;font-family:黑体;font-size:15px}
a:active{color:blue;text-decoration:none;font-family:黑体;font-size:15px}

margin, padding,border (顺时针，上右下左)
position: 相对定位（relative）原来的位置仍在，不会被移动，相对于离它最近的那个定位容器的位置，设置其left，right，top，bottom；绝对定位（absolute）原来的位置被后面的元素替代，补进。，相对于离它最近的那个定位容器的位置，设置其left，right，top，bottom
list-style-type：none/underline
display:none; （在页面中不显示，隐藏）
line-height：设置行高
font-famaily，font-size,color