html/css基础知识（基本标签的使用）及新闻页面布局-php第五期培训-03.11作业 - web前端

首页 > 博客列表 > html/css基础知识（基本标签的使用）及新闻页面布局-php第五期培训-03.11作业

博主信息

博文 4

粉丝 0

访问量 2742

专题推荐

更多>

实例

<!DOCTYPE html>
<html>
<head>
	<title>学习前端第一课时</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css"><!-- 引入外部文件 -->
	<link rel="icon" type="image/x-icon" href="favicon.ico"><!-- 引入头部标题logo -->
    <style type="text/css">
    	*{margin: 0px;padding: 0px;}/*内部样式*/
    	div{
    		margin:0 auto;/*居中*/
    		width:800px;
    		height: 200px;
    	}
    	abbr{text-decoration: none;/*祛除字体下横线*/color:#00A4A0;}
    	p{
    		font-size:14px;/*字体大小*/
    		
    	}
    	img{
    		margin: 40px 0;/*外边距*/
    	}
    	h1{
    		font-family:宋体;/*改变字体*/
    	}
    	.content{
    		margin-bottom: 20px;/*下边距*/
    		font-size: 18px;
    	}

    </style>
</head>
<body>
    <div>
    	<h1>小牛电动2018年度财报：销量高速增长，押注锂电化趋势 </h1>
    	<!-- 内联样式 -->
    	<p style="color:#ccc;line-height: 70px;"><abbr title="钛极客">钛极客</abbr>   03-20  13:45</p>
    	<p style="text-align: center;background-color:#F6F6F6; line-height: 70px;"><b>摘要</b>： 作为国内智能出行领域率先杀出来的创业公司，小牛电动在纳斯达克完成IPO后，它的业绩和股价也一直备受关注。</p>
    	<img src="https://images.tmtpost.com/uploads/watermark/1400/ddab387ba2cc435486b0928675cb10e835eb809a_1400_883.jpg?imageMogr2/strip/interlace/1/quality/85&ext=.jpg" width="800" alt="这是一张图片">
    	<p class="content">2018年10月19日，作为国内智能出行领域率先杀出来的创业公司，小牛电动仅仅成立4年多时间就在美股纳斯达克完成了IPO，它的业绩和股价也一直备受关注。
        </p>
        <p class="content">钛媒体3月18日消息，小牛电动发布了截至2018年12月31日的第四季度和全年未经审计的财务报告，这也是自IPO以来首次公布全年的财务和营收状况。</p>
        <h2 style="margin-bottom: 20px;">全年营收创新高，四季度表现良好</h2>
        <p class="content">数据显示，小牛电动全年收入14.78亿元，包含四季度净收入4.28亿元，同比2017年增长超过90%，其中地四季度小牛电动净收入较2017年同期增长95%。</p>
    </div>
</body>
</html>

运行实例 »

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

2.网页超链接的使用，在<a href=""></a>，添加target="_blank";打开一个新的网页进行跳转链接。

实例

 <a href="http://www.php.cn/" target="_blank"> php中文网</a>

运行实例 »

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

3.用省略号代替超链接超长文本。

实例

div｛
     	/*white-space 规定如何处理元素内的空白*/
     	white-space:nowrap; /*文本不会换行 */
     	/*overflow 属性规定当内容溢出元素框时发生的事情*/
     	overflow: hidden; /*超出部分隐藏*/
        /*text-overflow (css3)属性规定当文本溢出包含元素时发生的事情*/
     	text-overflow:ellipsis;/* 用省略符号来代表被修剪的文本*/
     }

运行实例 »

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

总结：课后熟悉常用标签的作用，多多练习！

批改状态：合格

老师批语：