CSS：CSS+DIV布局网页
现代网页布局：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布局网页的更多相关文章
- CSS加DIV布局
第一种: <div> <div class="right"> <p></p> <p></p> <p&g ...
- 前端学习笔记2017.6.12 DIV布局网页
DIV的功能就是把网页划分成逻辑块的. 看下豆瓣东西页面的布局,我们来分析下. 按照先从上到下的原则,把这个页面分成几个块: 首先是最顶端的这个条,这是一个DIV,我们给它起个名字,叫banner 然 ...
- DIV布局之道三：DIV块的覆盖，DIV层遮盖其他DIV
DIV布局网页的第三种方式:覆盖.DIV覆盖方式经常应用于网页弹出框的制作,例如在网店系统中,当用户没有登录时,点击购买,系统弹出一个登陆框. 请看代码: HTML部分: XML/HTML Code复 ...
- DIV布局之道一：DIV块的水平并排、垂直并排
DIV布局网页元素的方式主要有三种:平铺(并排).嵌套.覆盖(遮挡).本文先讲解平铺(并排)方式. 1.垂直平铺(垂直排列) 请看如下代码 CSS部分: CSS Code复制内容到剪贴板 .lay1{ ...
- SEO为什么要求网页设计师用DIV+CSS布局网页?
问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...
- 网页布局 CSS实现DIV并列等高
同事去笔试遇到的问题 要求3列div根据内容的变化通过css实现等高 效果图: 原理: 同列的div设置一个父级 overflow:hidden 超出部分隐藏 给同列的div设置css margin- ...
- 采用 DIV+CSS 布局网页练习
实验四:采用 DIV+CSS 布局网页练习 实验目的: 熟悉 DIV+CSS 布局网页的方法 实验要求: 1.制作一个完整网页和一个 css 文件: 2.在网页中采用 DIV+CSS 布局 4 个以上 ...
- H5学习小结——div+css创建电子商务静态网页
使用Sublime Text软件编写电子商务类网站静态形式首页 经过差不多一星期的学习,基本掌握了div+css的用法之后,开始了实战练习.首先要做的就是要练习一下一般电子商务网页的编写,我做的是下图 ...
- 一、HTML和CSS基础--网页布局--网页布局基础
W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...
随机推荐
- 基于vue2.0的后管系统（配置篇）
一些项目依赖package.json { "name": "frontend", "description": "tssp bas ...
- 浅谈css中浮动和清除浮动带来的影响
有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...
- python生成随机数据插入mysql
import random as r import pymysql first=('张','王','李','赵','金','艾','单','龚','钱','周','吴','郑','孔','曺','严' ...
- C++ 字符串基本操作
C++ 规定,不能直接进行数组名的赋值,因为数组名是一个常量,而结构类型的变量可以赋值,不同结构体的变量不允许相互赋值,即使这两个变量可能具有相同的成员.在程序中不能同时出现无参构造函数和带有全部默认 ...
- 【转】Serializers 序列化组件
https://www.cnblogs.com/MayDayTime/p/9890582.html 为什么要用序列化组件 当我们做前后端分离的项目~~我们前后端交互一般都选择JSON数据格式,JSON ...
- thinkphp5.0URL访问
URL设计 ThinkPHP5.0在没有启用路由的情况下典型的URL访问规则是: http://serverName/index.php(或者其它应用入口文件)/模块/控制器/操作/[参数名/参数值. ...
- hihocoder 1497 Queen Attack
排序. 分别按照$x$,$y$以及对角线排序,统计一下方案数就可以了. #include<bits/stdc++.h> using namespace std; int n; struct ...
- Vue 2.0学习（五）v-bind及class与style绑定
DOM元素经常会动态地绑定一些class类名或style样式. 基本用法 <div id="app"> <a v-bind:href="url" ...
- POJ 1498[二分匹配——最小顶点覆盖]
题目链接:[http://acm.hdu.edu.cn/showproblem.php?pid=1498] 题意:给出一个大小为n*n(0<n<100)的矩阵,矩阵中放入m种颜色(标号为1 ...
- uoj22 【UR #1】外星人
link 题意: 给一个长为n的序列a[],现在有一个初始值m,问一个1~n的排列p[],满足将m对a[p[i]]顺次取模后得到的值最大,输出最大值和方案数. $n,m\leq 5\times 10^ ...