div+css对网页进行布局

　　首先在页面整体上进行div标签划分内容区域，然后再用css进行定位，最后再对相应的区域添加内容。

1、用div将页面划分

　　拿到网站页面图后，首先将分析页面分为哪几块,然后用DIV划分出各个内容区域，一般页面有页面顶部、

轮播图、主体内容、菜单主导航、页面底部（footer又叫脚注）几个部分构成，每个部分分别由自己的id来标识。

如图：

2.设计各内容块的位置

　　页面内容确定后，则需要根据内容本身去考虑页面的版型，例如菜单、双栏、左右中，

大型网站和一些门户网站大都使用左中右三栏，一般是建议使用两栏。等内容块确定后就

可以使用css直接定位了。

如图：

3、用css定位

　　把页面框架确定后就可以css对各个设计的内容块进行定位，然后对各个块

进行整体规划，最后再添加内容。

4、实例

　　山东大学网页如下图，分了10个大块，用div分块，css修饰定位 ，效果图代码如下

分块：

效果图：

程序代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>山东大学练习</title>

		<style type="text/css">

			/* 顶部 */

			#top{

				width: 100%;

				height: 40px;

				background-color: #444444;

			}

			/* 导航链接区 */

			#nav{

				width: 100%;

				height: 110px;

				background-color: #9b0d14;

			}

			#nav1{

				width: 1300px;

				margin:0 auto;

				position:relative;

			}

			ul,li{

				list-style:none;

				padding:0;

				margin:0;

				border:0;

				}

			#logo{

				width:264px;

				height:82px;

				position:absolute;

				top:16px;

				left:50%;

				margin-left:-132px;

			}

			.navList li{

				width:100px;

				height:100%;

				float: left;

				font-size:18px;

				text-align: center;

				color: white;

				line-height: 110px;

			}

			.navList li:hover{

				background-color:#a7181f;

				cursor:pointer;

			}

			.navList5{

				margin-right:300px;

			}

			/* 轮播图 */

			#chart{

				width: 80%;

				height: 300px;

				border: 1px solid black;

				background-color: beige;

				margin:auto;

			}

			/* 新闻 */

			#new{

				width:80%;

				height: 300px;

				border: 1px solid black;

				background-color: darkgrey;

				margin:auto;

			}

			#new1{

				width:65%;

				height: 300px;

				background-color: red;

				float: left;

			}

			#new2{

				width:35%;

				height: 300px;

				background-color: blue;

				float: left;

			}

			/* 山大视点 */

			#sd{

				width:100%;

				height: 500px;

				background:url(img/qiebg.jpg) ;

			}

			/* 3快内容 */

			#box{

				width: 80%;

				height: 400px;

				border: 1px solid black;

				background-color: grey;

				margin:auto;

			}

			.box1{

				width: 33.16%;

				height: 100%;

				border: 1px solid red;

				background-color: seagreen;

				margin:auto;

				float: left;

			}

			/* 专题 */

			#special{

				width: 80%;

				height: 150px;

				border: 1px solid red;

				background-color: grey;

				margin:auto;

			}

			/* 链接 */

			#link{

				width: 100%;

				height:100px;

				background-color:#9b0d14;

			}

			.linkBox{

				width: 1200px;

				height: 96px;

				margin: 0px auto;

			}

			.pic{

				float:left;

				width:113px;

				height:96px;

				background: url(img/link.png);

				background-position: center;

				background-repeat:no-repeat;

				margin-right:20px;

			}

			.linkBox ul li{

				height:96px;

				float: left;

				color: white;

				line-height: 96px;

				padding:0 14px;

			}

			.linkBox ul li a{

				color:white;

				text-decoration:none;

			}

			/* foot */

			#foot{

				width:100%;

				height:250px;

				background:url(img/footbg.jpg);

			}

			/* 版权 */

			#copyright{

				width:100%;

				height:70px;

		        background-color:#242424;

			}

		</style>

	</head>

	<body>

		<!-- 顶部 -->

		<div id="top"></div>

		<!-- 导航链接区 -->

		<div id="nav">

			<!-- <div id="nav1">

				<div id="logo">

					<a href="" title="山东大学">

						<img src="img/logo.png" width="263" height="82" />

					</a>

				</div>

				<div class="navList">

					<ul>

						<li>山大概况</li>

						<li>组织机构</li>

						<li>教育教学</li>

						<li>科学研究</li>

						<li class="navList5">招生就业</li>

						<li>人才队伍</li>

						<li>合作交流</li>

						<li>学科建设</li>

						<li>校园服务</li>

						<li>校园文化</li>

					</ul>

				</div>

				</div>

			</div> -->

		</div>

		<!-- 轮播图 -->

		<div id="chart"></div>

		<!-- 新闻 -->

		<div id="new">

			<div id="new1"></div>

			<div id="new2"></div>

		</div>

		<!-- 山大视点 -->

		<div id="sd"></div>

		<!-- 3快内容 -->

		<div id="box">

			<div class="box1"></div>

			<div class="box1"></div>

			<div class="box1"></div>

		</div>

		<!--专题 -->

		<div id="special"></div>

		<!--链接 -->

		<div id="link">

			<!-- <div class="linkBox">

				<span class="pic">

				</span>

				<ul>

					<li><a href="#">教育部</a></li>

					<li><a href="#">人民网</a></li>

					<li><a href="#">新华网</a></li>

					<li><a href="#">光明网</a></li>

					<li><a href="#">央视网</a></li>

					<li><a href="#">中新网</a></li>

					<li><a href="#">中国教育新闻网</a></li>

					<li><a href="#">北京大学</a></li>

					<li><a href="#">清华大学</a></li>

					<li><a href="#">复旦大学</a></li>

					<li><a href="#">浙江大学</a></li>

					<li><a href="#">更多>></a></li>

				</ul>

			</div> -->

		</div>

		<!-- foot -->

		<div id="foot"></div>

		<!-- 版权 -->

		<div id="copyright"></div>

	</body>

</html>

　　

div+css对网页进行布局的更多相关文章

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

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

  2. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  3. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  4. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  5. div+css的第一个布局

    ---恢复内容开始--- 这个东西说难也不难,但也要详细思虑一番: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

  6. 用DIV+CSS做网页里要设置body和*规定内容

    body{}表示是对body标签的设置,就是<html><head></head><body></body></html> 里面 ...

  7. div+CSS实现页面的布局要点记录

    1.页面任何控件可以通过div包装为一个模块,然后通过margin(外补丁)和padding(内补丁)对控件位置的摆放进行控制,以实现想要的效果. 2.position:absolute;对控件实现绝 ...

  8. Photoshop图象切片保存为网页HTML（DIV+CSS布局）的方法

    首先,制作图象切片(以一张图片为例子) 一.选择“切片”工具,在图像上拖动以分割图像(例如:一张图像切割2次就形成3个切片)切片后如下图 二.设置切片选项(如大小.目标链接.图片说明等等):选择“切片 ...

  9. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

    标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...

随机推荐

  1. Linux的各个发行版本（二）

    CentOS CentOS是世界上使用的最好的Linux服务器发行版之一,占了全世界Linux服务器的30%. 它是Red Hat 的衍生产品,提供了稳定的服务器环境. 特点: 支持的X86-64架构 ...

  2. Codeforces Round #536 E. Lunar New Year and Red Envelopes /// 贪心 记忆化搜索 multiset取最大项

    题目大意: 给定n m k:(1≤n≤1e5, 0≤m≤200, 1≤k≤1e5) 表示n个时间长度内 最多被打扰m次 k个红包 接下来k行描述红包 s t d w:(1≤s≤t≤d≤n , 1≤w≤ ...

  3. SpringMVC前后端参数交互

    Controller中使用JSON方式有多种 关键在于ajax请求是将数据以什么形式传递到后台 HTTP请求中: 如果是get请求,那么表单参数以name=value&name1=value1 ...

  4. pandas--排序和排名

    排序 要对行或列索引进行排序,可使用sort_index方法,它将返回一个已排序的新对象: Series 1.对Series索引排序 obj=Series(range(4),index=['d','a ...

  5. CAS -- ABA问题的解决方案

    我们现在来说什么是ABA问题.假设内存中有一个值为A的变量,存储在地址V中. 此时有三个线程想使用CAS的方式更新这个变量的值,每个线程的执行时间有略微偏差.线程1和线程2已经获取当前值,线程3还未获 ...

  6. jeecg Online表单开发中新增自定义按钮

    要求:给表单增加一个“确认”按钮,按钮功能更改选中数据的flag字段为1 点击“自定义按钮”,录入一个“确认”按钮 按钮编码:该编码在一个智能表单配置中唯一,该编码同时是按钮触发的JS函数名.例如:按 ...

  7. gitj基础2

    回滚版本        git reset --hard HEAD^  回滚上一个版本  git reset --hard 版本号(或者版本号前6位)  回滚到指定版本      如果修改版本了,也关 ...

  8. thinkphp 标签扩展

    标签库加载直线电机参数 模板中加载标签库,预加载自定义标签库,扩展内置标签库的加载 请参考:http://document.thinkphp.cn/manual_3_2.html#taglib 自定义 ...

  9. NTT数论变换

    数论变换NTT 前置知识 FFT:NTT的思想和FFT一样(FFT介绍) 概述 数论变换,即NTT(Number Theory Transformation?),是基于数论域的FFT,一般我们默认FF ...

  10. NX二次开发-设置经典工具栏的可见性UF_UI_set_toolbar_vis

    NX9+VS2012 1.打开D:\Program Files\Siemens\NX 9.0\UGII\menus\ug_main.men 找到装配和PMI,在中间加上一段 TOGGLE_BUTTON ...