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

来源：互联网发布：德州扑克数据分析软件编辑：程序博客网时间：2024/06/06 00:56

一.列表

<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>

0 0