div+css对网页进行布局
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对网页进行布局的更多相关文章
- DIV+CSS常用网页布局技巧！
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head> <meta charset="UT ...
- div+css的第一个布局
---恢复内容开始--- 这个东西说难也不难,但也要详细思虑一番: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...
- 用DIV+CSS做网页里要设置body和*规定内容
body{}表示是对body标签的设置,就是<html><head></head><body></body></html> 里面 ...
- div+CSS实现页面的布局要点记录
1.页面任何控件可以通过div包装为一个模块,然后通过margin(外补丁)和padding(内补丁)对控件位置的摆放进行控制,以实现想要的效果. 2.position:absolute;对控件实现绝 ...
- Photoshop图象切片保存为网页HTML（DIV+CSS布局）的方法
首先,制作图象切片(以一张图片为例子) 一.选择“切片”工具,在图像上拖动以分割图像(例如:一张图像切割2次就形成3个切片)切片后如下图 二.设置切片选项(如大小.目标链接.图片说明等等):选择“切片 ...
- IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势
标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...
随机推荐
- nth_element函数
使用方法:nth_element(start, start+n, end) 使第n大元素处于第n位置(从0开始,其位置是下标为n的元素),并且比这个元素小的元素都排在这个元素之前,比这个元素大的元素都 ...
- Level DB 小调研
一. 概况: 1. 背景: 随着信息技术的高速发展,数据存储量和流量呈现爆炸式增长.目前百度统计日 PV(日点击量)已超过 75 亿次,中国网民在百度上进行50 亿次的搜索请求,百度贴吧日 PV 十亿 ...
- linux 两个进程通过 共享内存 通信例子
例子1:两个进程通过共享内存通信,一个进程向共享内存中写入数据,另一个进程从共享内存中读出数据 文件1 创建进程1,实现功能,打印共享内存中的数据 #include <stdio.h> # ...
- 批量Ping执行Bash脚本
#!/bin/bash # Ping Batch Script # 连接超时时间 TMOUT= # 最大线程数 MAX_THREAD= # 保留内存大小 MIN_MEM= # 默认ip配置,可通过 - ...
- 在windows server 2012中安装完oracle 11 client如何使用
1.首先要添加监听配置,这样才可以没有报错的连接上服务器,至于如何添加,请自行搜索. 2.打开SQL Plus连接oracle server端,这里因为是小白,看到命令行界面上来就需要输入用户名密码 ...
- 最基础知识 sql之left join、right join、inner join的区别
sql之left join.right join.inner join的区别 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括 ...
- Apache Tomcat下载、安装、环境变量配置以及项目部署
前言 针对在本地访问文件或资源出现的跨域问题,可以通过搭建本地服务器来解决,本篇随笔主要介绍通过搭建Apache Tomcat服务器来解决跨域.包括Apache Tomcat的下载.安装.环境变量的配 ...
- 使用Git 上传文件到云端（版本库）
第一步:本地初始化Git版本库 git init 第二步:链接码云(云端) git remote add orgin "你的远程仓库地址"(复制链接后结尾是.git,如果没有记得加 ...
- VS 解决方案
//1.如果你的VS用到了环境变量,你在更改了环境变量路径后需要重启VS
- DIV内容超出固定宽度部分用省略号代替
方法一:CSS控制溢出文本 只针对DIV单行数据展示 /** DIV文本超出宽度部分用...替换,鼠标移上显示全部 **/ .textAuto{overflow:hidden;text-overfl ...