html小作业--新闻栏目

最新推荐文章于 2024-12-25 23:40:34 发布

1900_

最新推荐文章于 2024-12-25 23:40:34 发布

阅读量4.8k

点赞数 12

分类专栏： # html

本文为博主原创文章，如需转载请联系博主授权。如果对博客文章有建议，可以联系邮箱zpf1900@foxmail.com

本文链接：https://blog.csdn.net/holly_z_p_f/article/details/90900029

版权

html 专栏收录该内容

16 篇文章

订阅专栏

实验目标：（效果图）

实验素材：

用到了两个图片

尖括号是图片

more是图片

代码

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>学院栏目</title>
    <link href="test.css" type="text/css" rel="stylesheet">
</head>
<body>

<div class="column">
    <div class="tt">
        <h3>学院新闻</h3>
        <a href="" class="img"></a>
    </div>
    <div class="main">
        <ul>
            <li><a href="#">学院新闻学院新闻学院新闻学院新闻...</a><span>05-10</span></li>
            <li><a href="#">学院新闻学院新闻学院新闻学院新闻...</a><span>05-10</span></li>
            <li><a href="#">学院新闻学院新闻学院新闻学院新闻...</a><span>05-10</span></li>
        </ul>
    </div>
</div>

</body>
</html>

css


/*清除样式*/
body,div,ul,li,h3,a{
    padding: 0;
    margin: 0;
}
ul{list-style: none;}

.column{
    width: 328px;
    margin-right: 10px;
    border: 1px solid #ccc;
}
.column .img{
    float: right;
    width: 100px;
    height: 35px;
    background: url("images/column/icon_more_1.gif") no-repeat right;
    margin-right: 10px;
}
.tt{
    height: 35px;
    border-bottom: 1px solid #ccc;
}
.tt h3{
    float: left;
    height: 35px;
    line-height: 35px;
    text-indent: 0.5em;
    font-family: "微软雅黑";
    width: 150px;
    border-bottom: 1px solid #56a3df;
}
.main{
    font-size: 14px;
    margin: 0px 5px 0px 5px;
}
.column ul li {
    margin: 10px 10px 10px 0px;
    text-indent: 1em; /*缩进*/
    background: url("images/column/arrow.png") no-repeat left;
}
.column ul li span {
    float: right;
}
.column ul li a:hover{
    text-decoration: underline;
    color: red;
}
.column li a:link,a:visited{
    text-decoration: none;
    color: black;
}