CSS列表和超链接的使用（8个案例+代码+效果图）
目录
1.无序列表ul
ul是无序列表，li是ul的列表项
案例:定义不同type的li
type的取值说明
- disc 默认是实心圆点
- circle 是一个空心远点
- square 是一个是新方块
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>无序列表ul</title> <style> li:hover{ /** * 鼠标悬停时，字体颜色为红色 */ color: red; } </style> </head> <body> <ul> <li > 这是我的无序列表1的内容 </li> <li type="disc"> 这是我的无序列表2的内容 </li> <li type="circle"> 这是我的无序列表3的内容 </li> <li type="square"> 这是我的无序列表4的内容 </li> </ul> </body> </html>
2.效果
2.有序列表ol
ol是有序列表
type 取值
- 1 是数字 使列表的前置数字为1
- a 是小写字母 使列表的序号变为小写字母
- A 是大写字母 使列表的序号变为大写字母
- i 是罗马数字 使列表序号变为罗马数字 小
- I 是罗马数字 使列表序号变为罗马数字 大
start属性
定义该项的起始位置
value
定义该项的值
案例:定义不同类型的有序列表
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定义不同类型的有序列表</title> <style> li{ width: 200px; height: 50px; border: 2px double rgb(125, 233, 125); } li:hover{ background-color: rgb(255, 238, 0); } </style> </head> <body> <ol> <!-- type为数字 --> <li type="1"> type为数字 </li> <!-- type为小写字母 --> <li type="a"> type为小写字母 </li> <!-- type为大写字母 --> <li type="A"> type为大写字母 </li> <!-- type罗马数字 小 --> <li type="i"> type罗马数字 小 </li> <!-- type罗马数字 大 --> <li type="I"> type罗马数字 大 </li> <!-- start属性 --> <li start="999"> start属性:定义该项的起始位置 </li> <!-- value属性 --> <li type="i" value="888"> value属性 </li> </ol> </body> </html>
2.效果
3.定义列表dl
dl标签定义列表，dt是列表头，dt是列表子项
案例:dl的基本使用
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定义列表dl</title> </head> <body> <dl> <dt>dt定义列表的头部</dt> <dd>dd定义列表的内容</dd> <dt>dt定义列表的头部</dt> <dd>dd定义列表的内容</dd> </dl> </body> </html>
2.效果
4.list-style-type属性
用于定义列表
list-style-type的取值
- desc 实心圆
- circle 空心圆
- square 实心方块
- decimal 阿拉伯数字
- lower-roman 小写罗马数字
- lower-alpha 小写英文字母
- lower-latin 小写拉丁字母
- hebrew 希伯编号
- none 不使用项目符号
- cjk-ideographic 简单的数字
- georgian 表意数字
- decimal-leading-zero 0开头的阿拉伯数字
- upper-roman 大写罗马数字
- upper-Latin 大写拉丁字母
- armeniaan 亚美尼亚编号的方式
案例:list-type的使用
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>list-style-type属性</title> <style> li:hover { /** * 鼠标悬停时，字体颜色为红色 */ color: red; font-size: 20px; } li{ border: 2px solid #87fa3a; width: 200px; height: 50px; margin: 10px; } </style> </head> <body> <!-- desc 实心圆 无序 circle 空心圆 无序 square 实心方块 无序 decimal 阿拉伯数字 lower-roman 小写罗马数字 lower-alpha 小写英文字母 lower-latin 小写拉丁字母 hebrew 希伯编号 none 不使用项目符号 cjk-ideographic 简单的数字 georgian 表意数字 decimal-leading-zero 0开头的阿拉伯数字 upper-roman 大写罗马数字 upper-Latin 大写拉丁字母 armeniaan 亚美尼亚编号的方式 --> <ul> <li style="list-style-type: decimal;"> decimal 阿拉伯数字 </li> <li style="list-style-type: lower-roman;"> lower-roman 小写罗马数字 </li> <li style="list-style-type: lower-alpha;"> lower-alpha 小写英文字母 </li> <li style="list-style-type: lower-latin;"> lower-latin 小写拉丁字母 </li> <li style="list-style-type: hebrew;"> hebrew 希伯编号 </li> <li style="list-style-type: none;"> none 不使用项目符号 </li> <li style="list-style-type: cjk-ideographic;"> cjk-ideographic 简单的数字 </li> <li style="list-style-type: georgian;"> georgian 表意数字 </li> <li style="list-style-type: decimal-leading-zero;"> decimal-leading-zero 0开头的阿拉伯数字 </li> <li style="list-style-type: upper-roman;"> upper-roman 大写罗马数字 </li> <li style="list-style-type: upper-Latin;"> upper-Latin 大写拉丁字母 </li> <li style="list-style-type: armeniaan;"> armeniaan 亚美尼亚编号的方式 </li> </ul> </body> </html>
2.效果
5.list-style-image属性
list-style-image这个用来定义序号为图片
案例:为列表添加图片序号
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>为列表添加图片序号</title> <style> li:hover{ color: red; font-size: 20px; } li{ border: 2px solid #87fa3a; width: 200px; height: 50px; margin: 10px; list-style-image: url("./small_boy.PNG"); text-align: center; } </style> </head> <body> <ul> <li>ONE_Li</li> <li>TWO_Li</li> <li>THREE_Li</li> <li>FOUR_Li</li> <li>FIVE_Li</li> <li>SIX_Li</li> <li>SEVEN_Li</li> </ul> </body> </html>
2.效果
6.list-style-position属性
list-style-position属性说明
- inside 在列表里面
- outside 在列表外面
案例:list-style-postion的使用
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>list-style-position</title> <style> li:hover{ color: red; font-size: 20px; } li{ border: 2px solid #8a8b88; width: 200px; height: 50px; margin: 10px; box-shadow: 5px 10px 5px #d4e7a0; list-style-type: upper-latin; } .inList{ list-style-position: inside; } .outList{ list-style-position: outside; } </style> </head> <body> <ul> <li class="inList">ONE_Li</li> <li class="outList">TWO_Li</li> <li class="inList">THREE_Li</li> <li class="outList">FOUR_Li</li> <li class="inList">FIVE_Li</li> <li class="outList">SIX_Li</li> <li class="inList">SEVEN_Li</li> </ul> </body> </html>
2.效果
7.超链接<a>
<a>语法 :
- <a href="跳转目标连接的网址" target="弹出方式" >文本/图像</a>
- href: 用于指定连接地址
- target 指定弹出的方式
- _self原窗口打开
- _target新窗口打开
案例：制作百度连接和CSND连接
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>制作百度连接和CSND连接</title> <style> a:hover { color: red; font-size: 20px; } .myStyle { width: 200px; height: 50px; border: solid 2px #b0db93; } .myStyle:hover { background-color: #0abef5; } </style> </head> <body style=" display: grid; grid-template-columns: 1fr 1fr;"> <div class="myStyle"> <a href="http://www.baidu.com" target="_blank">百度</a> <br> </div> <div class="myStyle"> <a href="http://www.csdn.net" target="_self">CSND</a> </div> </body> </html>
2.效果
点击百度,弹出一个新窗口
点击csdn，在原来的窗口打开
8.锚点连接
通过href和控件的id属性跳转指定位置
案例:页面跳转+浮动窗口（跳转指定球）
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>页面跳转+浮动窗口</title> <style> #float-window{ width: 200px; height: 200px; background-color: #000; color: #fff; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 999; } .pageClassStyle{ width: 800px; height: 800px; border-radius: 50%; text-align: center; } a{ color: #f50a0a; text-decoration: none; font-size: 20px; } </style> </head> <body style="margin: 0 auto; "> <div id="myRed" class=" pageClassStyle" style="background-color: red;">红球</div> <div id="myGreen" class=" pageClassStyle" style="background-color: green;">绿球</div> <div id="myblue" class=" pageClassStyle" style="background-color: blue;">蓝球</div> <div id="myYellow" class=" pageClassStyle" style="background-color: yellow;">绿球</div> <div id="myOrange" class=" pageClassStyle" style="background-color: orange;">橙球</div> <div id="float-window"> 我是一个浮动窗口 <br> <a href="#myRed" style="background-color: #2fdae0;">跳转到红球</a><br> <a href="#myGreen" style="background-color: green;">跳转到绿球</a><br> <a href="#myblue" style="background-color: blue;">跳转到蓝球</a><br> <a href="#myYellow" style="background-color: yellow;">跳转到黄球</a><br> <a href="#myOrange" style="background:orange">跳转到橙球</a><br> </div> </body> </html>
2.效果
点击跳转绿球会跳转到绿球的页面
点击跳转黄球会跳转到黄球的页面
原文地址：https://blog.csdn.net/2301_76862031/article/details/142711334
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！