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. 汇编 MOV -2

    知识点:  MOV指令  基址  内联汇编  把OD附加到资源管理器右键菜单 一.MOV指令 aaa=0x889977;//MOV DWORD PTR DS:[0x403018],0x8899 ...

  2. Windows下的Anaconda+OpenCV的环境配置

    Windows下的Anaconda+OpenCV的环境配置

  3. Elasticsearch Java Rest Client API 整理总结 (一)——Document API

    目录 引言 概述 High REST Client 起步 兼容性 Java Doc 地址 Maven 配置 依赖 初始化 文档 API Index API GET API Exists API Del ...

  4. flask-login 整合 pyjwt + json 简易flask框架

    现在很多框架都实现前后端分离,主要为了适应以下几个目的: 1,前后端的分离,可以使前端开发和后端开发更加分工明确,而不是后端还需要在视图模板中加入很多{% XXXX %}标签 2,是为了适应跨域调用或 ...

  5. Hexo站点之域名配置【2】

    该系列博客列表请访问:http://www.cnblogs.com/penglei-it/category/934299.html 摘要 因为Hexo个人博客是托管在github之上,每次访问都要使用 ...

  6. Ubuntu 开机自动启动

    # 开机启动 2018-12-13在etc目录下建立loraserver.sh文件,[**注意**:设置脚本的运行属性]其内容为 #!/bin/bash cd /home/zqkj/loraserve ...

  7. 安装loadrunner11出现Microsoft Visual c++2005 sp1安装失败

    本文转至别处,网上大神多

  8. C++ 继承和派生介绍

    继承(inheritance)是软件重用的一种方式,程序员通过继承可以吸收已有类的数据和行为来创建新类,并可以添加新的数据和行为来增强类的功能.创建新类时,并不需要创建全新的数据和成员函数,我们可以指 ...

  9. 互评Final版本——可以低头，但没必要——取件帮

    基于NABCD评论作品,及改进建议 1.根据(不限于)NABCD评论作品的选题; (1)N(Need,需求) 当今大部分在校学生由于各种原因懒于亲自去取快递,而总麻烦身边人也不是长久之计.而有些同学需 ...

  10. 【Beta阶段】第三次Scrum Meeting！

    每日任务内容: 本次会议为第三次Scrum Meeting会议~ 由于本次会议项目经理召开时间依旧较晚(晚上12点半),所以在公寓7层召开,女生参与了线上会议,召开时间大家集会10分钟. 队员 昨日完 ...