Ads Top

How to create custom list in html?


HTML lists code: HTML lists represent bulleting or numbering who can show in a managed way. If you want to create any list as a color list -  then we will write red, green, blue, etc. 

Then it would not be shown in good if we will use in bullet or number then it will show looking good as given below example: Also I am giving a lot of list style. 


Also, you can find more example ul, li, ol, dl:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Listing</title>
    <style>
        body {
            font-familyArialHelveticasans-serif;
            margin0;
            padding0;
        }

        .anythinglisting1 {
            padding15px 30px;
        }

        .anythinglisting1 ul {
            list-stylenone;
            margin0;
            padding0;
        }

        .anythinglisting1 ul li {
            positionrelative;
            font-size16px;
            padding5px 0 5px 20px;
        }

        .anythinglisting1 ul li::before {
            positionabsolute;
            width9px;
            height9px;
            background#0bf;
            left0;
            top8px;
            content'';
            border-radius50%;
        }

        /* listing2  */
        .anythinglisting2 {
            padding15px 30px;
        }

        .anythinglisting2 ul {
            list-stylenone;
            margin0;
            padding0;
        }

        .anythinglisting2 ul li {
            positionrelative;
            font-size16px;
            padding5px 0 5px 20px;
        }

        .anythinglisting2 ul li::before {
            positionabsolute;
            width9px;
            height9px;
            background#0b6;
            left0;
            top8px;
            content'';
        }

        /* listing3  */
        .anythinglisting3 {
            padding15px 30px;
        }

        .anythinglisting3 ul {
            list-stylenone;
            margin0;
            padding0;
        }

        .anythinglisting3 ul li {
            positionrelative;
            font-size16px;
            padding5px 0 5px 20px;
        }

        .anythinglisting3 ul li::before {
            positionabsolute;
            width9px;
            height9px;
            left0;
            top8px;
            content'';
            border-right2px solid #0bf;
            border-top2px solid #0bf;
            transform: rotate(45deg);
        }

        .anythinglisting4 {
            padding15px 30px;
        }

        .anythinglisting4 ul {
            list-stylenone;
            margin0;
            padding0;
            counter-reset: number;
            positionrelative;
        }

        .anythinglisting4 ul::before {
            border-left4px solid #0bf;
            content'';
            positionabsolute;
            top0;
            left17px;
            height100%;
            z-index0;
        }

        .anythinglisting4 ul li {
            positionrelative;
            font-size16px;
            color#000;
            padding15px 0 15px 50px;
        }

        .anythinglisting4 ul li::before {
            positionabsolute;
            width36px;
            height36px;
            background#0bf;
            left0;
            text-aligncenter;
            top8px;
            content'';
            border-radius50%;
            counter-increment: number;
            color#fff;
            content: counter(number);
            font-size22px;
            line-height38px;
        }

        /* listing5  */
        .anythinglisting5 {
            padding15px 30px;
        }

        .anythinglisting5 ul {
            list-stylenone;
            margin0;
            padding0;
        }

        .anythinglisting5 ul li {
            positionrelative;
            font-size16px;
            padding5px 0 5px 20px;
        }

        .anythinglisting5 ul li::before {
            positionabsolute;
            width9px;
            height9px;
            left0;
            top8px;
            content'';
            border-right2px solid #0bf;
            border-top2px solid #0bf;
            transform: rotate(45deg);
        }

        .anythinglisting5 ul li a {
            color#000;
            text-decorationnone;
            transitionall 0.5s;
        }

        .anythinglisting5 ul li a:hover {
            color#0b6;
            font-weight700;
            transitionall 0.5s;
        }

        /* listingNormal  */
        .anythinglistingNormal {
            padding15px 30px;
        }

        .anythinglistingNormal ul {
            margin0;
            padding0;
        }

        .anythinglistingNormal ul li {
            font-size16px;
        }

        /* listingNormalOL  */
        .anythinglistingNormalOL {
            padding15px;
        }

        .anythinglistingNormal ol {
            margin0;
            padding0;
        }

        .anythinglistingNormal ol li {
            font-size16px;
        }

        /* listingDldt  */
        .anythinglistinglddt {
            padding15px 30px;
        }

        .anythinglistinglddt dt {
            font-weight700;
            margin-top10px;
            margin-bottom10px;
        }

        /* listing image  */
        .anythinglistingImage {
            padding15px 30px;
        }

        .anythinglistingImage ul {
            list-stylenone;
            margin0;
            padding0;
        }

        .anythinglistingImage ul li {
            list-style: url('rose.png');
            font-size16px;
            padding5px 0 5px 0px;
            margin-left30px;
        }

        /* listing image with background  */
        .anythinglistingImageBackground {
            padding15px 30px;
        }

        .anythinglistingImageBackground ul {
            list-stylenone;
            margin0;
            padding0;
        }

        .anythinglistingImageBackground ul li {
            background: url(rose.png) no-repeat 0 0;
            font-size16px;
            padding15px 0 15px 50px;
        }
/* listing image with tick  */

         .anythinglistingTick {
            padding0px 0 20px;
        }

.anythinglistingTick ul {
    list-stylenone;
    margin0;
    padding0;
}

.anythinglistingTick ul li {
    positionrelative;
    width300px;
}
.anythinglistingTick ul li a {
    display:block;
    font-size14px;
    padding7px 25px 7px 48px;
    color:#333;
    transition:all 0.5s;
    text-decorationnone;
}
.anythinglistingTick ul li a:hover {
    background:#0bf;
    color:#fff;
    transition:all 0.5s;
}
.anythinglistingTick ul li::before {
            positionabsolute;
    width11px;
    height5px;
    left25px;
    top12px;
    content'';
    border-left2px solid #333;
    border-bottom2px solid #333;
    transform: rotate(-45deg);
  }
 .anythinglistingTick ul li:hover::before {
    border-left2px solid #fff;
    border-bottom2px solid #fff;
  }
    </style>
</head>

<body>
    <div class="anythinglisting1">
        <ul>
            <li>Angular</li>
            <li>Javascript</li>
            <li>React js</li>
            <li>SASS</li>
            <li>AMP</li>
        </ul>
    </div>
    <div class="anythinglisting2">
        <ul>
            <li>Angular</li>
            <li>Javascript</li>
            <li>React js</li>
            <li>SASS</li>
            <li>AMP</li>
        </ul>
    </div>
    <div class="anythinglisting3">
        <ul>
            <li>Angular</li>
            <li>Javascript</li>
            <li>React js</li>
            <li>SASS</li>
            <li>AMP</li>
        </ul>
    </div>
    <div class="anythinglisting4">
        <ul>
            <li>Angular</li>
            <li>Javascript</li>
            <li>React js</li>
            <li>SASS</li>
            <li>AMP</li>
        </ul>
    </div>
    <div class="anythinglisting5">
        <ul>
            <li><a href="#">Angular</a></li>
            <li><a href="#">Javascript</a></li>
            <li><a href="#">React js</a></li>
            <li><a href="#">SASS</a></li>
            <li><a href="#">AMP</a></li>
        </ul>
    </div>
    <div class="anythinglistingNormal">
        <ul>
            <li>Angular</li>
            <li>Javascript</li>
            <li>React js</li>
            <li>SASS</li>
            <li>AMP</li>
        </ul>
    </div>
    <ul style="list-style-type:circle;">
        <li>Angular</li>
        <li>Javascript</li>
        <li>React js</li>
    </ul>
    <ul style="list-style-type:square;">
        <li>Angular</li>
        <li>Javascript</li>
        <li>React js</li>
    </ul>
    <ul style="list-style:none;">
        <li>Angular</li>
        <li>Javascript</li>
        <li>React js</li>
    </ul>
    <div class="anythinglistingNormalOL">
        <ol>
            <li>Angular</li>
            <li>Javascript</li>
            <li>React js</li>
            <li>SASS</li>
            <li>AMP</li>
        </ol>
    </div>
    <ol type="1">
        <li>Angular</li>
        <li>Javascript</li>
        <li>React js</li>
    </ol>
    <ol start="50">
        <li>Angular</li>
        <li>Javascript</li>
        <li>React js</li>
    </ol>
    <ol type="A">
        <li>Angular</li>
        <li>Javascript</li>
        <li>React js</li>
    </ol>
    <ol type="A" start="7">
        <li>Angular</li>
        <li>Javascript</li>
        <li>React js</li>
    </ol>
    <ol type="a">
        <li>Angular</li>
        <li>Javascript</li>
        <li>React js</li>
    </ol>
    <ol type="i">
        <li>Angular</li>
        <li>Javascript</li>
        <li>React js</li>
    </ol>
    <ol type="I">
        <li>Angular</li>
        <li>Javascript</li>
        <li>React js</li>
    </ol>
    <div class="anythinglistinglddt">
        <dl>
            <dt>Javascript</dt>
            <dd>- Angular js</dd>
            <dd>- React js</dd>
            <dd>- jquery</dd>
            <dt>HTML</dt>
            <dd>- html is the web structure</dd>
        </dl>
    </div>
    <div class="anythinglistingImage">
        <ul>
            <li>Angular</li>
            <li>Javascript</li>
            <li>React js</li>
        </ul>
    </div>
    <div class="anythinglistingImageBackground">
        <ul>
            <li>Angular</li>
            <li>Javascript</li>
            <li>React js</li>
        </ul>
    </div>
<div class="anythinglistingTick">
        <ul>
            <li><a href="#">Angular</a></li>
            <li><a href="#">Javascript</a></li>
            <li><a href="#">React js</a></li>
            <li><a href="#">SASS</a></li>
            <li><a href="#">AMP</a></li>
        </ul>
    </div>
</body>

</html>

No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.