CSS基础及样式控制

Original 2019-07-02 10:21:45 1567
abstract:<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基础及样式控制</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>

Correcting teacher:查无此人Correction time:2019-07-02 13:11:52
Teacher's summary:完成的不错。浮动在移动端用到的比较多。继续加油。

Release Notes

Popular Entries