列表与超链接

列表标记

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



 
  "utf-8">
  无序列表
 
 
  

传智博客学科

  • 网页平面
  • "circle">Java
  • "disc">PHP

列表与超链接_第1张图片
二、有序列表ol
其各个列表项按照一定的顺序排列
除了type属性外,还可以为ol定义start属性、为li定义value属性



 
  "utf-8">
  有序列表
 
 
  

游戏排行榜

  1. 魔兽世界
  2. 梦幻西游
  3. 诛仙2

列表与超链接_第2张图片
三、定义列表:dl
dl标记用于指定定义列表,dt标记用于指定术语名词,dd标记用于对名词进行解释和描述



 
  "utf-8">
  有序列表
 
 
 
计算机
用于大型运算的机器
可以上网冲浪
工作效率非常高

列表与超链接_第3张图片

CSS控制列表样式

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



 
  
  
  
 
 
 
    "in">
  • Java
  • HTML
    "out">
  • Java
  • HTML

列表与超链接_第4张图片

超链接标记

一、创建超链接:a标记

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

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

链接伪类控制超链

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

你可能感兴趣的:(列表与超链接)