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. [清华集训2015 Day1]玛里苟斯-[线性基]

    Description Solution 考虑k=1的情况.假设所有数中,第i位为1的数的个数为x,则最后所有的子集异或结果中,第i位为1的个数为$(C_{k}^{1}+C_{k}^{3}+...)$ ...

  2. [arm学习]makefile学习总结

    makefile不仅仅是一个命令的集合体,其中有一些规则是需要理解掌握的. 首先,了解makefile的规则: //-----------格式---------- 目标 : 依赖1,依赖2 (TAP键 ...

  3. Centos7下vim的table键修改为4个空格

    1.要有root用户权限 2.已经安装vim 3.编辑/etc/vim/vimrc 文件,添加set ts=4 vim /etc/vimrc #按大写G到最后一行,添加set ts= set ts = ...

  4. [CF981F]Round Marriage[二分+霍尔定理]

    题意 洛谷 分析 参考了Icefox 首先二分,然后考虑霍尔定理判断是否有完美匹配.如果是序列的话,因为这里不会出现 \(j<i,L(i)<L(j)\) 或者 \(j<i,R(i)& ...

  5. 设计模式 笔记 解释器模式 Interpreter

    //---------------------------15/04/26---------------------------- //Interpreter 解释器模式----类行为型模式 /* 1 ...

  6. Js_网站右下角悬浮视窗可关闭广告

    站右下角悬浮视窗可关闭广告代码,可收缩.展开,关闭,内容区可自定义html,兼容IE8+.FireFox.Chrome.Safari等主流浏览器.广告图片尺寸300x250. 使用方法:在head区域 ...

  7. centos 7部署ELK

    一.ELK介绍 Elasticsearch 是基于 JSON 的分布式搜索和分析引擎,专为实现水平扩展.高可用和管理便捷性而设计.Logstash 是动态数据收集管道,拥有可扩展的插件生态系统,能够与 ...

  8. QTP_随机生成N个字符（包含数字和字母）

    '************************************************************* ' Name: GetRandomString ' Purpose: 随机 ...

  9. git 和 github 链接

    第一步  再电脑上安装git 请自行搜索   到你需要的一个目录下:例如/gittest 首先创建文件,然后  git  add  和 git commit  不然直接查看  git branch - ...

  10. Javascript中Base64编码解码的使用实例

    Javascript为我们提供了一个简单的方法来实现字符串的Base64编码和解码,分别是window.btoa()函数和window.atob()函数. 1 var encodedStr = win ...