web前端工程师----网页布局

如何用css进行网页布局

第一章  内容简介

1-1  内容简介

1.什么叫做布局？

又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合

2.网页设计的特点

a.网页可以自适应宽度

b.网页的长度理论上没有限制

3.分栏又称为分列，常见的布局分为：

一列布局、二列布局、三列布局、混合布局

第二章  用HTML+CSS实现最简单的网页效果：一列布局

2-1  一列布局

居中  margin:0 auto

2-2  二列布局

1.自适应宽度

<style type="text/css">

.body{margin:0;padding:0}

.left{width:20%,height:500px;float:left;background:#ccc}

.right{width:80%,height:500px;float:left;background:#ddd}

</style>

<div class="left">

<div class="right'>

2.固定宽度

<style type="text/css">

.body{margin:0;padding:0}

.main{width:800px;margin:0 auto}

.left{width:20%,height:500px;float:left;background:#ccc}

.right{width:80%,height:500px;float:right（left也可以，因为浮动是跟随的）;background:#ddd}

</style>

<div class="main">

<div class="left">

<div class="right'>

</div>

第4章  用position定位方法实现自适应效果的三列布局

4-1  三列布局

<style type="text/css">

.body{margin:0;padding:0}

.main{width:800px;margin:0 auto}

.left{width:20%,height:500px;background:#ccc;postion:absolute:left:0;top:0}

.middle{height:500px;background:#999;margin:0 300px 0 200px}

.right{width:20%,height:500px;background:#ddd;postion:absolute:right:0;top:0}

</style>

<div class="left"></div>

<div class="middle"></div>

<div class="right'></div>

第5章  用HTML+CSS实现复杂结构的混合布局

利用子div元素，对块进行再分栏或摆放子<div>与居中位置

网页布局就是正确摆放块，块有三种关系，紧挨，嵌入、叠压

网页布局基础

第1章  课程简介

1-1  网页布局--课程简介

1.三大布局技巧----流式布局、浮动布局及绝对定位布局

2.三大定位机制----标准文档流、浮动和绝对定位

3.关键知识点----标准文档流、盒子模型、float属性以及position属性

4.三大案例：a.自动居中一列布局案例----盒子模型使用方法

       b.浮动布局案例----float属性,解决浮动影响的方法

       c.绝对定位布局案例----绝对定位实现横向两列或多列布局

第2章  自动居中一列布局

2-1  网页布局相关知识点讲解----标准文档流、块级元素、行级元素

1.W3C标准：由万维网联盟制定的一系列标准，包括结构化标准语言(HTML和XML)、表现标准语言(CSS)、行为标准语言(DOM和ECMAscript)

                倡导结构、样式、行为分离

2.标准文档流(normal flow)

特点：从上到下，从左到右、输出文档内容

   由块级元素和行级元素组成，块级元素和行级元素都是盒子模型

   块级元素特点：从左到右撑满页面，独占一行；触碰到页面边缘时，会自动换行

   tip：浏览器可能会为元素添加默认样式

   行级元素特点：能在同一行内显示，不会改变HTML文档结构

   大部分表单标签（表单元素）都属于行级标签

2-2   盒子模型

1.盒子模型=网页布局的基石，由4部分组成：

   a.边框(border)

   b.外边距(margin)

   c.内边距(padding)

   d.盒子中的内容(content)

    a,b,c是属性

2.属性值的设定：a.逐个    顺时针（上右下左）

                               b.三个    上右（左）下

                               c.两个     上（下）右（左）

                               d,一个

3.盒子3D模型

   从下到上为:margin，background-color，background-image，content+padding，border

网页简单布局值结构与表现原则

第1章  结构与表现相关内容简介

1-1  内容简介

1.html（结构）、css（样式）、javascript（行为）

2.分析网页的html结构和css样式时，有一个原则，先不受样式影响，注意html结构和语义化

第2章  结构与表现相分离的思想

2-1  微博用户发言信息列表制作

1.html标签都是从上到下渲染

2.先按结构和语义编写代码，然后进行css样式设置，减少html与css契合度

2-2  电话号码布局制作

1.利用text-indent定位

2-3  排行榜制作

1.先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化，然后考虑布局和表现形式

第3章  网页换肤及总结

3-1  网页换肤及总结

导航条菜单的制作

第1章  垂直菜单的制作

1-1  垂直菜单的制作

1.一般都使用"ul/li"来制作"菜单导航条"

第2章 水平菜单的制作

2-1  水平菜单的制作

1.通过设置css样式中的float属性能将垂直菜单转变成水平菜单

第3章  圆角菜单的制作

3-1  圆角菜单的制作

1.通过设置背景，改变外观样式

   通过设置a:hover，可以为菜单增加交互效果

2.菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高

第4章  伸缩菜单的制作----改变高度

1.margin可以用负值，向相反方向移动

第5章  伸缩菜单的制作----水平方向

5-1  伸缩菜单的制作----水平方向

第6章  总结

6-1  总结

1.通常用什么标签构建导航条菜单

   用<ul><li></li></ul>无序列表来构建

2.如何轻松的将垂直菜单转变成水平菜单

   对垂直菜单中的css样式进行设置给<li>添加float属性

3.在制作圆角菜单时，背景图片是贴在哪个标签上

   <a>标签

4.在制作改变高度的伸缩菜单时用什么技巧实现高度向上延伸

    margin-top用负值

5.在用JavaScript代码实现菜单的水平伸缩效果时this的含义是什么

   this代表当前<a>标签