CSS基础及样式控制
<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基础及样式控制</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>
<!--内联方式：块级元素转行内元素-->
<p style="display:inline">你好</p><span>世界<span>
<!--内部方式：行内元素转块级元素-->
<span id="php_1">PHP</span><b>中文网</b>
<!--标签转行内元素-->
<i>PHP中文网</i>
<hr>
<!--盒子模型-->
<div class="div">PHP中文网</div>
<hr>
<!--相对定位与绝对定位-->
<div id="div_1"><div id="div_2"></div></div>
<hr>
<!--浮动-->
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
</body>
</html>
