博客列表 >新闻列表布局实例-2019年3月11日-2

新闻列表布局实例-2019年3月11日-2

君的博客
君的博客原创
2019年03月16日 23:38:41865浏览

总结

用第一课所学的知识,做了一个新闻列表的实例,其中使用了H1标签,段落标签,abbr标签,超链接标签a等。还使用了一些css样式属性,制作了一个新闻列表

实例

<!-- 作业2 -->

<!DOCTYPE html>
<html>
<head>
	<title>魔方公寓获得1.5亿美元D轮融资</title><!-- 文档标题 -->
	<meta charset="utf-8">
	<!-- 标题左边的logo图标-->
	<link rel="icon" type="image/x-icon" href="favicon (1).ico">
	<!-- 内部样式表 -->
	<style type="text/css">
		*{margin:0;padding: 0; }/* 清除浏览器自带的内外边距*/
	     div{
	     	margin:100px auto;/* margin的上下为0,左右用自动式,会居中*/
	     	width:700px; 
	        height: 200px; 
	     }
	     abbr{
	     	text-decoration: none;/*去掉下划线*/
	     	color:#52F7F2;
	     }
	     p{
	     	 /*行高*/
	     	font-size:14px;
	     }
	     img{
	     	margin:40px 0;
	     }
	     h1{
	     	font-family:宋体; /*改变字体*/
	     }
	     .box{line-height: 30px; margin-bottom: 20px;}
	</style>

</head>

<body>
  <div>
  	 <h1 >魔方公寓获得1.5亿美元D轮融资,未来将运营人才公寓和公租房 | 钛快讯</h1>
   	 <p style="color: #ccc; line-height: 70px;"><abbr title="高梦杨">高梦杨</abbr>  .   2019-3-11    13:55</p>
  	<!--  文字居中 背景色 -->
  	 <p style="text-align: center; background:#f2f2f2; line-height: 70px;"> <b>摘要:</b> 新一轮融资到手后,魔方将参与到城市人才公寓建设和公租房运营管理与行业规则的制定。</p>

  	 <img src="1.jpeg" width="700" alt="这是一张图片">
  	 <p class="box"> <b style="font-size: 18px;">钛媒体快讯 | 3月11日消息:</b>钛媒体获悉,魔方生活服务集团获得由加拿大机构基金管理公司CDPQ投资的1.5亿美元的D轮融资。</p>
  	 <p class="box">公开资料显示,魔方生活服务集团是国内的集中式长租公寓的代表,也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息,目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓,面向企业蓝领的9号楼公寓,立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
  	  <p class="box">公开资料显示,魔方生活服务集团是国内的集中式长租公寓的代表,也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息,目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓,面向企业蓝领的9号楼公寓,立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
  </div>
</body>
</html>

运行实例 »

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

zy3-11-2.JPG


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议