网页新闻列表ul

usrname为username

已于 2022-08-03 04:04:30 修改

阅读量289

点赞数

分类专栏：前端文章标签： html 前端 servlet

于 2022-08-03 04:03:11 首次发布

本文链接：https://blog.csdn.net/weixin_54327001/article/details/126132927

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

学习视频链接：网页新闻列表url

最终效果：

源代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
.mylist{
    /* background-color: orange; */
    width: 400px;
    list-style: none;
    /* 去掉li前面的点 */
    padding: 0;
    /* 去掉前面的间隙 */
}
.mytitle{
width: 400px;
height: 40px;
border-bottom: 2px solid red;
line-height: 40px;
font-size: 14pt;
font-weight: bold;
}
.main{
    width: 400px;
    margin: auto;
}
a{
    text-decoration: none;
    /* 去掉超链接的下划线 */
    color: black;
}
a:hover{
    color: red;
}
.mylist li{
    height: 30px;
    提高每一项的高度
}
.mylist span{
    font-weight: bold;
}
    </style>
</head>
<body>
    <div class="main">
        <div class="mytitle">
            今日话题
        </div>
        <ul class="mylist">
            <li><span>报社1</span><a href="#">新闻1</a></li>
            <li><span>报社2</span><a href="#">新闻2</a></li>
            <li><span>报社3</span><a href="#">新闻3</a></li>
            <li><span>报社4</span><a href="#">新闻4</a></li>
            <li><span>报社5</span><a href="#">新闻5</a></li>
            <li><span>报社6</span><a href="#">新闻6</a></li>
            <li><span>报社7</span><a href="#">新闻7</a></li>

        </ul>
    </div>
</body>
</html>