HTML 怎么把网页的头部导航条和尾部友情链接都固定在每一个页_百度...

发布网友发布时间：2022-04-23 04:00

共3个回答

懂视网时间：2022-05-13 15:50

接着DIV+CSS实操一：经管系网页总体模块布局这篇博客继续，实现添加导航栏和友情链接栏，导航栏的下拉

菜单我们后续会加上。

先来HTML代码：

经管系Dreamweaver8 		本站首页
		本系概况
		教育教学
		科学研究
		招生就业
		学生工作
		党团建设
		考研升本
		实习基地
		经管动态
		通知公告
	 	 		 常用服务		 	 	 		 站内导航		 	 	 		 扫一扫		 					 	 	 	 		 经管动态		 	 	 		 通知公告		 	 			 		 招生就业		 	 	 		 实习基地		 	 	 		 学生工作		 	 	 友情链接：					 			 教学资源网 			 | 			 中国大学 			 | 			 教育部 			 | 			 河北省教育厅 			 | 			 中国教育科研网 			 | 			 教育网河北主节点 			 | 			 慕课网 			 | 			 爱课程 			 | 			 南方周末 			 | 			 经济观察 			 | 			 中国企业家

再来CSS代码：

/*第一次添加网页总体布局的代码*/* { margin:0px; 	padding:0px;}body { padding:0px; 	margin:0px; 	font-size:12px;}#top {	background-image: url(images/head.jpg);	background-repeat: no-repeat;	height: 120px;	width: 998px;	margin-right: auto;	margin-left: auto;}#nav {	background-image: url(images/n_nav_bg.gif);	background-repeat: repeat-x;	height: 37px;	width: 998px;	margin-right: auto;	margin-left: auto;}#adpic {	background-image: url(images/h4.jpg);	background-repeat: no-repeat;	height: 218px;	width: 998px;	margin-right: auto;	margin-left: auto;}#news {	height: 720px;	width: 998px;	margin-right: auto;	margin-left: auto;}#link {	background-image: url(images/n_title_bg.gif);	background-repeat: repeat-x;	height: 40px;	width: 998px;	margin-right: auto;	margin-left: auto;}#copyright {	background-color: #E2E2E2;	height: 80px;	width: 998px;	margin-top: 0px;	margin-right: auto;	margin-left: auto;	border-top-width: 5px;/*设置5像素的上边框*/	border-top-style: solid;	border-top-color: #006042;	margin-bottom: 0px;}#news #news_left {	float: left;	height: 720px;	width: 233px;	margin-right: 5px;}#news #news_mid {	float: left;	height: 720px;	width: 455px;	margin-right: 5px;}#news #news_right {	height: 720px;	width: 300px;	float: left;}#news #news_left #news_left_top {	height: 248px;	width: 233px;	background-color:#FF0000;}#news #news_left #news_left_mid {	height: 240px;	width: 233px;	background-color:#00FF00;}#news #news_left #news_left_bottom {	height: 232px;	width: 233px;}#news #news_mid #news_mid_top {	height: 488px;	width: 455px;	background-color:#000000;}#news #news_mid #news_mid_bottom {	height: 232px;	width: 455px;	background-color:#999999;}#news #news_right #news_right_top {	height: 248px;	width: 300px;	background-color:#FFFF00;}#news #news_right #news_right_mid {	height: 240px;	width: 300px;	background-color:#00FFFF;}#news #news_right #news_right_bottom {	height: 232px;	width: 300px;	background-color:#FF00FF;}/*第二次添加导航栏和友情链接栏的代码，下拉菜单我们后面做*/a:link { /*伪类选择页面中全部的超链接标签的未访问的链接状态*/ color:#000000; 	text-decoration:none;}a:visited { /*伪类选择页面中全部的超链接标签的已访问的链接状态*/ color:#000000; 	text-decoration:none;}a:hover{ /*伪类选择页面中全部的超链接标签的鼠标悬停的状态*/	color:#FF0000;	text-decoration:none;	font-weight: bold;}#nav li {/*后代选择器选择div中行内元素li的设置*/	float: left;	line-height: 37px;	list-style-type:none;	text-align:center;	color:#FFFFFF;	text-decoration:none;	font-family: "微软雅黑";	font-size: 14px;	font-weight: bold;	width:px;	height:37px;	display:block;}#link #link_left {	font-family: "微软雅黑";	font-size: 14px;	line-height: 32px;	font-weight: bold;	color: #009966;	float: left;	height: 32px;	width: 80px;	padding-left: 10px;}#link #link_right {	line-height: 32px;	float: left;	height: 32px;	width: 908px;}

浏览器运行的结果为：

导航栏：

未点击的友情链接栏：

鼠标悬浮在链接上的友情链接栏：

热心网友时间：2022-05-13 12:58

现在流行使用模板标签，比如Dedecms:

{dede:include filename="head.htm"/}
{dede:include filename="footer.htm"/} //这样每个页面都可以调用
你还可以用Iframe来实现：
//aaa.html
<body>
<iframe height="100" src="header.html"></iframe>

//内容

<iframe height="100" src="footer.html"></iframe>
</body>

热心网友时间：2022-05-13 14:16

全部频道

HTML 怎么把网页的头部导航条 和尾部友情链接 都固定在每一个页_百度...

HTML 怎么把网页的头部导航条和尾部友情链接都固定在每一个页_百度...