实训第三天：前端的页面布局

div与css流行的布局方式

盒子模型

margin:两个盒子之间的距离，外边距

border：盒子的边框，相当于盒子的壳

padding:盒子的内边距，相当于盒子的填充物

content:内容

盒子模型的四要素

外边距内边距边框内容
margin padding border content

盒子模型的六要素

外边距内边距边框内容宽高

margin padding border content width height

布局思想:

从上到下一行一行，元素一般情况下和谐的在一行中存在

注意：div的特点是自己统治一行，不能和别的元素和谐共处于一行，要使共处一行的话，需要使用float，实现漂移运动。

如何判断一个网页的网站做的如何?

最难的一种判断方法：

把世界上所有的浏览器下载，把网页在所有浏览器上都浏览一遍。（浏览器对px单位的解释是不同的）

最简单的方法:

按钮键盘ctrl+鼠标滚轮，缩小网站，缩到最小还能看到网站的基本形状。

例：

<html>
	
	<head>
		<title>我的第一个个人网页</title>
		<style>
		    body{
        
        
			background:url(topbg.jpg);
			}
			#wai{
        
        
            width:100%;
			height:500px;
			background:url(background.gif);
 			}
			.i{
        
        
		           width:150px;
					height:150px;
			}
			#you{
        
        
			   float:right;
			   margin: 50px 30px 0 0;
			}
			#zuo
			{
        
          
			   clear:both;
			   margin 0 0 0 30px;
			
			}
			#zhi{
        
        
			 float:left;
			 margin: 25px 0 0 30px;
			}
			#yulu{
        
        
			    float:right;
			    margin:-380px 300px 0 0
			}
			.qq{
        
        
			    width:400px;
				height:400px;
			}
		</style>
	</head>
	<body >

		<div id="wai">
		  <div>
			<div id="you">
				<img class="i" src="3.jpg"/>
			</div>
			
		  </div>
		  <div>
			<div id="zhi">
			   <em><h3>姓名：哆啦A梦</h3></em>
			   <h3>个人简介：</h3>
			   <p>心肠好，乐于助人，做事很拼命，但却心肠软。</p>
			   <p> 每次大雄遇到困难，他总会帮大雄。但有时会用愚蠢的方法来帮助大雄。</p>
			   <p>当它吃不到铜锣烧或人们叫他狸猫时，脾气会非常暴躁。
			   <p>他原来是和妹妹一样，黄色的，而且有耳朵.</p>
			   <hr>
			</div>
			<div id="zuo">
			       <img class="i"src="2.jpg"/>
				    <img class="i"src="4.gif"/>
				   <img class="i"src="5.jpg"/>
				   <img class="i"src="6.jpg"/>
			</div>
		</div>
		    <div id="yulu">
			    <img class="qq"src="7.jpg" />
			</div>
		</div>
		<em><h2 align="center">哆啦A梦感人语录</h2></em>
		<hr>
		<b><p align="center">你受伤的时候，我永远都在。</p></b>
		<b><p align="center">哆啦A梦你个傻瓜，没有你我一个人怎么行。</p></b>
		<b><p align="center">其实我还是很担心你耶 ，如果可以继续留在你身边的话 ，这样子该有多好！我不在，你也可以好好照顾自己吗 ？如果胖虎和小夫又欺负你 ，你可以自己勇敢面对吗？</p></b>
	</body>
	<audio src="123.mp3"  autoplay="autoplay" loop="loop"> 
</html>

效果图：

在这里插入图片描述

注：用于自己学习笔记。
请添加图片描述

实训第三天：前端的页面布局

实训第三天：前端的页面布局

div与css流行的布局方式

Guess you like