div+css感觉很简单，可是真正做起来一些小细节把握不好，这个网页的布局也是完成不了的。今天学习了一些技巧方法现在分享下：

即一个原则，网页由一个个的大盒子组成，一个个的大盒子里面装着一个个的小盒子。先衡量好大盒子的尺寸，才好确定小盒子的大小。

大盒子包含小盒子，大的盒子必须又小的盒子组成，一个模块不能只有小盒子，要由大盒子来包装。所以先设定大盒子的宽度，高度可以设置，也可以不设置，再设置小盒子的具体信息。

1.现在的网页布局都是采用盒子模型，即网页由一个个div来构成的，div包含着很多div。所以我们通常来设计的话就是先将网页的整体布局设计好，然后再向里面填充内容。

比如整个页面我们需要装在一个大的div容器中：

这个容器中包含了页面的：topdiv容器，maindiv容器，bottomdiv容器。

这其中就涉及到技巧了：topdiv容器中假设一般包含了logo的位置，导航条的位置。这两个就是在topdiv容器中的两个小的div部分。

　　　　　　　　　　　maindiv容器假设包含了main的左边设置，右边设置，中间设置。这三个也是maindiv的容器的三个小的div部分。

整个网页就是由着三个大的容器部分组成。这里的技巧就是：我们需要对每个大的容器（即topdiv/maindiv/bottomdiv）进行宽度的设置。然后对每个小的div(logo,导航条div)进行宽度和高度以及其他的设置，否则布局会出现问题

浮动是针对的div块，所以这里设置float是对大的div里面的小的div的浮动设置。

2、第二个技巧就是网页的居中问题，这里为了保证浏览器的兼容性，通常采用的方法是这样子的；

在每个大div（比如topdiv）外面再设置一个div（top的上级div即toptopdiv）。对这个toptopdiv进行设置：将其宽度设置为100%，即整个网页。对topdiv进行设置：margin：auto。这样子就可以居中了。这样子虽然比较繁琐，但是兼容性好些。

比如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sohu.html</title>
<link rel="stylesheet" type="text/css" href="sohu.css">
</head>
<body>
<div id="divcontainer">
<div id="topp">
<div id="top">
<div class="logo"></div>
<div class="top_left">
<div class="nav"></div>
<div class="bar"></div>
</div>
</div>
</div>
<div id="mainmain">
<div id="main">
<div class="main_left"></div>
<div class="main_mid1">
<div class="mid1_top"></div>
<div class="mid1_mid"></div>
<div class="mid1_bottom"></div>
</div>
<div class="main_mid2">
<div class="mid2_left"></div>
<div class="mid2_right"></div>
</div>

<div class="main_right">
<img src="">
</div>

</div>
</div>

</div>

</body>
</html>

css模式：

body{

margin:auto;
}
#topp{
width: 100%;
height: 100px;
}
#top{
width: 1000px;
margin: auto;
height: 100px;
}

.logo{
background-color:red;
float: left;
width: 200px;
height:100px;

}
.nav{
float: right;
width: 790px;
height: 30px;
background-color: green;
}
.bar{
float: right;
width: 790px;
height:70px;
background-color: blue
}
#mainmain{
width: 100%;
}
#main{
width: 1000px;
margin:auto;

}
.main_left{
float: left;
width:200px;
height:400px;
background-color: pink;
margin-top:20px;
}
.main_mid1{
float: left;
width: 450px;

}
.mid1_top{
float: left;
width:450px;
height:100px;
background-color: green;
margin-left: 10px;
margin-top: 20px;
}
.mid1_mid{
float: left;
width:450px;
height:200px;
background-color:pink;
margin-left: 10px;

}
.mid1_bottom{
float: left;
width:450px;
height:100px;
background-color:blue;
margin-left: 10px;
}
.main_mid2{
float: left;
width: 150px;
margin-left: 20px;

}
.mid2_left{
width: 100px;
height: 400px;
background-color:red;
margin-top: 20px;
float: left;
}
.mid2_right{
width: 50px;
height: 400px;
background-color:blue;
margin-top: 20px;
float: left;

}
.main_right{
float: left;
width: 160px;
height: 400px;
margin-top: 20px;
margin-left: 10px;
background-color: green;
}

div+css感悟的更多相关文章

  1. 前端之DIV+CSS布局

    刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...

  2. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  3. div+css页面右侧底部悬浮层

    效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  4. DIV+CSS规范命名大全

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  5. DIV+CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

  6. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  7. DIV+CSS布局网站基本框架

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  8. DIV+CSS常用的网页布局代码

    单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...

  9. div+css实例教程

    DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离. 对于初学者来说,可能比较模糊不熟悉.毕竟,样式布局需要通 ...

随机推荐

  1. python 回溯法 子集树模板 系列 —— 10、m着色问题

    问题 图的m-着色判定问题 给定无向连通图G和m种不同的颜色.用这些颜色为图G的各顶点着色,每个顶点着一种颜色,是否有一种着色法使G中任意相邻的2个顶点着不同颜色? 图的m-着色优化问题 若一个图最少 ...

  2. Node总结 模块机制

    1. Node中的模块分为两类.一个是node提供的模块,称为核心模块,如http, fs, path:另一类是用户编写的模块,称为文件模块. 2. require()方法接收一个标识符进行模块查找. ...

  3. C++ STL 学习笔记__(8)map和multimap容器

    10.2.9 Map和multimap容器 map/multimap的简介 ²  map是标准的关联式容器,一个map是一个键值对序列,即(key,value)对.它提供基于key的快速检索能力. ² ...

  4. JAVA eclipse Maven项目红叹号解决方案

    我是通过 Windows --> show view --> problems 查看到发现 ch.qos.logback 1.1.1 出现了错误, 于是我换成了 ch.qos.logbac ...

  5. SQL Server 全文搜索

    SQL Server 的全文搜索(Full-Text Search)是基于分词的文本检索功能,依赖于全文索引.全文索引不同于传统的平衡树(B-Tree)索引和列存储索引,它是由数据表构成的,称作倒转索 ...

  6. BaseProxy:异步http/https中间人

    BaseProxy 异步http/https代理,可拦截并修改报文,可以作为中间人工具.仅支持py3.5+.项目地址:BaseProxy. 意义 BaseProxy项目的本意是为了使HTTP/HTTP ...

  7. C++ 派生类构造函数和析构函数

    几个问题 一个类的各数据成员的构造顺序? 按他们在类定义中出现的先后顺序:先定义者先构造. 类的对象成员的构造函数与类自身的构造函数的执行顺序? 先执行对象成员的构造函数,再执行类自身的构造函数. 构 ...

  8. C# 词频统计 东北师范大学 软件项目管理 第一次作业

    一.作为杨老师的学生第一次听杨老师讲课,印象最深的就是:工程中所有步骤之间是乘法,如果任何一步为0,工程就做不出来了.以前所有老师讲到的都是不要太在乎结果,努力的过程很重要,但是这在软件工程中不合适了 ...

  9. Linux第二章读书笔记

    1.获取内核源码 1.1Git 分布式的:下载和管理Linux内核源代码: - 获取最新提交到版本树的一个副本 $ git clone git://git.kernel.org/pub/scm/lin ...

  10. Linux内核分析 笔记二 操作系统是如何工作的 ——by王玥

    一.知识要点 1.计算机是如何工作的?(总结)——三个法宝 存储程序计算机工作模型,计算机系统最最基础性的逻辑结构: 函数调用堆栈,高级语言得以运行的基础,只有机器语言和汇编语言的时候堆栈机制对于计算 ...