直接附上最终效果图：

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. [POJ1721]Cards

    Description 剀剀和凡凡有N张牌(依次标号为1,2,--,N)和一台洗牌机.假设N是奇数.洗牌机的功能是进行如下的操作:对所有位置I(1≤I≤N),如果位置I上的牌是J,而且位置J上的牌是K ...

  2. hihoOffer收割练习20题目1

    题目1 : 无根数变有根树 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一棵包含 N 个节点的无根树,小Hi想知道如果指定其中某个节点 K 为根,那么每个节点的父 ...

  3. for循环的阶乘

    方法一: long sum=0; long num=1; for (long i = 1; i <=20; i++) { for(long j=i;j>0;j--){ num=num*j; ...

  4. framework7 点取消后还提交表单解决方案

    $$('form.ajax-submit').on('submitted', function (e) { var xhr = e.detail.xhr; // actual XHR object v ...

  5. thinkphp3.2.3连接sqlserver 2008 R2 数据库

    环境: 操作系统——win7 64位旗舰版 PHP——thinkphp 3.23 数据库——Microsoft SQL Server 2008 R2 需要用到的软件: 步骤: 1.搜索SQLSRV30 ...

  6. 死磕 java魔法类之Unsafe解析

    问题 (1)Unsafe是什么? (2)Unsafe只有CAS的功能吗? (3)Unsafe为什么是不安全的? (4)怎么使用Unsafe? 简介 本章是java并发包专题的第一章,但是第一篇写的却不 ...

  7. AJPFX:如何保证对象唯一性呢？

    思想: 1,不让其他程序创建该类对象. 2,在本类中创建一个本类对象. 3,对外提供方法,让其他程序获取这个对象. 步骤: 1,因为创建对象都需要构造函数初始化,只要将本类中的构造函数私有化,其他程序 ...

  8. 掌握Spark机器学习库-06-基础统计部分

    说明 本章主要讲解基础统计部分,包括基本统计.假设检验.相关系数等 数据集 数据集有两个文件,分别是: beijing.txt 北京历年降水量,不带年份 beijing2.txt 北京历年降水量,带年 ...

  9. Matlab中size、numel、length、fix函数的使用

    size():获取矩阵的行数和列数  (1)s=size(A),      当只有一个输出参数时,返回一个行向量,该行向量的第一个元素时矩阵的行数,第二个元素是矩阵的列数. (2)[r,c]=size ...

  10. Android（java）学习笔记200：JNI之NDK的概念

    1.交叉编译 (1)概念 在一个平台(硬件)和os(软件)环境下,编译出另一种平台和os下可以运行的二进制代码. e.g:     电脑端                               ...