UI和LI的简单使用

最新推荐文章于 2023-03-15 11:53:20 发布

干啥啥不行能吃第一名

最新推荐文章于 2023-03-15 11:53:20 发布

阅读量9.3k

点赞数 9

分类专栏：无序列表文章标签：无序列表 ul li

本文链接：https://blog.csdn.net/qq_44853664/article/details/103010605

版权

无序列表专栏收录该内容

1 篇文章 0 订阅

订阅专栏

UI和LI

ul和li是一个组合，是无序列表标签，在实际中用的非常多，比如网址的头部导航栏等等
1简单的ui，li的使用

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <p>
   <ul>
    <li>hao123新闻</li>
    <li>人民网</li>
    <li>新华网</li>
    <li>央视网</li>
    <li>国际在线</li>
    <li>中国日报</li>
    <li>中经网</li>
    <li>光明网</li>
    <li>央广网</li>
    <li>求是网</li>
    <li>中青网</li>
    <li>网信网</li>
    <li>郑州市政府</li>
   </ul>
  </p>
 </body>
</html>

实现效果
在这里插入图片描述
当然这种是不可能作为网页的导航栏什么的，这时候就需要我们对其优化。
2通过css进行优化

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>ul和li</title>
  <style>
   .id
   {
    width:1154px;/*div长*/
    height: 300px;/*div宽*/
    background: orange;/*div背景颜色*/
    margin: 0 auto;/*div局中*/
   }
   ul
   {
       list-style:none; /* 去掉ul前面的符号 */
       padding: 0px; /* 与内部元素的距离为0 */
   }
   /* 所有ul中的li样式 */
   ul li
   {
       float:left; /* 向左漂移，将竖排变为横排 */
   }
   /*所有div中的ul中的a标签的样式*/
   ul li a, ul li a:visited
   {
       background-color: #465c71; /* 背景颜色 */
       border: 1px #4e667d solid; /* 边框 粗细大小 颜色*/
       color: #dde4ec; /* 文字颜色 */
       display: block; /* 此元素将显示为块级元素（行转块）*/
       line-height: 2em; /* 行高 */
       padding: 5px 20px; /* 内部填充的距离 */
       text-decoration: none; /* 不显示超链接下划线 */
       white-space: nowrap; /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
   }
   /* 所有ul中的a样式(鼠标移动到元素中的样式) */
   ul li a:hover
   {
       background-color: #bfcbd6; /* 背景色 */
       color: #465c71; /* 文字颜色 */
       text-decoration: none; /* 不显示超链接下划线 */
   }
   /* 所有ul中的a样式(鼠标点击元素时的样式) */
   ul li a:active
   {
       background-color: #465c71; /* 背景色 */
       color: #cfdbe6; /* 文字颜色 */
       text-decoration: none; /* 不显示超链接下划线 */
   }
   
  </style>
 </head>
 <body>
  <div class="id">
   <ul>
    <li><a href="1">hao123新闻</a></li>
    <li><a href="2">人民网</a></li>
    <li><a href="3">新华网</a></li>
    <li><a href="4">央视网</a></li>
    <li><a href="5">国际在线</a></li>
    <li><a href="6">中国日报</a></li>
    <li><a href="7">中经网</a></li>
    <li><a href="8">光明网</a></li>
    <li><a href="9">央广网</a></li>
    <li><a href="10">求是网</a></li>
    <li><a href="11">中青网</a></li>
    <li><a href="12">网信网</a></li>
   </ul>
  </div>
 </body>
</html>

展示效果 在这里插入图片描述
总结
ul和li的用法比较灵活，可以通过不同的css样式实现不同的效果，设计到的知识点也比较简单，除了简单的背景颜色标签之类的，还有行转块，难点也在于行转块之后的浮动上边，li超过div长度后会自动换行，所以需要我们对div和li的长度大小有所掌握。
其他
ol和li
ol是有序列表，相比与无序列表的差别，无序列表前面的点变成有序的数字，至于用处，当你需要的时候就知道了。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
  </style>
 </head>
 <body>
  <p>
   <ol>
    <li><a href="1">hao123新闻</a></li>
    <li><a href="2">人民网</a></li>
    <li><a href="3">新华网</a></li>
    <li><a href="4">央视网</a></li>
    <li><a href="5">国际在线</a></li>
    <li><a href="6">中国日报</a></li>
    <li><a href="7">中经网</a></li>
    <li><a href="8">光明网</a></li>
    <li><a href="9">央广网</a></li>
    <li><a href="10">求是网</a></li>
    <li><a href="11">中青网</a></li>
    <li><a href="12">网信网</a></li>
   </ol>
  </p>
 </body>
</html>

展示效果
在这里插入图片描述

干啥啥不行能吃第一名

关注

9
点赞
踩
62

收藏

觉得还不错? 一键收藏
0
评论
UI和LI的简单使用

UI和LIul和li是一个组合，是无序列表标签，在实际中用的非常多，比如网址的头部导航栏等等1简单的ui，li的使用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body&gt...
复制链接

扫一扫