前端学习笔记-9月--基本布局

最新推荐文章于 2024-10-01 23:23:32 发布

LJ_workspace

最新推荐文章于 2024-10-01 23:23:32 发布

阅读量387

点赞数

本文链接：https://blog.csdn.net/LJ_workspace/article/details/48392107

版权

15-9-12

通过HTML堆砌行与块，使用JavaScript等语言访问DOM更改行/块的内容、结构和样式。

15-9-17

前端基本布局：

代码：

<span style="font-family: Arial, Helvetica, sans-serif;"><!DOCTYPE </span><span style="font-family: Arial, Helvetica, sans-serif;">html></span>

<html>
<head>
    <style type="text/css">
        <!body {
			background-image:url(DSC_2543.jpg);
			background-repeat:no-repeat;
		}>
		
		/*主面板样式*/
		#container { 
			width:960px; 
			margin:AUTO;/*主面板DIV居中*/
		}
	    /*顶部面板样式*/
		#header {
			width:100%;
			height:45px;
			border:1px #F00 solid;
		}
		/*中间部分面板样式*/
		#main {
			width:100%;
			height:80px;
			border:1px #F00 solid;
		} 
		/*底部面板样式*/
		#footer {
			width:100%;
			height:50px;
			border:1px #F00 solid;
		}
		
		#first, #second, #third{
            width:32%;
            height:80%;
            border:1px blue solid;
            margin:5px;
			float:left;
        }
		
		
    </style>
</head>

<body >

<div id="container">
            <div id="header">header</div>
            <div id="main">
				<div id="first">div1</div>
				<div id="second">div2</div>
				<div id="third">div3</div>
			</div>
            <div id="footer">footer</div>
    </div>
   

</body>
</html>

如上，整个网页的布局可以这样，每一个块内布局也可以。基本实现了网页布局。

9-20

对于position属性，默认为static，整个页面布局如上，position还有

absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

position的应用使页面布局更复杂，行块间可以相互覆盖，动画效果、部分行置顶中有使用。