HTML网页布局实例
在没有学习div之前，网页布局是件非常麻烦的事情，由于缺乏足够多的规则对网页的内容进行组织，因此，显得十分麻烦。而div便是为网页布局而生。div最大的特点便是可以进行任意的嵌套，并且嵌套的div之间互相独立，互不影响，这便使得网页中的内容相对位置不会发生改变。div有三种重要的位置方式（position）:relative, absolute和fixxed。其中需要注意的是，如果要使嵌套的div的postion生效，必须在它嵌套的上一层div中声明position，三种方式皆可。另外，借助于盒子模型，也能够加深我们对于布局的理解。如下图（图片来自于百度百科）：

图1 盒子模型
实例效果：

图2 网页实例效果
 
代码地址：https://github.com/JiasenLee/javaweb_in_action/tree/master/HTML实战任务5作业
 

转载于:https://www.cnblogs.com/Jason404/p/9533800.html

                                                                                                            HTML网页布局三大方式
      提到网页布局方式，相信大家都知道有三种吧。
      第一种：普通流（即我们常说的“标准文档流”）
                     特点：其中元素像瀑布一般一个个地排列；
      第二种：浮动--float
                     特点：1）、包裹性--应用了浮动的元素将会脱离标准文档流，不受其他元素的影响，也不会影响其他元素。并且该元素的宽高都会仅仅包裹住内容而已。
                                2）、破坏性--应用了浮动的元素将会使其父亲容器的高度塌陷，也就是不再撑起父容器的高度。
      第三种：定位--positon
                     特点：1）、相对定位：元素相对于自己本来的位置进行偏移，在浏览器中位置的确发生了变化，但对于其他元素就好像该元素位置并没有改变。
                                2）、绝对定位：元素相对于祖先元素直至HTML进行偏移，该元素将会脱离标准文档流，同时具备“包裹性”和“破坏性”。
                                3）、固定定位：其实它也是绝对定位的一种，只是它相对的父容器是浏览器窗口。
                                4）、静态定位：即不设置任何position属性值。

                
静态布局（Static Layout）
即传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。
自适应布局（Adaptive Layout）
自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。
你可以把自适应布局看作是静态布局的一个系列。
流式布局（Liquid Layout）
流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，
那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
响应式布局（Responsive Layout）
分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

结合上述文字描述，再观察如下的页面实际效果，应该可以把这几个概念搞清楚：
http://wow.techbrood.com/fiddle/1753
            
再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow

HTML网页布局与CSS入门



网页布局原理

标签在网页中会显示成一个个的方块，先按照行的方式，把网页划分成多个行，再到行里面划分列，也就是在表示行的标签中再嵌套标签来表示列，标签的嵌套产生叠加效果。
标签语义化

在布局中需要尽量使用带语义的标签，使用带语义的标签的目的首先是为了让搜索引擎能更好地理解网页的结构，提高网站在搜索中的排名(也叫做SEO)，其次是方便代码的阅读和维护。
带语义的标签 

h1~h6: 表示标题
p: 表示段落
img: 表示图片
a: 表示链接 
不带语义的标签 

div: 表示一块内容
span: 表示行内的一块内容
所以我们要根据网页上显示的内容，使用适合的标签，可以优化之前的代码。
CSS介绍



CSS概述

CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表,为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
CSS基本语法

css的定义方法是：
选择器 { 属性：值； 属性：值； 属性：值；}

选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性，每个属性有一个或多个值。属性和值之间用冒号，一个属性和值与下一个属性和值之间用分号，最后一个分号可以省略，代码示例：
div{ 
    width:100px; 
    height:100px; 
    background:gold; 
}



css引入方式



css引入页面的方式有三种：

内联式：通过标签的style属性，在标签上直接写样式。
<div style="width:100px; height:100px; background:red ">......</div>

嵌入式：通过style标签，在网页上创建嵌入的样式表。
<style type="text/css">
    div{ width:100px; height:100px; background:red }
    ......
</style>

外链式：通过link标签，链接外部样式文件到页面中。(推荐使用)
<link rel="stylesheet" type="text/css" href="css/main.css">