返回CSS基础及样......登陆

CSS基础及样式控制

无名氏_连2019-07-02 10:21:45149

<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>

最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网