列表与超链接

最新推荐文章于 2022-11-17 20:25:07 发布

LINGYIM

最新推荐文章于 2022-11-17 20:25:07 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/LINGCaes/article/details/103704281

版权

列表标记

一、无序列表：ul
无序列表是网页中最常用的列表，因为其各个列表项之间没有顺序级别之分，通常是并列的
ul和li都有type属性，用于指定列表项目符号

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>无序列表</title>
 </head>
 <body>
  <h2>传智博客学科</h2>
  <ul>
   <li>网页平面</li>
   <li type="circle">Java</li>
   <li type="disc">PHP</li>
  </ul>
 </body>
</html>

在这里插入图片描述
二、有序列表ol
其各个列表项按照一定的顺序排列
除了type属性外，还可以为ol定义start属性、为li定义value属性

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>有序列表</title>
 </head>
 <body>
  <h2>游戏排行榜</h2>
  <ol>
   <li>魔兽世界</li>
   <li>梦幻西游</li>
   <li>诛仙2</li>
  </ol>
 </body>
</html>

在这里插入图片描述
三、定义列表：dl
dl标记用于指定定义列表，dt标记用于指定术语名词，dd标记用于对名词进行解释和描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>有序列表</title>
 </head>
 <body>
 <dl>
  <dt>计算机</dt>
  <dd>用于大型运算的机器</dd>
  <dd>可以上网冲浪</dd>
  <dd>工作效率非常高</dd>
  </div>
 </dl>
 </body>
</html>

在这里插入图片描述

CSS控制列表样式

一、list-style-type属性
用于控制无序列表和有序列表的项目符号
二、list-style-image属性
为各个列表项目图像，使列表的样式更加美观
三、list-style-position属性
控制列表项目符号的位置，inside：列表项目符号位于列表文本以外，outside：列表项目符号位于列表文本以外

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   .in{list-style-position: inside;}
   .out{list-style-position: outside;}
   li{border: 1px solid #CCC;}
  </style>
 </head>
 <body>
 <ul class="in">
  <li>Java</li>
  <li>HTML</li>
 </ul>
 <ul class="out">
  <li>Java</li>
  <li>HTML</li>
 </ul>
 </body>
</html>

在这里插入图片描述

超链接标记

一、创建超链接：a标记

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href：超链接功能
target：_self：在原窗口打开，_blank：在新窗口打开
二、锚点链接：通过创建锚点链接，用户能够快速定位到目标内容
首先使用<a href="#id名">链接文本</a>创建链接文本，然后使用相应的id名标注跳转目标位置

链接伪类控制超链

通过伪链接可以实现不同的链接状态，不是真正意义上的类，名称由系统定义，通常由标记名、类名或id名加“：”构成
a:link 未访问时超链接的状态
a:visited 访问后超链接的状态
a:hover 鼠标经过、悬停时超链接的状态
a:active 鼠标点击不动时超链接的状态
同时使用链接的4种伪类时，通常按照a:link、a:visited、a:hover和a:active的顺序书写，否则定义的样式可能不起作用
除了文本样式外，链接伪类还经常用于控制超链接的背景、边框等样式