现代网页布局：CSS+DIV：

　　一般的网页都是顺序布局的，很难达到我们需要的网页布局格式，此时使用DIV进行分层布局，类似于盒子，对每一部分内容进行设计。这是现在主流的网页布局方式，使用DIV+CSS。

CSS盒模型：

　　网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

　　CSS中， Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、内边距（padding）、边框（border） 和 外边距（margin） 的方式。在HTML文档中，每个元素（element）都有盒子模型，所以说在Web世界里（特别是页面布局），Box Model无处不在。下面是Box Model的图示：

解释：

内容：就是html的内容，在最内层

内边框padding：padding-top、padding-right、padding- bottom、padding-left

边框border: border-top、border-right、border-bottom、border- left

外边距margin：marging-top、margin-right、margin-bottom、margin-left

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距。

测试demo如下：

CSS_DIV.html

<!doctype html>

<html lang="zh-CN">

    <head>

        <meta charset="utf-8">

        <meta name="description" conent="this is an example">

        <meta name="keywords" conent="CSS,DIV">

        <title> CSS和DIV组合布局 </title>

        <link rel="stylesheet" type="text/css" href="CSS_DIV.css">

     </head>

     <body>

         <h1> CSS盒模型</h1>

         <hr>

         <div class="wraper">

             <div class="content">

                 <h2>这是一个测试</h2>

                 <h2>这是一个测试</h2>

                 <h2>这是一个测试</h2>

             </div>

        </div>

     </body>

</html>

CSS_DIV.css

h2{

    color:white;

    margin:;

}

.wraper{/*外层*/

    margin:auto;/*盒模型居中*/

    height: 500px;

    width: 500px;

    background-color: red;

    padding:20px;

}

.content{ /*内层*/

    height: 300px;

    width: 300px;

    background-color: blue;

    padding: 20px;

    border:solid 4px white;

    margin-top: 50px;

    padding-left: 50px;

}

效果图：

CSS：CSS+DIV布局网页的更多相关文章

  1. CSS加DIV布局

    第一种: <div> <div class="right"> <p></p> <p></p> <p&g ...

  2. 前端学习笔记2017.6.12 DIV布局网页

    DIV的功能就是把网页划分成逻辑块的. 看下豆瓣东西页面的布局,我们来分析下. 按照先从上到下的原则,把这个页面分成几个块: 首先是最顶端的这个条,这是一个DIV,我们给它起个名字,叫banner 然 ...

  3. DIV布局之道三：DIV块的覆盖，DIV层遮盖其他DIV

    DIV布局网页的第三种方式:覆盖.DIV覆盖方式经常应用于网页弹出框的制作,例如在网店系统中,当用户没有登录时,点击购买,系统弹出一个登陆框. 请看代码: HTML部分: XML/HTML Code复 ...

  4. DIV布局之道一：DIV块的水平并排、垂直并排

    DIV布局网页元素的方式主要有三种:平铺(并排).嵌套.覆盖(遮挡).本文先讲解平铺(并排)方式. 1.垂直平铺(垂直排列) 请看如下代码 CSS部分: CSS Code复制内容到剪贴板 .lay1{ ...

  5. SEO为什么要求网页设计师用DIV+CSS布局网页?

    问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...

  6. 网页布局 CSS实现DIV并列等高

    同事去笔试遇到的问题 要求3列div根据内容的变化通过css实现等高 效果图: 原理: 同列的div设置一个父级 overflow:hidden 超出部分隐藏 给同列的div设置css margin- ...

  7. 采用 DIV+CSS 布局网页练习

    实验四:采用 DIV+CSS 布局网页练习 实验目的: 熟悉 DIV+CSS 布局网页的方法 实验要求: 1.制作一个完整网页和一个 css 文件: 2.在网页中采用 DIV+CSS 布局 4 个以上 ...

  8. H5学习小结——div+css创建电子商务静态网页

    使用Sublime Text软件编写电子商务类网站静态形式首页 经过差不多一星期的学习,基本掌握了div+css的用法之后,开始了实战练习.首先要做的就是要练习一下一般电子商务网页的编写,我做的是下图 ...

  9. 一、HTML和CSS基础--网页布局--网页布局基础

    W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...

随机推荐

  1. 【PAT】1009. 说反话 (20)

    1009. 说反话 (20) 给定一句英语,要求你编写程序,将句中所有单词的顺序颠倒输出. 输入格式:测试输入包含一个测试用例,在一行内给出总长度不超过80的字符串.字符串由若干单词和若干空格组成,其 ...

  2. MFC+WinPcap编写一个嗅探器之零（目录）

    零零散散写了三天,完成了编写嗅探器的文章,旨在让自己加深印象,是初学者少走一些弯路.因为先前未接触MFC,之后也不打算精通,完全是0基础,所以文章技术含量不高,但难点基本上都都包括了,凑合这看吧,接下 ...

  3. python collection系列

    collection系列 不常用功能,需要进行模块功能导入: import collection Counter 常用方法测试: #!/usr/local/env python3 ''' Author ...

  4. 【C#】字段总结

    前沿: 字段(field)是一种数据成员,其中容纳了一个值类型的实例或者一个引用类型的引用. 正文: CLR支持类型(静态)字段和实例(非静态)字段.对于类型字段,用于容纳字段数据的动态内存是在类型对 ...

  5. 密码嗅探工具dsniff

    密码嗅探工具dsniff   网络大量的服务都使用密码方式对使用者身份进行认证.如果使用非加密的方式传输,一旦数据被截获,就容易被嗅探到.Kali Linux预置了一款专用的密码嗅探工具dsniff. ...

  6. 【BZOJ 4148】 4148: [AMPPZ2014]Pillars （乱搞）

    4148: [AMPPZ2014]Pillars Time Limit: 5 Sec  Memory Limit: 256 MBSec  Special JudgeSubmit: 100  Solve ...

  7. luoguP4206 [NOI2005]聪聪与可可 期望概率DP

    首先,分析一下这个猫和鼠 猫每局都可以追老鼠一步或者两步,但是除了最后的一步,肯定走两步快些.... 既然猫走的步数总是比老鼠多,那么它们的距离在逐渐缩小(如果这题只能走一步反而不能做了...) 猫不 ...

  8. [BZOJ4627][BeiJing2016]回转寿司(线段树)

    从左到右处理,设到当前数R的前缀和为cnt[i],则以i为右端点的合法的区间左端点j必然是L<=cnt[i]-cnt[j-1]<=R,即cnt[i]-R<=cnt[j-1]<= ...

  9. 不思议迷宫：逆向后的放置play

    前言 前置准备 目标分析 逆向加密逻辑 定位sign与key 解密luac 反编译luajit的bytecode 开启上帝模式 前言     看了fatezero的<阴阳师:一个非酋的逆向旅程& ...

  10. bzoj1954 The xor-longest path

    Description  给定一棵n个点的带权树,求树上最长的异或和路径 Input The input contains several test cases. The first line of ...