15900627980

新闻列表制作源码

发布于:11-19
利用下面素材图,制作出如效果图所示的新闻列表。



素材图

新闻列表制作源码


效果图



参考答案:

<body>

<section>

    <h3>新闻列表</h3>

    <ul class="news">    

      <li><a href="#">韩国顺天乡大学来访</a></li>

      <li><a href="#">我校荣获重庆大学、华东师范大学网络开放教育优秀学习中心称号</a></li>

      <li><a href="#">准确定位 职通未来——我校开展2019届毕业生就业指导系列讲座

      </a></li>

      <li><a href="#">我校赴江苏常州调研就业市场</a></li>

      <li><a href="#">艺术传媒学院学子在2018年安徽省大学生原创动漫大赛中喜获佳绩

      </a></li>

    </ul>

</section>

</body>

css规则代码为:


* {

margin: 0px;

padding: 0px;

}

body{

font-size: 14px;

font-family: Arial, Helvetica, sans-serif,"微软雅黑";

}

section {

width: 20em;

margin-top: 30px;

margin-left: 30px;

}

.news li {

list-style-type: none;

background-image: url(img/0.jpg);

background-repeat: no-repeat;

background-position: left center;

padding-left: 15px;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

width:18em;

}

section h3 {

border-bottom-width: 2px;

border-bottom-style: solid;

border-bottom-color: #666;

padding-bottom: 10px;

margin-bottom: 10px;

padding-left: 10px;

}

.news li a {

color: #2d2d2d;

text-decoration: none;

line-height: 28px;

}

.news li a:hover{

color: #CE0000;

text-decoration: underline;

}





注:

text-overflow: ellipsis的这段实现省略号:

强制内容在一行显示(white-space:nowrap;),并且多余的内容隐藏(overflow:hidden;);然后才能实现省略号的效果(text-overflow: ellipsis)。

也就是说我们想要实现省略号效果,必须同时设置这三个样式才行。

新闻列表制作 源码

上一篇:认识HTML、元素、属性及注释的概念

下一篇:返回列表

相关内容 观察行业视觉,用专业的角度,讲出你们的心声。
Back

I NEED TO BUILD WEBSITE

我需要建站

*请认真填写需求信息,我们会在24小时内与您取得联系。

十见(上海)网络科技有限公司 Copyright© 2014-2020 沪ICP备20008988号-2