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. Java虚拟机笔记（五）：JVM中对象的分代

    为什么要分代 为什么需要把堆分代?不分代不能完成他所做的事情么?其实不分代完全可以,分代的唯一理由就是优化GC性能.你先想想,如果没有分代,那我们所有的对象都在一块,GC的时候我们要找到哪些对象没用, ...

  2. PowerBI开发 第十四篇：使用M公式添加列

    PowerBI的查询编辑器使用Power Query M公式语言来定义查询模型,它是一种富有表现力的数据糅合(Mashup)语言,一个M查询可以计算(Evalute)一个表达式,得到一个值. 对于开发 ...

  3. stl源码剖析 详细学习笔记 配接器

    //---------------------------15/04/03---------------------------- /* 配接器概述: 1:adapter是一种设计模式:将一个clas ...

  4. Monkey稳定性测试

    1.环境准备:Android SDK环境配置 2.手机连接/模拟器连接 : 1)手机打开开发者模式并允许USB连接 2)校验手机是否连接:打开cmd 输入 adb devices 3.查找apk包名及 ...

  5. SICP读书笔记 1.1

    SICP CONCLUSION 让我们举起杯,祝福那些将他们的思想镶嵌在重重括号之间的Lisp程序员 ! 祝我能够突破层层代码,找到住在里计算机的神灵! 目录 1. 构造过程抽象 2. 构造数据抽象 ...

  6. TCP三路握手，本质是一个通信原理相关的问题

    在通信系统中,最基本的信息的传递都需要两步,发送方发送的消息和对方的回复确认:A->B Send, B->A Reply(ACK).如果多接触一下其他行业的通信流程和规范,例如航空.铁路调 ...

  7. Top 10 Javascript MVC 框架

    在网上偶然看到了,几种MVC框架各有优缺点,但Backbone和Ember的呼声相对更高-大家参考一下哈- http://codebrief.com/2012/01/the-top-10-javasc ...

  8. Linux内核分析— —计算机是如何工作的（20135213林涵锦）

    实验部分 (以下命令为实验楼64位Linux虚拟机环境下适用,32位Linux环境可能会稍有不同) 使用 gcc –S –o main.s main.c -m32 命令编译成汇编代码, int g(i ...

  9. DPDK环境搭建及Helloworld样例

    配置虚拟机环境 多张网卡,一张网卡是无法运行DPDK的,至少要两张. 多核CPU,可以在实现多个DPDK逻辑调度核lcore. DPDK依赖参考:http://www.cnblogs.com/vanc ...

  10. 第二个spring冲刺第3天

    今天天气突然变得很冷,所以我们队的人都有少许的不适.加上天气比较冷,我们都不怎么想做.幸好在队长的提醒下,我们终于继续投入研发的工作中.由于市面上的同类软件的数量不少所以我们下载了一些来看,希望能找到 ...