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;
}
相关推荐
你听得到114 分钟前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A11 分钟前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界13 分钟前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架
前端Hardy28 分钟前
HTML&CSS:惊艳!科技感爆棚的登录页面代码解析
前端·javascript·html
我是哈哈hh40 分钟前
【AJAX项目】黑马头条——数据管理平台
前端·javascript·ajax·前端框架·axios·proxy模式
高端章鱼哥43 分钟前
分享一个 MySQL binlog 分析小工具
前端
Ronin-Lotus44 分钟前
上位机知识篇---AJAX
前端·javascript·ajax
Rika1 小时前
手写mini-vue之后,我写了一份面试通关手册
前端·vue.js
Sherry0071 小时前
CSS Grid 交互式指南(译)(下)
css·面试
我想说一句1 小时前
使用React开发拉布布旅游智能聊天机器人的实践
前端·前端框架