> 웹 프론트엔드 > CSS 튜토리얼 > CSS 제어 목록

CSS 제어 목록

无忌哥哥
풀어 주다: 2018-06-28 17:41:34
원래의
1770명이 탐색했습니다.

속성 설명

list 스타일 약어 속성입니다. 하나의 선언으로 목록의 모든 속성을 설정하는 데 사용됩니다.

list-style-image 이미지를 목록 항목 플래그로 설정합니다.

list-style-position은 목록에서 목록 항목 표시의 위치를 ​​설정합니다.

list-style-type 목록 항목 플래그의 유형을 설정합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3.CSS控制列表</title>
    <style>
        .list {
            width: 350px;
            height:500px;
            /*background-color: lightskyblue;*/
            border: 1px solid #696969;
            border-radius: 2%;
            color: #363636;
            background-color: #fefefe;
        }
        .list h2 {
            padding-left: 20px;
        }
        .item {
 list-style-type:decimal;
list-style-position: inside;
    padding: 10px;
        }
        .item li {
            /*background-color: lightgreen;*/
        }
        .item li a {
            text-decoration: none;
        }
        .item li a:hover {
            text-decoration: underline;
            color:#6CF;
            font-size: 1.05em;
        }
    </style>
</head>
<body>
<div class="list">
    <h2>头条公告</h2>
    <ul class="item">
        <li><a href="">物理学家史蒂芬·霍金去世,享年76岁</a></li>
        <li><a href="">物理学家史蒂芬·霍金去世,享年76岁</a></li>
        <li><a href="">物理学家史蒂芬·霍金去世,享年76岁</a></li>
        <li><a href="">物理学家史蒂芬·霍金去世,享年76岁</a></li>
        <li><a href="">物理学家史蒂芬·霍金去世,享年76岁</a></li>
        <li><a href="">物理学家史蒂芬·霍金去世,享年76岁</a></li>
        <li><a href="">物理学家史蒂芬·霍金去世,享年76岁</a></li>
        <li><a href="">物理学家史蒂芬·霍金去世,享年76岁</a></li>
        <li><a href="">物理学家史蒂芬·霍金去世,享年76岁</a></li>
    </ul>
</div>
</body>
</html>
로그인 후 복사

위 내용은 CSS 제어 목록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿