直接附上最终效果图：

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. （三）python函数式编程

    一.高阶函数 高阶函数英文叫Higher-order function.什么是高阶函数?我们以实际代码为例子,一步一步深入概念. 变量可以指向函数 结论:函数本身也可以赋值给变量,即:变量可以指向函数 ...

  2. 洛谷 P3203 [HNOI2010]弹飞绵羊 || bzoj2002

    看来这个lct板子的确没什么问题 好像还可以分块做 #include<cstdio> #include<algorithm> using namespace std; type ...

  3. Class.getResourceAsStream()与ClassLoader.getResourceAsStream()获取资源时的路径说明

    Class.getResourceAsStream(): com.xusweeter.iot.ws.vodafone.config.VodafoneServiceConfig.class.getRes ...

  4. vue项目导出电子表格

    方法一: 一.安装依赖(前面基本一样) npm install file-saver --save npm install xlsx --save npm install script-loader ...

  5. [转]Visual F# Samples and Walkthroughs

    本文转自:http://msdn.microsoft.com/en-US/library/vstudio/ee241126.aspx This topic provides links to samp ...

  6. Unity中，保存在OnInspectorGUI中改变的值

    using UnityEngine; using System.Collections; using UnityEditor; [CustomEditor( typeof( MessageLog ) ...

  7. 微信小程序之多行文本省略号

    最近在捣鼓小程序,期间遇到的问题,踩过的坑,也是在网上各种搜.这里也说下我解决的问题,方便大家. 在小程序首页显示文本列表的时候,为了美观,不希望把所有的文本都显示出来,希望是显示前几行(比如前3行, ...

  8. Redis 存储字符串和对象

    今天用redis存储,发现客户端jedis提供的存储方法中存储的类型只有String和byte数据,没有能够存储对象的,网上发现可以序列化存储对象.这就开始了我第一次序列化之旅.     1 测试类 ...

  9. 洛谷P2863 [USACO06JAN]牛的舞会The Cow Prom

    代码是粘的,庆幸我还能看懂. #include<iostream> #include<cstdio> #include<cmath> #include<alg ...

  10. FlowNet: Learning Optical Flow with Convolutional Networks

    作者:嫩芽33出处:http://www.cnblogs.com/nenya33/p/7122701.html 版权:本文版权归作者和博客园共有 转载:欢迎转载,但未经作者同意,必须保留此段声明:必须 ...