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. idea springboot 打包 war

    1.pom文件中将项目改为   war

  2. WAMP中的mysql设置密码(默认密码为空)及phpmyadmin的配置

    来自:  http://wenku.baidu.com/link?url=J4K28e1kt-_ykJLsOtS1b5T6hKj5IzL5hXSKIiB133AvPCUXLlxGKScsBsxi0mA ...

  3. Spring接收数据，传递数据

    Spring接收数据,传递数据 前提配置 POM   <dependency> <groupId>org.springframework</groupId> < ...

  4. springmvc Cacheable

    直接上代码: <cache:annotation-driven /> <bean id="cacheManager" class="org.spring ...

  5. linux 下格式化命令小记

    mkfs.ext4 /dev/sda1    # 格式化为ext4分区mkfs.ext3 /dev/sda1    # 格式化为ext3分区mkfs.ext2 /dev/sda1    # 格式化为e ...

  6. Homestead 安装其它的PHP版本

    运行环境: 系统: win10 软件: virtualbox 6.2 vagrant 2.2.4 homestead 7.1.0 sudo apt-get update sudo apt-get -y ...

  7. java内省Introspector

    大纲: JavaBean 规范 内省 一.JavaBean 规范 JavaBean —般需遵循以下规范. 实现 java.io.Serializable 接口. javaBean属性是具有getter ...

  8. Linux 系统分区与目录介绍

    分区 分区类型 主分区:总共最多只能分四个 扩展分区: 只能有一个,也算作主分区的一种,也就是说主分区加扩展分区最多有四个. 但是扩展分区不能存储数据和格式化,必须再划分成逻辑分区才能使用. 逻辑分区 ...

  9. Go 程序开发的注意事项

    Go 程序开发的注意事项    1) Go 源文件以 "go" 为扩展名.    2) Go 应用程序的执行入口是 main()函数. 这个是和其它编程语言(比如 java/c)  ...

  10. 暑假集训test-8-30

    这套题有毒,T1标程挂了,T2题面完全莫名其妙,T3没有告诉取模害我打了好久高精... A题. 统计每个数后面比它小的数的个数记作f把,操作一个数就是把它后面所有比它小的数和它的f清0,然后若是它到它 ...