DIV+CSS网页布局实例

一、效果预览

说明：非常基础的IDV+CSS，实现了一般网站布局。CSS样式也比较基础，一些像定位等属性都没有使用。

二、代码实现

1、主体结构
（1）标签结构

（2）容器样式

2、头部
（1）头部标签

（2）头部样式、

3、导航
（1）标签结构

（2）CSS样式

4、主体
（1）主体标签

<!-- 主体 --><div class="middle"><!-- 主体左栏 --><div class="middle-left"><div class="middle-left-top">第一栏</div><div class="middle-left-bottom"><div class="middle-left-bottom-first">第二栏</div><div class="middle--left-bottom-second">第三栏</div></div></div><!-- 主体中栏 --><div class="middle-mid"><div class="middle-mid-top">第四栏</div><div class="middle-mid-bottom"><div class="middle-mid-bottom-first">第五栏</div><div class="middle-mid-bottom-second">第六栏</div></div></div><!-- 主体右栏 --><div class="middle-right"><div class="middle-right-first">第七栏</div><div class="middle-right-second">第八栏</div><div class="middle-right-third">第九栏</div></div></div>

（2）主体样式

     /*主体样式*/.middle{background-color:lightgreen;}.middle::after{content:"";clear: both;display: block;}.middle-left,.middle-mid,.middle-right{width:390px;float: left;border:1px solid red;}.middle-left,.middle-mid{margin-right: 10px;}.middle-left{background-color: green;}.middle-mid{background-color: blue;}.middle-right{background-color: yellow;}/*主体左栏样式*/.middle-left-bottom::after{content:"";clear: both;display: block;}.middle-left-bottom-first,.middle--left-bottom-second{float: left;margin:10px;border:1px solid red;width:160px;}.middle-left-bottom-first,.middle--left-bottom-second{height:200px;background-image: url(./image/mid-left-bottom.jpg);}.middle-left-top{margin:10px;height:100px;background-image: url(./image/mid-left-top.jpg);}/*主体中栏样式*/.middle-mid-bottom-first,.middle-mid-bottom-second{float: left;margin:10px;border:1px solid red;width:160px;height:200px;background-image: url(./image/mid-left-bottom.jpg);}.middle-mid-top{margin:10px;height:100px;background-image: url(./image/mid-left-top.jpg);}/*主体右栏样式*/.middle-right::after{content:"";clear: both;display: block;}.middle-right-first{margin:10px;height:100px;background-image: url(./image/mid-left-top.jpg);}.middle-right-second,.middle-right-third{float: left;margin:10px;border:1px solid red;width:160px;height:200px;background-image: url(./image/mid-left-bottom.jpg);}

5、底部
（1）标签结构

<!-- 底部 --><div class="footer"><img src="./image/footer.jpg" alt=""></div>

（2）底部样式

/*底部样式*/.footer{background-image: url(./image/footer.jpg);}

布局前划分结构非常重要，这样就不容易造成混乱。这样我们就实现了一个非常简单的DIV+CSS网页结构布局。

DIV+CSS网页布局实例相关推荐

html css网页布局实例简单,Div+CSS网页布局项目实战一（含设计图、HTML和CSS源文件）...
网页的基本结构新建一个文件夹,命名为"DIV+CSS布局练习",在文件夹下新建两个空的记事本文档,输入以下内容: Div+CSS网页布局项目实战:页面布局与规划|www.125j ...
Float构建三栏DIV CSS网页布局
你对用float构建三栏DIV CSS网页布局的用法是否熟悉,这里和大家分享一下,用绝对定位的方法从CSS中得到固定宽度的布局并不困难:但是得到液态布局就有点困难了,因此现在都开始抛弃基于表格的布局技 ...
Div+CSS网页布局对网站搜索引擎优化的影响
Div+CSS网页布局对网站搜索引擎优化的影响我们都知道DivCSS网页布局的好处,它对网站搜索引擎优化的影响有哪些呢? 网站优化使用 DIV+CSS佈局,页面代码精简,这一点相信对XHTML有所瞭 ...
web前端 --- CSS（04） -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
DIV+CSS网页布局（新手必备)
文章目录一:网页布局的目的二:如何布局 (1):确定"版心" (2):分析模块三:页面元素的定位机制 (1)流式布局 (2)浮动-float (3)绝对定位(position ...
Div CSS网页布局对网站搜索引擎优化的影响
我们都知道DivCSS网页布局的好处,它对网站搜索引擎优化的影响有哪些呢? 网站优化使用 DIV CSS佈局,页面代码精简,这一点相信对XHTML有所瞭解的都知道.代码精简所带来的直接好处有两点:一是 ...
DIV+CSS网页布局常用的一些基础知识
CSS命名规范一．文件命名规范全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.css: 二．常 ...
DIV+CSS 网页布局之：三列布局
1.宽度自适应三列布局三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...
java css网页布局实例_java代码例子
JAVA 类名.方法名(这里面写的是什么)能不能写个代要是类名直接调用的方法,那这个方法就是静态的(static)方法,是不用new出新对象实例就可以直接调用的方法.看下面例子: class A{ p ...

DIV+CSS网页布局实例

一、效果预览

二、代码实现

DIV+CSS网页布局实例相关推荐

最新文章

热门文章