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下的Ngnix服务器部署静态页

    一.安装FTP vsftpd 的名字代表”very secure FTP daemon”, 安全是它的开发者 Chris Evans 考虑的首要问题之一.在这个 FTP 服务器设计开发的最开始的时候, ...

  2. asp.net MVC项目，localhost响应时间过长

    1.早上高高兴兴的吃完早餐,敲了几句代码,准备调试,竟然发现VS调试项目打开的很慢,最后报错如下图 2.那就很可能是IIS问题嘛,IIS重启了一下,还是不行,在地址栏输入localhost,如下图(本 ...

  3. 过滤器 一 Filter

    import javax.servlet.Filter; 前言 过滤器是一个程序,依赖与servlet容器,它先于与之相关的servlet或JSP页面运行在服务器上.过滤器可附加到一个或多个servl ...

  4. Cucumber：启动类配置

    Cucumber:启动类配置 package com.steps; import cucumber.api.CucumberOptions; import cucumber.api.junit.Cuc ...

  5. Java中的线程Thread方法之---interrupt()

    前几篇都介绍了Thread中的几个方法,相信大家都发现一个相似点,那就是sleep,join,wait这样的阻塞方法都必须捕获一个InterruptedException异常,顾名思义就是一个线程中断 ...

  6. NTT数论变换

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

  7. NX二次开发-UFUN获取圆锥参数UF_MODL_ask_cone_parms

    NX11+VS2013 #include <uf.h> #include <uf_modl.h> #include <uf_ui.h> UF_initialize( ...

  8. 互联网公司java面试题（一）

    1.JDK和JRE区别? JDK是整个JAVA的核心,包括了Java运行环境JRE,一堆Java工具和Java基础的类库.通过JDK开发人员将源码文件(java文件)编译成字节码文件(class文 件 ...

  9. 快速排序--Python实现

    快速排序算法:1.选择一个基准数2.小于基准数的放左边,大于基准数的放右边3.利用递归的方法针对左边的数据进行快速排序,再对右边的数据进行快速排序4.递归停止的条件:数组为空或者只有一个元素 时间复杂 ...

  10. （转）poi操作Excel， 各种具体操作和解释

    原文地址http://hi.baidu.com/j_changhong/item/981fa58d05fa755926ebd96b注原文是3.6 此文是3.9 java读取excel文件的顺序是: E ...