2020-11-26

最新推荐文章于 2020-12-26 19:38:18 发布

量子次元

最新推荐文章于 2020-12-26 19:38:18 发布

阅读量59

点赞数

分类专栏：列表和浮动

本文链接：https://blog.csdn.net/fengchang11111/article/details/110206664

版权

列表和浮动专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学到了，list-style和浮动。

<head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           ul{
               /*list-style-type: decimal;
               list-style-image: url(img/17.png);
               list-style-position: outside;*/
               list-style: none;
           }
           li{
               height: 50px;
               line-height: 50px;
               border-bottom: 1px solid #e1e3e5;
               font: 20px/50px Arial,"microsoft yahei";
           }
           #last-li{
               /*id="last-li"选择器，要用"#",即#last-li{}*/
               list-style: none;
           }
           a{
               color: rgb(51,51,51);
               text-decoration: none;
           }
           #frist-a{
               color: #4c92fc;
           }
       </style>

   </head>
   <body>
       <ul>
           <li><a id="frist-a" href="http://www.baidu.com">英语</a></li>
           <li><a href="http://www.baidu.com">语文</a></li>
           <li><a href="http://www.baidu.com">数学</a></li>
           <li><a href="http://www.baidu.com">历史</a></li>
           <li><a href="http://www.baidu.com">物理</a></li>
           <li id="last-li"><a href="http://www.baidu.com">化学</a></li>

       </ul>
   </body>

list-style-type: decimal;
list-style-image: url(img/17.png);
list-style-position: outside

list-style-type: decimal表示有效序列，就是1,2,3，，，等顺序；

list-style-image: url(img/17.png);每个开头的图标；

list-style-position: outside表格外面。

list-style: none;

这个表示直接全部归零，就是没有效果。

<head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           span{
               border: 3px solid aquamarine;
           }
           .s{
               float: left;
           }
           #d:after{
               content: "";
               display: block;
               clear: left;
           }
       </style>
   </head>
   <body>
       <span>A</span>
       <span>A</span><br />
       <span>A</span>
       <div id="d" style="border:3px solid aqua;">
           <span class="s">河南</span>
           <span class="s">郑州</span>
           <span class="s">工业大学</span>
       </div>
   </body>

下面是浮动知识，这里用选择器标记：
float: left;
飘动：向左。

#d:after{
               content: "";
               display: block;
               clear: left;
           }

<div id="d" style="border:3px solid aqua;">
           <span class="s">河南</span>
           <span class="s">郑州</span>
           <span class="s">工业大学</span>
       </div>

整个<div></div>,content:"".后面全为空合格。display:block.变成块级元素。