学习内容:
实例
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>文本控制与css基本样式</title>
<style type="text/css">
#animotiondiv{
overflow: hidden;/*设置超出隐藏*/
width: 200px;
height: 25px;
text-align: center;
}
#animotiondiv:hover {
height: 150px;
background-color: rgba(3,3,3,0.3);
overflow: visible;
}
</style>
</head>
<body>
<b>css实现查看全文</b>
<div id="animotiondiv">
<strong>陶渊明 饮酒</strong><br/>
结庐在人境，而无车马喧。<br/>
问君何能尔？心远地自偏。<br/>
采菊东篱下，悠然见南山。<br/>
山气日夕佳，飞鸟相与还。<br/>
此中有真意，欲辨已忘言。
</div>
<hr/>
默认文本<br/>
<h1>标题标签H1</h1>
<h2>标题标签H2</h2>
<h3>标题标签H3</h3>
<h4>标题标签H4</h4>
<h5>标题标签H5</h5>
<h6>标题标签H6</h6>
<p>段落标签P</p>
<pre>预格式文本
pre
</pre>
<b>粗体标签B(无语义)</b>
<strong>粗体标签strong</strong>
<i>斜体标签(无语义)</i>
<em>斜体标签</em>
<del>删除标签del</del>
<ins>插入标签ins</ins>
<hr/>
<b>CSS样式</b>
<dl>
<dt>1:块元素转到行内样式 <i>style:"display:inline;"</i></dt>
<dd>
<h1 style="display: inline;">这是H1标签转行内</h1>
</dd>
<dt>2:块元素转到行内块样式 <i>style:"display:inline-block;"</dt>
<dd><h1 style="display: inline-bolck;">这是H1标签转行内块</h1></dd>
<dt>3:行内元素转到块样式 <i>style:"display:block;"</dt>
<dd><span style="display: block;'">这是span标签转块元素</span></dd>
</dl>
<hr/>
<b>CSS控制字体样式</b>
<p style="font-weight: bolder;">这是一行文本通过CSS加粗</p>
<p style="font-size: 1.1em">这是一行文本通过css放大字体</p> <!-- 可以设置PX 也可以设置em 1em=16px -->
<p style="font-family:汉仪智草繁">这是一行文本通过CSS设置字体类型</p> <!-- C:\Windows\Fonts 必须是字体库中有的 -->
<div style="background-color: skyblue;width: 150px;height: 150px;display: inline-block;text-align: left;">默认左对齐</div>
<div style="background-color: skyblue;width: 150px;height: 150px;display: inline-block;text-align: center;">居中</div>
<div style="background-color: skyblue;width: 150px;height: 150px;display: inline-block;text-align: right;">右对齐</div>
<div style="display: inline-block;width: 150px;height: 150px;">
<div style="background-color: skyblue;line-height: 150px;">垂直居中</div>
</div>
<hr/>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
图片作业
实例
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>习大大心系防汛抢险救灾</title>
<style type="text/css">
img{
margin:25px; auto;
}
.texttype{
text-align: left;
}
</style>
</head>
<body>
<h1 style="text-align: center;">习大大心系防汛抢险救灾</h1>
<div style="width: 650px; height: 100%;margin:auto;text-align: center;">
<div><i style="margin-right:0;color: #ACA8AB;font-size: 0.6em;display: block;">2018年8月14日 14:20 来源:搜狐娱乐
<span style="color: #000;width: 100%;margin-left: 400px;">习大大</span>
</i>
<img src="http://p1.img.cctvpic.com/photoworkspace/contentimg/2018/08/14/2018081410530455003.jpg" alt="习大大心系防汛抢险救灾"/>
<div>习大大心系防汛抢险救灾(图)</div>
<div class="texttype">
2018年4月25日，习大大考察被誉为洞庭湖及长江流域水情“晴雨表”的城陵矶水文站。图片来源：新华社<br/>
<b>央视网消息：</b>7月以来，我国多地出现大到暴雨，长江、黄河以及多条河流水位超过警戒线，引发洪涝灾害。<br/>
汛情第一时间引起习大大总书记高度重视。灾难面前，“<b>全力保障人民群众生命财产安全和社会稳定</b>”是习大大心中的头等大事。<br/>
7月中旬，习大大对防汛抢险救灾工作作出重要指示：“<b>相关地区党委和政府要牢固树立以人民为中心的思想，全力组织开展抢险救灾工作，最大限度减少人员伤亡，妥善安排好受灾群众生活，最大程度降低灾害损失。</b>”<br/>
这个重要指示也正是今年各地区、部门和单位切实做好防汛抢险救灾工作的指导思想。
</div>
<div style="text-align: right;color: #ACA8AB;font-size: 0.6em;">编辑：李丹 责任编辑：王敬东</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
