8月13日的作业代码：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>培训第二课</title>
<style type="text/css">
/*
块级元素：独占一行，对宽和高设置生效，若不设置宽为浏览器宽度。（div h1-h6 p ）
行内元素：可以共存于一行，对宽和高设置不生效，宽和高受容器内内容影响。
行内块元素：有块级和行内的共同特点。 img
display:inline 讲块级元素转换为行内元素
display:inline-block; 转化为行内块元素
display:block 行内转化为块级 */
.d1{width:100px;height:100px;background:pink;
.span_txt{
font-weight:bold;/* 定义粗体 */
font-size:30px;/* 定义字体大小 */
font-family: "楷体" /* 定义字体 */
}
h1{
text-align: center;/* 居中效果 lef right*/
height: 100px;
line-height: 100px; /* 设置行高，可以垂直居中 */
}
.google{font-size:80px;font-family:georgia;}
.g1{color:#0388F1}
.g2{color:#D7462B}
.g3{color:rgb(255,177,52)}
.g4{color:#0388F1}
.g5{color:#009856}
.g6{color:#D44233}
img{width:200px;}
.box1{width:200px;height:210px;background:lightgrey;overflow:hidden;}
.box1:hover{overflow:visible;}
/*overflow:visible(超出的呈现);
hidden（隐藏）;
scroll（超出以gun动条）;
auto（如果超出就有gun动条）; */
</style>
</head>
<body>
<em>你好php</em><br>
<del>788</del> <!--字的中间有一横，打折商品会用-->
<pre>空 格</pre>
<div class="d1" style="display:inline;">1</div>
<div class="d1" style="display:inline-block;">2</div>
<span class="d1" style="display: block;">3</span>
<span class="d1" style="display: inline-block;">4</span>
<span class="span_txt">php中文网</span><br>
<h1>php中文网</h1>
<!--谷歌logo-->
<span class="google g1">G</span>
<span class="google g2">o</span>
<span class="google g3">o</span>
<span class="google g4">g</span>
<span class="google g5">l</span>
<span class="google g6">e</span>
<!--图文混排-->
<br>
<p style="display:inline-block;width:200px;">大连渔人码头岸边有很多造型各异的欧式建筑，码头里停靠着各式鱼船形成了一道独特的风景线这是渔人码头的外海</p>
<img src="./timg.jpg">
<br>
<div class="box1">
<img src="./timg.jpg">
<p style="display:inline-block;width:200px;">大连渔人码头岸边有很多造型各异的欧式建筑，码头里停靠着各式鱼船形成了一道独特的风景线这是渔人码头的外海</p>
</div>
<br><br><br>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
页面效果图：
备注：老师见谅，上班时间紧凑，手抄稿可以放放吗？
