CSS列表和超链接的使用（8个案例+代码+效果图+素材）

已于 2024-10-07 20:18:59 修改
阅读量1.1k 收藏 26
点赞数 12
分类专栏： 前端html+css知识梳理 文章标签： css 前端 html html5 vscode 开发语言
于 2024-10-05 12:07:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76862031/article/details/142711334
版权

目录

1.无序列表ul

案例:定义不同type的li

1.代码

2.效果

2.有序列表ol

type 取值

start属性

value

案例:定义不同类型的有序列表

1.代码

2.效果

3.定义列表dl

1.代码

2.效果

4.list-style-type属性

list-style-type的取值

案例:list-type的使用

1.代码

2.效果

5.list-style-image属性

案例:为列表添加图片序号

1.代码

2.效果

6.list-style-position属性

案例:list-style-postion的使用

1.代码

​编辑

2.效果

7.超链接

案例：制作百度连接和CSND连接

1.代码

2.效果

8.锚点连接

案例:页面跳转+浮动窗口（跳转指定球）

1.代码

2.效果

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.效果

 附录:

所用素材下载

aMouse.png等2个文件官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘

27 个 CSS 案例演示和 DEMO
2401_84092456的博客
04-12 675
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**[外链图片转存中…(img-hftjZxoy-1712861780221)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
使用html+css+js实现一个静态页面（含源码）
weixin_BJ050106的博客
08-21 2431
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站...
传智播客西安中心之Android课程大纲
itcaster的博客
10-07 2764
2015年JavaEE+Android就业班课程详解 全价22980元，优惠价18980元！（享受优惠价的条件是什么？） 前言：你已经错过做移动互联时代的领头羊，难道15年你还要继续埋没在茫茫人海中吗，给自己一个机会，我们帮你创造自己的奇迹！ —— 从2009年1月工信部发放3G牌照，到2013年12月发放4G牌照，再到工信部、发改委、科技部成立联盟组织开始着手研发5G通信技
CSS案例
weixin_30920091的博客
07-22 766
1.美团网效果 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <t...
20多个CSS样式表精选案例（实用、常用案例）
08-24
个人精心整理收藏，值得推荐！包括《网页设计标准尺寸》文档 搜索引擎 DIV层居中 无图片实现圆角框 精典布局等实用案例！无论新手老手都值得收藏！
css 案例
猫熊的专栏
01-08 964
<br /><br />span的宽度设定<br />display:-moz-inline-box;display:inline-block;width:150px;<br />IE8的css hack<br /><br />关注过IE8的css hack的人相信大家都在使用这个hack，就是“/9”的css hack：<br />.test{<br />color:#000000;                  /* FF,OP支持 */<br />color:#0000FF/9;       /*
网页设计与制作教程（HTML+CSS+JavaScript）第2版+电子教案、素材文件、源代码
03-31
素材文件可能是用于练习的设计图、图片和其他资源，而源代码则提供了实际的HTML、CSS和JavaScript示例，供学习者参考和模仿。 通过这个教程，学习者不仅可以理论结合实践，还能通过解构和分析源代码提升问题解决...
web网页设计技术（html+css+javascript）进行网站开发，含源代码 ，以及网页所用的图片，可做课程设计参考
最新发布
05-31
本资源包提供了一套完整的web网页设计教程，包括HTML、CSS和JavaScript的实践应用，以及相应的源代码和图片素材，非常适合用作课程设计或自学参考。 HTML (HyperText Markup Language) 是网页内容的结构化语言，它...
css案例
n0987612345的博客
03-24 103
css全部案例
wangqazwsxedc的博客
04-23 297
1.css的语法 <meta charset="UTF-8"> <title>Document</title> <style> p{ color:red; } h2{ color:blue; } </style> <p>CSS从入门到精通！</p> <h2&gt...
CSS案例及笔记
hgftyh的博客
04-26 336
一、CSS简介 1、什么是CSS CSS:Cascading Style Sheet 是一组样式设置规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让网页更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1.CSS语法 <head> <style> ...
CSS实例 简单案例
yogur_father的博客
11-01 2075
CSS文件 注意改变图片的样式时，是要加给图片所在的标签 比如p /* 整体 */ body { font: 16px/28px "Microsoft YaHei"; } /* 大标题 */ h1 { font-weight: 600; text-align: center; } /* 连接a */ a { text-decoration: none; } /* 时间 来源 */ .scor { font-size: 12px; text-align:
30个HTML5+CSS3网页模板设计案例精选
此外，模板中的交互式元素，如下拉菜单、滑动效果、轮播图等，也是通过CSS3的过渡和动画特性实现的。 总的来说，"HTML5+CSS3网页设计模板(30例)zip"资源包是一个非常宝贵的资源，无论是对于初学者还是有经验的设计...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值