css 列表，导航，样式继承，outline轮廓

最新推荐文章于 2019-07-23 15:54:00 发布

sun_smile1

最新推荐文章于 2019-07-23 15:54:00 发布

阅读量263

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sun_smile1/article/details/70475299

本文通过实例详细介绍了如何使用CSS来设置列表样式、创建导航菜单、实现样式继承及添加元素轮廓，适合初学者掌握基本的网页布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.列表

<style>
    /*“*”表示全部  通配符选择器*/
    *{
        padding: 0;
        margin: 0;
    }
    ul{
        /*列表前的样式  none 无风格  实心圆  空心圆等  */
        list-style: none;
        /*列表范围，加边框*/
        border:1px solid red;
        /*列表前的修饰符位置*/
        list-style-position: inside;
    }
    li{
        border: 1px solid yellow;
    }
</style>

<body>
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
    <li>列表6</li>
    <li>列表7</li>
</ul>
</body>

二.导航
<style>
    ul{
        list-style: none;
    }
    li{
        /*浮动  文字悬浮在页面上方*/
        float:left;
        width: 150px;
        color: red;
        font-size: 30px;
        text-align: center;
    }
</style>
<body>
<ul>
    <li>购物车</li>
    <li>帮助中心</li>
    <li>加入收费</li>
    <li>设为首页</li>
    <li>登录</li>
    <li>注册</li>
</ul>
</body>

三.样式继承
<style>
        /*空格  后代选择器 id为container下所有的div */
        #container div{
            color: red;
        }
        /*> 箭头  子代选择器  注：颜色的继承*/
        #container > div{
            color: red;
        }
    </style>

<body>
<div id="container">
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
    <div>div5</div>
    <div>
        <div>孙子元素div</div>
    </div>
</div>
</body>

四.outline轮廓
<style>
        input：focus{
            outline: none;
        }
       
    </style>
    
<body>
<input type="text" placeholder="请输入账号"/>
</body>

div的outline轮廓
<style>
        div{
            width: 200px;
            height: 200px;
            background-color: #FF6500;
            outline: 2px solid yellow;
        }
    </style>
    
<body>
<div>

</div>
</body>