摘要：<doctype html><html><head><meta charset="utf-8"><link rel="shortuct icon" type="image/x-icon" href="fvation"><link rel="st
<doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortuct icon" type="image/x-icon" href="fvation">
<link rel="stylesheet" type="text/css" href="static/css/index.css">
<title> CSS基礎(chǔ)及樣式控制</title>
<style>
#php_1 {display:block}
i {display:inline-block;width:100px;height:100px;background:red;}
/*背景圖片*/
body {background:url("static/images/logo.jpg");background-repeat:no-repeat;backgrpound-position:center top;}
/*盒子模型*/
.div {width:50px;height:50px;background:red;border:1px solid #ccc;margin:10px 5px;padding:5px;line-height:50px;text-align:center;border-radius:5px;}
#div_1 {width:200px;height:200px;background:red;position:relative;top:50px;left:50px;}
#div_2 {width:200px;height:200px;background:red;position:absolute;top:50px;left:50px;}
lu li {width:60px;height:30px;border:1px solid #ccc;margin-left:5px;float:left;line-height:30px;text-align:center;}
</style>
</head>
<body>
<!--內(nèi)聯(lián)方式：塊級(jí)元素轉(zhuǎn)行內(nèi)元素-->
<p style="display:inline">你好</p><span>世界<span>
<!--內(nèi)部方式：行內(nèi)元素轉(zhuǎn)塊級(jí)元素-->
<span id="php_1">PHP</span><b>中文網(wǎng)</b>
<!--標(biāo)簽轉(zhuǎn)行內(nèi)元素-->
<i>PHP中文網(wǎng)</i>
<hr>
<!--盒子模型-->
<div class="div">PHP中文網(wǎng)</div>
<hr>
<!--相對(duì)定位與絕對(duì)定位-->
<div id="div_1"><div id="div_2"></div></div>
<hr>
<!--浮動(dòng)-->
<ul>
<li>導(dǎo)航1</li>
<li>導(dǎo)航2</li>
<li>導(dǎo)航3</li>
</ul>
</body>
</html>
批改老師：查無此人批改時(shí)間：2019-07-02 13:11:52
老師總結(jié)：完成的不錯(cuò)。浮動(dòng)在移動(dòng)端用到的比較多。繼續(xù)加油。