直接附上最终效果图：

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. 配置Ubuntu16.04第03步：安装搜狗输入法

    1.进入搜狗官网:https://pinyin.sogou.com/linux/ ,下载搜狗输入法安装包 2.使用dpkg命令安装Deb包: sudo dpkg -i sogoupinyin_2.0. ...

  2. 解题报告：hdu 2073 无限的路

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2073 Problem Description 甜甜从小就喜欢画图画,最近他买了一支智能画笔,由于刚刚接 ...

  3. QQ文件没有读取权限，60017导致QQ无法登陆的终极解决办法

    每隔一段时间,我的QQ就无法登陆,提示:QQ文件没有读取权限,60017导致QQ无法登陆的终极解决办法 点击了解详情发现里面的解决办法根本不起作用,网上 说的各种解决办法都不起作用,解决办法如下 1. ...

  4. JAVA中abstract,interface,final,static语法

    转自:http://www.cnblogs.com/yueue/archive/2010/04/20/1715863.html 一,抽象类:abstract     1,只要有一个或一个以上抽象方法的 ...

  5. Android Dialogs(5)[正常显示dlg,将Fragment显示为dialog,将Aty显示为dlg,嵌入],关闭Dialog

    Showing a Dialog When you want to show your dialog, create an instance of your DialogFragment and ca ...

  6. ural1437

    1437 记忆化 模拟倒水过程 #include <iostream> #include<cstdio> #include<cstring> #include< ...

  7. 构建一个.net的干货类库，以便于快速的开发 - 验证码

    一个验证码对于一个网站的作用不言而喻,而随着技术的发展验证码的种类也开始多了起来,发展至今很多网站已经不再使用一种验证码,为满足需求程序猿就要写很多的方法来适应需求,今天我就来介绍我之前收集到的验证码 ...

  8. 前端缓存-IndexedDB

    IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作.IndexedDB 允许储存大量数据,提供查找接口,还能建立索引.这些都是 LocalStorage 所不具备的.就数据库类 ...

  9. Python3 动手自己写谷歌翻译

    本篇为实现谷歌翻译的功能,在编写的时候以为只是一个接口的问题. 没想到的是每次翻译都会触发一次JS的执行,在请求参数中生成一个tk. 文中tk的实现是复用的网上大神的代码生成tk. 好了,不说了直接看 ...

  10. PowerShell让系统可以执行.ps1文件，开机，关机，在线时间 ， Function自定义函数

    Function Get-ComputerUptimeHistory { $q=' <QueryList> <Query Id="0" Path="Sy ...