一个新闻列表的小例子

最新推荐文章于 2022-02-22 12:46:58 发布

Hallin_Me

最新推荐文章于 2022-02-22 12:46:58 发布

阅读量2.4k

点赞数 2

分类专栏： web 文章标签： web 前端 web前端开发

本文链接：https://blog.csdn.net/Hallin_Me/article/details/53488999

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近想系统的学习一下web前端开发，看了很多资料，因为本人不是前端的开发人员，心里不知道玩啥，从哪里开始，觉得无聊，就从模仿开始吧！
来看一个今天我的小例子吧！
我觉得我这个例子有几点重要的:
1.超出标签的内容都以省略号结尾；
2.ul li 全段的style都是自定义的。希望学会用vertical-align:，它是如何跟文字对齐的一个属性。
样式图如下所示:

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				padding: 0px;
				background-color: #f8f8f8;
			}
			.list{
				border-top: 2px solid #2cb82c;
				width: 300px;
				margin:  0 auto;
				background-color: #fff;
				padding-bottom: 40px;
			}
			.list h3::before{
				display: inline-block;
				height: 20px;
				width: 20px;
				content: "";
				background: url(img/icon.png) no-repeat center center/ 100% 100%;
				vertical-align:text-bottom;
			}
			.list h3{
				margin-left: 10px;
			    margin-top: 10px;
			    margin-bottom: 0px;
			}
			.list h3 span{
				margin-left: 5px;
			}
			.list ul{
				padding: 0px;
				margin: 0px;
				padding: 10px;
			}
			.list ul li{
				list-style: none;
				margin-top: 10px;
			}
			.list ul li a em{
				width: 4px;
				height: 4px;
				background-color:#2cb82c ;
				display: inline-block;
				vertical-align: middle;
				margin-right: 5px;
			}
			.list ul li a{
				text-decoration: none;
				font-family: 'Microsoft YaHei';
				font-size: 14px;
				line-height: 18px;
				width: 100%;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: inline-block;
				overflow: hidden;
				color: #000;
			}
			.list ul li a:hover{
				color: #2CB82C;
			}
		</style>
	</head>
	<body>
		<div class="list">
			<h3><span>最新动态</span></h3>
			<ul>
				<li><a href="#"><em></em>鼠标垫，一个最容易被忽略的外设周边</a></li>
				<li><a href="#"><em></em>12306启用“选座功能” 网友盼卧铺选座早日实现</a></li>
				<li><a href="#"><em></em>美国延长对伊朗制裁 伊朗誓言“坚决回应”</a></li>
				<li><a href="#"><em></em>微信PK支付宝：三步让你读懂哪个提现更划算</a></li>
				<li><a href="#"><em></em>丝瓜面筋详细做法和食用功效</a></li>
				<li><a href="#"><em></em>做好微信营销，你必须知道这三点!</a></li>
				<li><a href="#"><em></em>人走楼空 空中巴铁闲置两个月无人问津</a></li>
			</ul>
		</div>
	</body>
</html>

本文由“你正哥来了”学习过程中笔记整理，纯属个人笔记资料，如有错误，请指教，望相互学习(Web---你正哥来了)