HTML CSS 超链

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;
}
相关推荐
OEC小胖胖1 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
vvilkim2 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
ai小鬼头4 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz4 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子4 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边4 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客4 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8884 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
幼儿园技术家4 小时前
微信小店与微信小程序简单集成指南
前端
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试