Blogger Information
Blog 10
fans 0
comment 0
visits 8520
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
新闻列表跳转-2019年3月11日
JuJo的博客
Original
670 people have browsed it

实例

新闻列表及跳转练习,用到<ul>标签(无序列表)、<a>标签(定义超链接)、<link>标签()及相关属性设置。


<!DOCTYPE html />
<html>
<head>
	<meta charset="utf-8" />
	<title>新闻列表</title>
	<style type="text/css">
		a{
			color:#000;
			text-decoration:none;
			
		}
		.one{
			font-size:18px;
			font-weight:bold;
		}
		li{
			margin:5px 0px;
			width:400px;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
		}
		div{
			
		}
		
	</style>
</head>
<body>
	<div>
		<ul>
			<li><a href="http://m.news.cctv.com/2019/03/11/ARTICOWFHRJdHLRCo8LXc3Ts190311.shtml" class="one" target="blank">***这些重磅提醒要记牢 始终围绕这两个字</a></li>
			<li><a href="https://mp.weixin.qq.com/s/ZYtnN1OxS3L3ytLEaxXj4g">植树节宣传片 | 带着地球去远方</a></li>
			<li><a href="http://news.cctv.com/2019/03/12/ARTIMJDBmV76tluxrhBKiyJ2190312.shtml">全国人大二次会议主席团常务主席第一次会议举行</a></li>
			<li><a href="http://news.cctv.com/2019/03/12/ARTIMJDBmV76tluxrhBKiyJ2190312.shtml">全国政协十三届二次会议举行第四次全体会议 专题</a></li>
			<li><a href="http://www.xinhuanet.com/2019-03/11/c_1210079180.htm">投入更大、地位更高、收入更多—两会传递职业教育新动向</a></li>
		</ul>
	</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


执行结果预览图

新闻列表.png


学习总结:

1、<a>标签的“target:_blank”定义链接在浏览器新标签中打开

2、新闻列表文字过多超出后用省略号代替步骤

    white-space:nowrap;  文本不会换行

    overflow:hidden;  超出部分隐藏

    text-overflow:ellipsis;  超出部分用“...”代替

3、使用<link>标签设置网页的ico

    <link rel="icon" type="image/icon" href="" />


Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post