这段代码分为两个页面,一个是基本的新闻列表,实现了列表超过指定长度,后面文字会用...来代替,用到了css的 1:white-space:nowrap; 文本不允许换行 2:overflow:hidden; 超出div部分隐藏 3:text-overflow:ellipsis; 超出部分用...显示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我的新闻列表</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="">
<a href="http://localhost/x/"target="_blank">11111111111111111111111111111</a><br>
<a href="http://localhost/x/"target="_blank">222222222222222222222222222222222222222222222222</a><br>
<a href="http://localhost/x/"target="_blank">333333333333333333333333333333333333333333333333</a><br>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
页面样式如下图所示:
第二个页面是老师上课所练习内容,一个新闻页面,通过h1 p img div abbr b 等标签使用以及嵌套使用,熟练掌握常用的html标签,通过css样式表的学习,高,宽,内外边距,字体及背景颜色等设置,通过class id 等选择器的使用,使页面更丰富.本页面实现了基本的新闻页面的呈现,包含图片,文字,超链接.
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" type="image/x-icon" href="img/favicon (1).ico">
<title>魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
font-family: 宋体;
text-decoration: none;
}
div{
width: 800px;
height: 1000px;
margin: 100px auto;
}
a{
color: #77F9F9;
}
#p1{
color: #D5CCCC;
margin-top: 20px;
}
#p2{
line-height: 90px;
background-color: #F2F2F2;
margin-top: 20px;
text-align: center;
}
img{
width: 800px;
margin-top: 20px;
}
.p{
margin-top: 20px;
text-indent: 2em;
font-size: 15px;
}
#b1{
font-size: 18px;
}
</style>
</head>
<body>
<div>
<h1>魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</h1>
<p id="p1"><abbr title="高梦杨"><a href="http://localhost/x/x"target="_blank">高梦杨</a></abbr>· 2019-3-11 13:55</p>
<p id="p2"><b>摘要：</b> 新一轮融资到手后，魔方将参与到城市人才公寓建设和公租房运营管理与行业规则的制定。</p>
<img src="img/1.jpeg" alt="摘要图片">
<p class="p"><b id="b1">钛媒体快讯 | 3月11日消息：</b>钛媒体获悉，魔方生活服务集团获得由加拿大机构基金管理公司CDPQ投资的1.5亿美元的D轮融资。</p>
<p class="p">公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的9号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
<p class="p">公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的9号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
运行效果如下图:
可以点击坐着高梦杨与任意新闻链接,实现页面的相互跳转
上述代码总结:通过练习,学习了以下知识点
1:HTML超文本标记语言的基本介绍
2:head页面头部各类外部文件的引用
3:body内部页面中常用的文本元素
1:<h1>标题标签 有h1---h6 6种大小，注意权重
2:<p></p>标签 段落标签
3:<b></b>加粗文本
4:<small></small>小号字体
5:<br>定义换行
6:<hr>定义水平线
7:<strong></strong>定义加重语气词 权重高
8:<del></del>定义删除线
9:<abbr></abbr>详细信息 扩展
10:<a href="" target="_blank"></a>
4:css样式表的基础学习,包括内外边距,margin padding(顺序为上右下左) 高宽 width heigth 背景色与字体颜色 background-color color ,还有选择器的使用,以及新知识点超出div部分隐藏并通过...来表示
1:white-space:nowrap; 文本不允许换行
2:overflow:hidden; 超出div部分隐藏
3:text-overflow:ellipsis; 超出部分用...显示
当日笔记
2019-3-11
01:HTML简介：超文本标记语言
<!DOCTYPE HEML>
<!-- 声明 -->
<html>
<head>
<!-- 文档头部 内部的元素可与引用脚本、样式表
、为网页提供元信息 -->
<title></title>
<!-- 定义文档头部标题 -->
<meta charset="utf-8">
<!-- 声明字符集 -->
<meta name="viewport" content="width=device-
width,user-scalable=no,initial-
scale=1.0,maximum-scale=1.0,minimum-
scale=1.0">
<!-- 手机端自适应 不允许用户缩放 -->
<link rel="stylesheet" type="text/css"
herf="style.css">
<!-- 引入外部文件 rel：规定当前文档与被连接文
档之间的关系 type：定义被连接文档的类型 -->
<link rel="icon" type="image/x-icon"
href="xxx.ico">
<!-- 引入头部logo -->
<style type="text/css">
*{margin:0px;padding:0px;}
p{rext indent:2em;}
<!-- 首行缩进 -->
</style>
</head>
<body>
<!-- 页面中常用文本元素 -->
</body>
</html>
1-2:常用文本元素
1:<h1>标题标签 有h1---h6 6种大小，注意权
重
2:<p></p>标签 段落标签
3:<b></b>加粗文本
4:<small></small>小号字体
5:<br>定义换行
6:<hr>定义水平线
7:<strong></strong>定义加重语气词 权重高
8:<del></del>定义删除线
9:<abbr></abbr>详细信息 扩展
10:<a href="" target="_black"></a>
1-3:CSS
1:white-space:nowrap; 文本不允许换行
2:overflow:hidden; 超出div部分隐藏
3:text-overflow:ellipsis; 超出部分用...显示