HTML CSS 超链

html 复制代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>新闻详情</title>
		<link rel="stylesheet" href="css/newsinfo.css" />
	</head>

	<body>
		<header>
			<img src="img/logo.gif">
			<nav>
				<a href="index.html">首页</a>&nbsp;&nbsp;|&nbsp;&nbsp;
				<a href="#">公司介绍</a>&nbsp;&nbsp;|&nbsp;&nbsp;
				<a href="new.html">新闻中心</a>&nbsp;&nbsp;|&nbsp;&nbsp;
				<a href="#">案例展示</a>&nbsp;&nbsp;|&nbsp;&nbsp;
				<a href="#">诚聘英才</a>&nbsp;&nbsp;|&nbsp;&nbsp;
				<a href="#">在线留言</a>
			</nav>
			<hr>
		</header>
		<main>
			<h3>办公空间设计怎样能有艺术感</h3>
			<h4>第一、办公室装修设计秩序感</h4>
			<p class="text">
				在设计中的秩序,是指形的反复、形的节奏、形的完整和形的简洁。办公室设计也正是运用这一基本理论来创造一种安静、 平和与整洁的环境。秩序感是办公室设计的一个基本要素。要达到办公室设计中秩序的目的,所涉及的面也很广，如家具样 式与色彩的统一;平面布置的规整性;隔断高低尺寸与色彩材料的统一;天花的平整性与墙面不带花俏的装饰;合理的室内色 调及人流的导向等。办公室装潢这些都与秩序密切相关，可以说秩序在办公室设计中起着最为关键性的作用。
			</p>

			<p class="photo">
				<img src="img/office.jpg" width="400">
			</p>

			<h4>第二、办公室装修设计明快感</h4>

			<p class="text">
				让办公室给人一种明快感也是设计的基本要求，办公环境明快是指办公环境的色调干净明亮，灯光布置合理,有充足的光线等， 这也是办公室的功能要求所决定的。办公室装潢在装饰中明快的色调可给人一种愉快心情，给人一种洁净之感，同时明快的色 调也可在白天增加室内的采光度。目前有许多设计师将明度较高的绿色引入办公室，这类设计往往给人一种良好的视觉效果， 从而创造一种春意，这也是一种明快感在室内的创意手段。
			</p>

		</main>

		<footer id="foot">
			<hr>
			<a href="img/map.doc">我的位置</a>&nbsp;&nbsp;|&nbsp;&nbsp;
			<a href="mailto:123456@qq.com">Email:站长信箱</a>&nbsp;&nbsp;|&nbsp;&nbsp;
			<a href="#">关于我们</a>

		</footer>

	</body>

</html>

css 复制代码

nav {
	text-align: right;
}

h3,
.photo,
#foot {
	text-align: center;
}

nav a {
	text-decoration: none;
}

nav a:link {
	color: #309;
	font-weight: bold;
}

nav a:visited {
	color: #999;
	font-weight: bold;
}

nav a:hover {
	color: #f60;
	font-style: italic;
}

nav a:active {
	color: green;
	font-style: italic;
}

@font-face {
	font-family: fzzt;
	src: url("../img/fzrbsjt.ttf");
	/*注意路径要加两个点*/
}

h3 {
	font-family: fzzt;
}

hr {
	border: none;
	border-bottom: 3px double #03f;
}

h4 {
	font-family: "黑体";
	font-size: 20px;
}



.photo img{
	border: 16px steelblue ridge;		
}

#foot{
	text-transform: uppercase;
	line-height: 2em;
}

.text{
	line-height: 2em;
	text-indent: 2em;
}