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

来源：互联网发布：刚开始做淘宝卖什么好编辑：程序博客网时间：2024/06/06 05:10

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的应用使页面布局更复杂，行块间可以相互覆盖，动画效果、部分行置顶中有使用。

0 0