直接附上最终效果图：

index.html内容：

<html>

<!--20170730 soulsjie-->

    <head>

		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

		<title>div+css页面布局综合练习</title>

		<link rel="stylesheet" href="style.css" type="text/css" />

		<!--css文件的引用-->

    </head>

    <body>

		<!--logo开始-->

		<div class="logo">logo位</div>

		<!--logo结束-->

		<!--导航栏开始-->

		<div class="jianxi1"></div>

		<div class="Navigation">导航栏位</div>

		<!--导航栏结束-->

		<div class="jianxi2"></div>

		<!--内容开始-->

		<div class="content">

			<!--第一版块开始-->

			<div class="contentone">

				<!--栏目一开始-->

				<div class="lanmuyi">

					<div class="lanmuheadyi">

						<div class="lanmunameyi"><span class="nameyi">栏目一</span></div><!--栏目名-->

						<div class="lanmumoeryi"><span class="moreyi">更多...</span></div><!--更多-->

					</div><!--栏目头部-->

					<div class="lanmucontent"></div><!--栏目内容-->

				</div>

				<!--栏目一结束-->

				<!--栏目二开始-->

				<div class="lanmuer">

					<div class="lanmuheader">

						<div class="lanmunameer"><span class="nameer">栏目二</span></div><!--栏目名-->

						<div class="lanmumoerer"><span class="moreer">更多...</span></div><!--更多-->

					</div><!--栏目头部-->

				</div>

				<!--栏目二结束-->

				<!--栏目三开始-->

				<div class="lanmusan">

					<div class="lanmuheadsan">

						<div class="lanmunameyi"><span class="nameyi">栏目三</span></div><!--栏目名-->

						<div class="lanmumoeryi"><span class="moreyi">更多...</span></div><!--更多-->

					</div><!--栏目头部-->

					<div class="lanmucontent"></div><!--栏目内容-->

				</div>

				<!--栏目三结束-->

			</div>

			<!--第一版块结束-->

			<div class="jianxi3"></div>

			<!--第二版块开始-->

			<div class="contenttwo">

				<!--栏目四开始-->

				<div class="lanmusi">

					<div class="lanmuheadsi">

						<div class="lanmunamesi"><span class="namesi">栏目四</span></div><!--栏目名-->

						<div class="lanmumoersi"><span class="moresi">更多...</span></div><!--更多-->

					</div><!--栏目头部-->

					<div class="lanmucontent"></div><!--栏目内容-->

				</div>

				<!--栏目四结束-->

				<!--栏目五开始-->

				<div class="lanmuwu">

					<div class="lanmuheadwu">

						<div class="lanmunamewu"><span class="namewu">栏目五</span></div><!--栏目名-->

						<div class="lanmumoerwu"><span class="morewu">更多...</span></div><!--更多-->

					</div><!--栏目头部-->

					<div class="lanmucontent"></div><!--栏目内容-->

				</div>

				<!--栏目五结束-->

			</div>

			<!--第二版块结束-->

		</div>

		<!--内容结束-->

		<!--底部开始-->

		<div class="footer">底部内容</div>

		<!--底部结束-->

    </body>

</html>

style.css内容：

body{margin:0; padding:0}

/*logo*/

.logo{ background:#FF0000; margin:0 auto; width:960px; height:300px}

/*导航栏*/

.Navigation{ background:#990000; width:960px; height:30px; margin:0 auto}

/*内容*/

.content{ background:#ffffff; width:960px; height:635px; margin:0 auto}

/*第一版块*/

.contentone{ background:#ffffff; width:960px; height:300px; margin:0 auto}

/*栏目一*/

.lanmuyi{ background:#ffffff; width:250px; height:300px; float:left;border:2px solid #ff0000; margin:0 20 0 0}

.lanmuheadyi{ background:#FF0000; width:250px;height:30px}

.lanmunameyi{ width:135px;height:30px; float:left}

.lanmumoreyi{ width:135px;height:30px; float:right;}

.nameyi{ text-align:left; color:#ffffff; font-size:14px; margin:0 0 0 10}

.moreyi{ text-align:right; color:#ffffff; font-size:14px; margin:0 0 0 60}

/*栏目二*/

.lanmuer{ background:#fff; width:408px; height:300px; float:left;border:2px solid #FF6600; margin:0 20 0 0}

.lanmuheader{ background:#FF6600; width:408px;height:30px}

.lanmunameer{ width:180px;height:30px; float:left}

.lanmumoreer{ width:180px;height:30px; float:right;}

.nameer{ text-align:left; color:#fff; font-size:14px; margin:0 0 0 10}

.moreer{ text-align:right; color:#fff; font-size:14px; margin:0 0 0 170}

/*栏目三*/

.lanmusan{ background:#ffffff; width:250px; height:300px; float:right;border:2px solid #ff3300; margin:0 0 0 0}

.lanmuheadsan{ background:#ff3300; width:250px;height:30px}

/*第二版块*/

.contenttwo{ background:#ffffff; width:960px; height:300px; margin:0 auto}

/*栏目四*/

.lanmusi{ background:#fff; width:466px; height:300px; float:left;border:2px solid #FF9900; margin:0 20 0 0}

.lanmuheadsi{ background:#FF9900; width:466px;height:30px}

.lanmunamesi{ width:240px;height:30px; float:left}

.lanmumoresi{ width:240px;height:30px; float:right;}

.namesi{ text-align:left; color:#ffffff; font-size:14px; margin:0 0 0 10}

.moresi{ text-align:right; color:#ffffff; font-size:14px; margin:0 0 0 170}

/*栏目五*/

.lanmuwu{ background:#fff; width:466px; height:300px; float:left;border:2px solid #FFCC00; margin:0 0 0 0}

.lanmuheadwu{ background:#FFCC00; width:466px;height:30px}

.lanmunamewu{ width:240px;height:30px; float:left}

.lanmumorewu{ width:240px;height:30px; float:right;}

.namewu{ text-align:left; color:#ffffff; font-size:14px; margin:0 0 0 10}

.morewu{ text-align:right; color:#ffffff; font-size:14px; margin:0 0 0 170}

/*底部*/

.footer{ background:#990000; width:960px; height:80px; margin:0 auto}

/*间隙*/

.jianxi1{ background:#ffffff; height:5px; margin:0 auto}

.jianxi2{ background:#ffffff; height:10px; margin:0 auto}

.jianxi3{ background:#ffffff; height:20px; margin:0 auto}

一个简单的模板了解css+div网页布局的更多相关文章

  1. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  2. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  3. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  4. css+div网页设计（二）--布局与定位

    在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...

  5. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  6. 一个简单的模板引(han)擎(shu)

    自制一个简单的模板引(han)擎(shu) 原理 说大了 实际上是模板函数 原理呢就是简单的字符串替换 第一版 var data = { username: 'Muhha' } str = '< ...

  7. CSS+DIV网页样式布局实战从入门到精通 中文pdf扫描版

    CSS+DIV网页样式布局实战从入门到精通通过精选案例引导读者深入学习,系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法. 全书共21章.第1-5章主要介绍网页样式布局的基础知识,包 ...

  8. PHP.3-DIV+CSS标准网页布局准备工作（上）

    DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...

  9. PHP.4-DIV+CSS标准网页布局准备工作（下）

    DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...

随机推荐

  1. [POI2007]山峰和山谷Grz

    Description FGD小朋友特别喜欢爬山,在爬山的时候他就在研究山峰和山谷.为了能够让他对他的旅程有一个安排,他想知道山峰和山谷的数量.给定一个地图,为FGD想要旅行的区域,地图被分为\(n\ ...

  2. F - Function

    Bryce1010模板 先找到数组A中的循环节,再找到数组B中的循环节,如果B中的循环节是A中循环节的循环因子,说明可以配对,结果累积起来. #include<bits/stdc++.h> ...

  3. HBase Region Assign流程详解

    Hbase是kv存储,但是逻辑上我们可以把存储在hbase上的kv数据当成表,rowkey可以认为是表的主键.为了便于分布式操作,hbase会把表横向切分成一块一块的数据,而每块就是一个Region. ...

  4. [转]Php MySql Class

    本文转自:http://www.cnblogs.com/noevil/archive/2010/11/06/1870864.html <?php /**  * 数据库操作类  *  * @aut ...

  5. AJPFX关于代码块的总结

    代码块:        {                执行语句;        }(1) 当出现在局部位置时, 为局部代码块.        局部位置: 如语句块中, 函数中, 构造代码块中, 静 ...

  6. php之依赖注入和控制反转

      DI——Dependency Injection   依赖注入  IoC——Inversion of Control  控制反转  要想理解上面两个概念,就必须搞清楚如下的问题: 1.参与者都有谁 ...

  7. C#过时方法标记

    1.当遇到过时或废弃的方式 函数怎么办 [Obsolete]特性解决你的困惑 1.1:当方法已经完成相关兼容 可以保留时

  8. java.lang.ClassCastException: com.google.gson.internal.LinkedTreeMap cannot be cast to

    在做android解析服务器传来的json时遇到的错误. 服务器传来的数据格式 [{"," id":"7ef6815938394fce88a5873312b66 ...

  9. IntelliJ IDEA安装与破解

    1.软件下载 文中使用到的安装包下载 2.部署 安装一路下一步即可. 把下载的JetbrainsCrack-3.1-release-enc.jar放在安装目录的bin目录下 3.修改配置文件 在安装的 ...

  10. 读取.properties配置信息

    package com.ctcti.webcallcenter.utils; import java.io.FileInputStream;import java.io.FileNotFoundExc ...