HTML寒假自学_html的学习成果-CSDN博客

本文链接：https://blog.csdn.net/weixin_44505177/article/details/86383494

HTML

Ghost的寒假学习

Ghost的寒假学习

你好！这是Ghost的个人技术成长博客。感谢您的浏览。

HTML第一天学习情况

今天学习了HTML的基本知识：

1.初步了解了HTML
2.准备好了开发环境（使用sublime进行编辑）
3.网页布局基本知识（切豆腐、用css控制div、浮动布局、消除浮动）

学习成果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>网页布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style >
	div{
		width: 1000px;
		height: 250px;
		background: blue;
	}
	#container{
		background: red;
	}
	#header{
		height: 200px;
		width: 500px;
		background: green;
	}
	#head1{
		width: 50px;
		height: 50px;
		background: white;
		float: left;
		clear: left;
	}
	#head2{
		width: 50px;
		height: 75px;
		background: pink;
		float: right;
	}
	#main{
		height: 300px;
		background: gray;
	}
	#left{
		width: 600px;
		float: left;
		background: yellow;
		clear: left;
	}
	#right{
		width: 240px;
		float: right;
		background: orange;
	}
	#middle{
		background: purple;
		width: 60px;
		float: left;

	}
</style>
</head>
    <body>
    	<div id="container">第一层红色</div>
    	<div>
    		<div id="header">第二层绿色</div>
    		<div id="head1">最左</div>
    	    <div id="head2">最右</div>
    		<div id="main">
    			<div id="left">左边</div>
    			<div id="middle">中间</div>
    			<div id="right">右边</div>
    		</div>
    	</div>
    	<div id="footer"></div>
    </body>
</html>