前端开发HTML+CSS之列表超链接（五）

最新推荐文章于 2024-05-01 15:27:58 发布

我要糖

最新推荐文章于 2024-05-01 15:27:58 发布

阅读量1.6k

点赞数 4

分类专栏： HTML+CSS 文章标签： HTML CSS 列表超链接前端开发

本文链接：https://blog.csdn.net/qq_44790423/article/details/98624313

版权

HTML+CSS 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

在学习上面一部分之后我们可能就会有越来越多的问题和疑惑需要解决，比如，如果我想把一堆的同类型的在最顶上作为一横排放在导航，或者一竖排放在最左侧，我们现在的知识还不能解决这些东西，那么我们就需要好好利用列表

同时，我们现在做的只是一个简单的界面，并不能实线任何功能，那样怎么样才能实现网站的链接，实现可以点击并且点击之后可以得到我们想要的界面呢

一、列表

前面提到过列表有有序和无序，按照标签将内容填入即可

有序列表

<ol>
   <li>第一项</li>
   <li>第二项</li>
 </ol>

无序列表

<ul>
   <li>项目</li>
   <li>项目</li>
 </ul>

定义列表

<dl>
   <dt>项目 1</dt>
     <dd>描述项目 1</dd>
   <dt>项目 2</dt>
     <dd>描述项目 2</dd>
 </dl>

嵌套列表

<ul>
   <li><ul>
   <li>项目</li>
   <li>项目</li>
 </ul></li>
   <li><ol>
   <li>第一项</li>
   <li>第二项</li>
 </ol></li>
 </ul>

列表属性创建纵向菜单

这里直接放上代码

<!doctype html>
<html>
<head>
	<meta charset = 'utf-8'>
	<title>创建纵向菜单</title>
	<style>
	body{
		margin: 10px;
		font-size: 12px;
		text-align: center;
		font-family: Verdana, Geneva, sans-serif;
		}
	#menu{
		width: 100px;
		border: 1px solid #ccc;
		}
	#menu ul{
		margin: 0px;
		padding: 0px;
		list-style-type: none;
		}
	#menu ul li {
		padding: 12px 0px;
		background: #eee;
		border-bottom: 1px solid #ccc;
		}
	#menu ul li .last{
		border-bottom: 0px;
		}
	a:link{
		color: #000;
		text-decoration: none;
		}
	a:hover{
		color: #f00;
		}
	</style>
</head>
<body>
	<div id="menu">
		<ul>
		   <li><a href="#">菜单1</a></li>
		   <li><a href="#">菜单2</a></li>
		   <li><a href="#">菜单3</a></li>
		   <li><a href="#">菜单4</a></li>
		   <li><a href="#">菜单5</a></li>
		   <li class="last"><a href="#">菜单6</a></li>
 		</ul>
	</div>
</body>
</html>

列表属性创建横向菜单

<!doctype html>
<html>
<head>
	<meta charset = 'utf-8'>
	<title>创建纵向菜单</title>
	<style>
	body{
		margin: 0;
		font-size: 12px;
		text-align: center;
		font-family: Verdana, Geneva, sans-serif;
		}
	#menu{
		width: 4500px;
		}
	#menu ul{
		margin: 0px;
		padding: 0px;
		background: #eee;
		list-style-type: none;
		}
	#menu ul li {
		display: inline;
		padding: 0px 12px;
		line-height: 36px;
		border-bottom: 1px solid #ccc;
		}
	#menu ul li .last{
		border-right: 0px;
		}
	a:link{
		color: #000;
		text-decoration: none;
		}
	a:hover{
		color: #f00;
		}
	</style>
</head>
<body>
	<div id="menu">
		<ul>
		   <li><a href="#">菜单1</a></li>
		   <li><a href="#">菜单2</a></li>
		   <li><a href="#">菜单3</a></li>
		   <li><a href="#">菜单4</a></li>
		   <li><a href="#">菜单5</a></li>
		   <li class="last"><a href="#">菜单6</a></li>
 		</ul>
	</div>
</body>
</html>

二、超链接

链接要正常跳转，需要同时存在两个端点，即源端点和目标端点，
源端点是指网页中提供链接单击的对象，如文本或图像
目标端点指链接跳转过去的页面或位置，如某网页或书签等

普通的链接：<a href="http://www.w3cschool.cn/html/链接地址">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a> 
邮件链接： <a href="http://www.w3cschool.cn/html/mailto:webmaster@example.com">发送e-mail</a>
书签： <a id="tips">
提示部分</a> <a href="http://www.w3cschool.cn/html/html-quicklist.html#tips">跳到提示部分</a>

使用a标签创建链接

属性	描述
href	必设属性，用于指定链接路径，用于设置超链接的目标端点
target	定义目标窗口
title	定义链接提示信息，当鼠标移动到源端点时会弹出该提示信息

href属性值

属性	描述
“”（引号内没有内容）	在Chrome浏览器中跳转到当前页面的顶部
#	跳转到当前页面的顶部
javascript:…	执行JavaScript后面指定的脚本
URL	跳转到指定页面

target属性值

属性值	描述
_blank	新开一个窗口打开链接文档
_self	在同一个框架或同一个窗口中打开链接文档
_parent	在上一级窗口中打开，一般在框架页面经常使用
_top	在浏览器的整个窗口中打开，忽略任何框架
框架名称	在指定的浮动框架窗口中打开链接文档

相对路径/绝对路径

相对路径为相对于当前文件的位置
绝对路径为该文件实际的位置

由于我一般都将文件放在同一个地方，而且涉及到的代码和文件夹也比较少，故对于相对路径以及绝对路径理解不透彻，就不拿出来误导大家了

在进行了上述的学习，我们知道如何创建菜单项以及超链接的作用，我们需要在此基础上不断的熟悉其功能，得到更多更好的网页
所以快动手尝试一下吧！

该系列博客参考了聂常红刘伟著的前端HTML+CSS修炼之道
第五篇HTML+CSS学习笔记到此结束 cheers! ?

我要糖

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
前端开发HTML+CSS之列表超链接（五）

在学习上面一部分之后我们可能就会有越来越多的问题和疑惑需要解决，比如，如果我想把一堆的同类型的在最顶上作为一横排放在导航，或者一竖排放在最左侧，我们现在的知识还不能解决这些东西，那么我们就需要好好利用列表同时，我们现在做的只是一个简单的界面，并不能实线任何功能，那样怎么样才能实现网站的链接，实现可以点击并且点击之后可以得到我们想要的界面呢一、列表前面提到过列表有有序和无序，...
复制链接

扫一扫