码迷,mamicode.com
首页 > Web开发 > 详细

css列表属性与display属性

时间:2019-06-19 00:33:10      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:不显示   河北省   html   显示   image   list   line   aci   code   

list-style:none

内联标签不能设宽高

display:"inline-block" 有内联标签不独占一行的属性和块级标签可设宽高的属性

display:none 不显示,位置也没了  display是显示、展示的意思

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ol,ul{
            list-style: none;
        }
    </style>
</head>
<body>


<ol>
    <li>111</li>
    <li>122</li>
    <li>134</li>
</ol>

<ul>
    <li>111</li>
    <li>122</li>
    <li>134</li>
</ul>

<dl>
    <dt>河北省</dt>
    <dd>廊坊</dd>
    <dd>保定</dd>
    <dd>石家庄</dd>
</dl>
</body>
</html>
列表属性
技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div2,p,a,span{
             width: 100px;
             height: 100px;
        }

         .div2{
             background-color: yellow;
             /*display: inline;*/
             display: none;
         }

        p{
             background-color: red;
            /*display: inline;*/
         }

        span{
             background-color: palevioletred;
             display: inline-block;
         }
        a{
             background-color: green;
             display: inline-block;
         }
        .outer{
            word-spacing: -8px;
        }
    </style>
</head>
<body>


<div class="div2">divvvvv</div>
<p>pppppp</p>


<div class="outer">
    <span>spannnnnn</span>
    <a href="#">click</a>
</div>


</body>
</html>
display属性

技术图片技术图片技术图片

css列表属性与display属性

标签:不显示   河北省   html   显示   image   list   line   aci   code   

原文地址:https://www.cnblogs.com/jintian/p/11048716.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!