NEC学习 ---- 模块 -简易文字链接列表

为了方便查看, 在最外面设置了一个粉色框.

html代码:

<div class="container">

    <ul class="m-list">

        <li><a href="#">列表项文字和链接</a></li>

        <li><a href="#">列表项文字和链接</a></li>

        <li><a href="#">列表项文字和链接</a></li>

        <li><a href="#">列表项文字和链接</a></li>

    </ul>

</div>

CSS代码:

<style>

    .container{

        width:400px;

        height:auto;

        margin:45px auto;

        padding:5px;

        background-color:pink;

    }

    .m-list li{

        line-height:21px;

        margin-bottom:2px;

        font-size:12px;

        color:#777;

    }

    .m-list li a:hover{

        text-decoration:underline;

    }

</style>

这里主要是写一个类 .m-list 方便相同场景下的直接调用.