简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 新闻列表页跳转
Blogger Information
Blog 17
fans 1
comment 1
visits 16377
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
新闻列表页跳转
雷国恩的博客
Original
1093 people have browsed it

总结：

       1.学会使用h2作标题

       2.学会隐藏超出行的文本，以及将超出的文本变成省略号

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新闻列表</title>
	<style type="text/css">
	*{margin:0px;padding:0px;}
	body{background:#f3f5f7;}
	div{background:#ffffff;margin:300px auto;width:500px;height:298px;border:2px solid #f5f5f5;}
	h2{padding-left:10px;margin-bottom:10px;color:#5184eb;border-bottom:2px solid #5184eb;}
	ul {width:500px; height:500px; list-style: none;}
	ul li{line-height: 40px;padding-left:10px;white-space:nowrap;overflow: hidden;text-overflow:ellipsis;}
	ul a{color:#000000;text-decoration: none;font-size:20px;}
	ul li:hover{background:#ccc;}
	</style>
	
</head>
<body>
	<div>
		<h2>今日要闻</h2>
		<ul>
			<li><a href="http://www.php.cn/toutiao-412576.html">php中文网vip特权会员学习指南</a></li>
			<li><a href="http://www.php.cn/toutiao-409221.html">php中文网原创视频：《天龙八部》公益php培训系列课程汇总！</a></li>
			<li><a href="http://www.php.cn/toutiao-409169.html">php中文网《玉女心经》公益***系列课程汇总</a></li>
			<li><a href="http://www.php.cn/toutiao-415921.html">最新上线的10个精美网站素材分享【免费下载】</a></li>
			<li><a href="http://www.php.cn/toutiao-415877.html">2019为什么我们还会继续使用 PHP？</a></li>
		</ul>
	</div>
</body>
</html>

运行实例 »

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

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
1 comments
灭绝师太 2019-03-12 19:18:39
布局标签建议用小写字母的哦,不要大小写混杂.有自己拓展学习,继续保持!
1 floor
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！