HTML5+CSS3——【笔记】 4、列表和超链接
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>4、列表和超链接</title> <style type="text/css"> p{ white-space:pre } </style> </head> <body> 一、列表标签 <br/> 1、无序列表<ul> <!-- 内部可嵌套多个<li>标签(列表项)且只能嵌套<li>标签,文字只能写在li标签中;各个列表项间没有顺序级别之分 <ul>和<li>标签都拥有type属性,用于指定列表项目符号; type属性值:disc(默认)、circle、square 但列表中type属性常不使用,而通过CSS样式属性替代 --> eg: <body> <ul> <li type="square">春</li> <li type="circle">夏</li> </ul> </body> 2、有序列表<ol> <!-- 强调排序顺序的列表,可内嵌多个<li>标签 除了type属性外还可为<ol>定义start属性、为<li>定义value属性;确定有序列表的项目符号。 type(属性值:1(默认,表示以数字为序号);字母a、A(以大/小写字母排序);i、I(以罗马数字排序)) start起始数字(属性值:数字) ; value(属性值:数字) 但常通过使用CSS样式属性替换 --> eg： <ol> <li>(默认type)</li> <li>孙悟空</li> <li>猪八戒</li> </ol> <ol> <li type="1" value-"1">孙悟空</li> <li type="a">猪八戒</li> <li type="a">沙僧</li> </ol> 3、定义列表<dl> <!-- 其包含三个标签dl、dt、dd dt、dd放置dl标签中,dt用于指定属于名词,dd用于对名词进行解释描述,dd标签会长生一定缩进效果. --> eg： <dl> <dt>红色</dt> <dd>光谱中长波末端的颜色</dd> <dd>是光的三原色和心理原色之一</dd> <dd>表吉祥、喜庆、热烈、奔放</dd> <dd>红色的补色是青色</dd> </dl> 4、列表的嵌套应用 eg： <h2>饮品</h2> <ul> <li>咖啡 <ol> <!-- 有序列表的嵌套 --> <li>拿铁</li> <li>摩卡</li> </ol> </li> <li>茶 <ul> <!-- 无序列表的嵌套 --> <li>碧螺春</li> <li>龙井</li> </ul> </li> </ul> 二、CSS控制列表样式 1、list-style-type属性 用于控制列表项显示符号类型 <!-- 属性值 描述 属性值 描述 disc 实心圆(无序列表) none 不使用符号(无序和有序列表) circle 空心圆(无序列表) cjk-ideographic 简单表意数字 square 实心方块(无序列表) georgian 传统乔治亚编号方式 decimal 阿拉伯数字 decimal-leading-zero 以0开头的阿拉伯数字 lower-roman 小写罗马数字 upper-roman 大写罗马数字 lower-alpha 小写英文字母 upper-alpha 大写字母 lower-latin 小写拉丁字母 upper-latin 大写拉丁字母 hebrew 传统希伯来编号方式 armenian 传统的亚美尼亚编号方式 --> eg： <head> <style type="text/css"> .c1{list-style-type: lower-alpha;} .c2{list-style-type: circle;} </style> </head> <h3>红色</h3> <ul class="c1"> <li>大红</li> <li>朱红</li> </ul> <ol class="c2"> <li>群青</li> <li>湖蓝</li> </ol> 2、list-style-image属性 <!-- CSS提供list-style-image属性,为列表项设置美观的项目图像取代项目符号, 取值为图像的url,图片大小不能设置。 --> eg: <head> <style type="text/css"> .c3{list-style-image:url(https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/958/20220703111611.png) ; } </style> </head> <body> <h3板栗功效</h3> <ul class="c3"> <li>抗衰老</li> <li>益气健脾</li> </ul> </body> 3、list-style-position属性 <!-- 控制列表项目符号位置,即列表项目符号相对于列表项内容的位置 属性值： inside:列表项目符号位于列表文本以内 outside:列表项目符号位于列表文本以外(默认值) --> eg: <style type="text/css"> .in{list-style-position: inside;} .out{list-style-position: outside;} </style> <body> <h2>中秋节</h2> <ul class="in"> <li>中秋节称为月夕</li> <li>在农历八月十五</li> </ul> <ul class="out"> <li>端午节</li> <li>除夕</li> </ul> </body> 4、list-style属性(综合设置) 格式: list-style:列表项目符号 列表项目符号的位置 列表项目图像; eg: <head> <style type="text/css"> .ul1{list-style:circle inside url(https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/958/20220703111611.png)} </style> </head> <ul class="ul1"> <li>前端</li> <li>html、css、JavaScript等知识</li> </ul> 三、超链接 1、超链接创建 <!-- 只需用<a></a>标签环绕链接对象即可 语法: <a href="跳转目标" target="目标窗口弹出方式">文本或图像</a> href属性:指定链接目标url地址 target属性值:_self(默认,原窗口打开)、_blank(新窗口打开) --> 2、锚点链接 <!-- 跳到页面中指定位置 <a>标签应用href属性,href="#id名" --> eg: <ul> <li><a href="#one">春天</a></li> <li><a href="#two">冬天</a></li> </ul> <h5 id="one">春天让人充满希望和憧憬</h3> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <p id="two">冬天让人感到更加感伤和温暖</p> 四、链接伪类控制超链接 <!-- 为超链接指定不同状态,是的其在点击前、后、鼠标悬停时的样式不同. 超链接标签<a>的伪类: a:link{CSS样式规则;} 超链接默认样式 a:visited{CSS样式规则;} 超链接被访问过后样式 a:hover{CSS样式规则;} 鼠标经过、悬停时超链接的样式 a:active{CSS样式规则;} 鼠标点击不放时超链接的样式 定义四种伪类时,常按照a:link、a:visited、a:hover、a:active顺序书写, 否则样式可能不起作用 --> eg: <head> <style type="text/css"> a{margin-right: 20px;} /* 给所有a标签设置右边距 */ a:link,a:visited{ color: #000; /* 设置默认和被访问后的颜色为黑色 */ text-decoration: none; /* 设置<a>标签自带下画线效果为无 */ } a:hover{ /* 鼠标经过、悬停时样式 */ color:red; /* 设置颜色 */ text-decoration: underline; /* 悬停时显示下画线 */ } a:active{ color: blue; } /* 设置鼠标点击不放时颜色 */ </style> </head> <body> <a href="#">公司首页</a> <a href="#">公司简介</a> <a href="#">产品介绍</a> <a href="#">联系我们</a> </body> </body> </html>
