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. EM相关两个算法 k-mean算法和混合高斯模型

    转自http://www.cnblogs.com/jerrylead/archive/2011/04/06/2006924.html http://www.cnblogs.com/jerrylead/ ...

  2. 5-vim-工作模式-02-工作模式切换演练

    1.末行模式 命令 英文 功能 :   进入末行模式 w write 保存 q quit 退出,如果没有保存,不允许退出 q! quit 强行退出,不保存退出 wq write&quit 保存 ...

  3. 长度为x的本质不同的串的出现次数 SPOJ - NSUBSTR 后缀自动机简单应用

    题意: 长度为x的本质不同的串的出现次数 题解: 先处理出每一个节点所对应的子串出现的次数 然后取max就好了 #include <set> #include <map> #i ...

  4. JS切换

    这个效果就跟换肤效果差不多 需要准备两套或两套以上的css <!DOCTYPE html> <html lang="en"> <head> &l ...

  5. 《提高c++性能的编程技术》读书笔记

    一个程序的执行效率是取决于改程序翻译成汇编语言之后的执行的机器指令的条数.而每一个机器指令的执行的周期是一定的.C语言和C++都是高于汇编语言的高级语言,其中,C语言源代码与其相应的机器指不是完全同一 ...

  6. Kotlin Doc

    { https://www.runoob.com/kotlin/kotlin-eclipse-setup.html }

  7. Android 防止切换横屏闪退

    <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="ht ...

  8. HMaster高可用

    1.确保HBase集群已正常停止 $ bin/stop-hbase.sh 2.在conf目录下创建backup-masters文件 $ touch conf/backup-masters 3.在bac ...

  9. 双目立体匹配经典算法之Semi-Global Matching（SGM）概述：代价聚合（Cost Aggregation）

      由于代价计算步骤只考虑了局部的相关性,对噪声非常敏感,无法直接用来计算最优视差,所以SGM算法通过代价聚合步骤,使聚合后的代价值能够更准确的反应像素之间的相关性,如图1所示.聚合后的新的代价值保存 ...

  10. idea和eclipse快捷键对比(转)

    分类 功能点 Eclipse快捷键 IDEA快捷键 搜索 搜索文本 Ctrl + F Ctrl + F Ctrl + R 查找替换 Alt + P/A 逐个/全部替换 Alt + F3 查找当前选中词 ...