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 方便相同场景下的直接调用.