09网页布局设计

网页布局设计div+css是目前较流行的网页布局方式。下面我们来学习常见的几种网页布局结构以及div+css布局的方法。《网页设计与制作）学习要点常见的几种网页布局结构1Div+css布局2《网页设计与制作）一、常见的几种网页布局结构页面尺寸一般以1024*768为主。800*6001024*768《网页设计与制作）1920*1080《网页设计与制作）页面宽度960px《网页设计与制作）版面布局的模式（1）T型结构布局（2）口型布局（3）三型布局（4）对称对比布局（5）POP布局一、常见的几种网页布局结构《网页设计与制作）T型《网页设计与制作）口型《网页设计与制作）三型《网页设计与制作）对称对比型《网页设计与制作）POP布局《网页设计与制作）学习要点常见的几种网页布局结构1Div+css布局2《网页设计与制作）二、Div+CSS布局1)插入DIV标签，命名ID。2）编辑DIV标签，添加内容。3）创建CSS样式表，靠CSS定位DIV。4）将CSS样式表附加到网页中。请看视频演示《网页设计与制作）Div+CSS布局练习1234整个页面放在id为container的div标签中，其中建立4个子div，分别如下：1）id为top，宽700高4502）id为left，宽120高3003）id为con，宽580高2504）id为di，宽580高50请问con和di的margin-top和margin-left分别为多少。《网页设计与制作）#di{width:580px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:120px;background-color:#FF9;height:50px;}#con{background-color:#9FF;height:250px;width:580px;margin-top:-300px;margin-right:0px;margin-bottom:0px;margin-left:120px;}《网页设计与制作）Div+CSS布局的优势1）表现和内容相分离。2）提高搜索引擎对网页的索引效率。3）提高页面浏览速度。4）易于维护和改版。5）代码简洁。