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>

View Code

CSS_DIV.css

h2{color:white;margin: 0;
}.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;
}

View Code

效果图：

CSS：CSS+DIV布局网页相关推荐

Web前端：实现在一块区域（div）点击链接，在同一页面的指定区域显示链接的内容——基于css与div结合网页布局设计
1:效果: 初始: 点击首页: 点击个人主页 : 点击其他类似: 2:代码 (这里我只提供css文件和核心代码,链接内容不提供) 核心代码 <!DOCTYPE html> <html ...
CSS和div布局页面
CSS和div布局页面 CSS和div布局页面一.什么是布局网页布局页面元素定位机制二.布局属性浮动清除浮动定位绝对定位相对定位固定定位一.什么是布局网页实质是块与块之间的位置 ...
关于css加div布局和表格布局,菜鸟学习笔记:表格布局和div+css布局
网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局表格布局导航推荐文章一个猴子成长史你看个毛线我就瞅你咋地村里出了个半边天一个猴子的成长 ...
css中div布局学习（1）
看完慕课网中的div布局,简单记录一下里面的内容: 1.实现效果: 上面实现效果主要是考虑如何实现块元素居中的问题,关键代码: margin: 0 auto; 实现代码: <!DOCTYPE h ...
计算机创新课堂教案,广东省创新杯说课大赛计算机类一等奖作品：《DIV+CSS布局网页》教学设计方案...
<广东省创新杯说课大赛计算机类一等奖作品:<DIV+CSS布局网页>教学设计方案>由会员分享,可在线阅读,更多相关<广东省创新杯说课大赛计算机类一等奖作品:<DIV ...
一个初级前端结合css、div谈一谈屏幕尺寸、分辨率、缩放概念题
写在前面: 本文作为本人学习总结之用,同时分享给大家~ 个人前端博客网站:https://zhangqiang.hk.cn 欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学 ...
DIV布局之道一：DIV块的水平并排、垂直并排
DIV布局网页元素的方式主要有三种:平铺(并排).嵌套.覆盖(遮挡).本文先讲解平铺(并排)方式. 1.垂直平铺(垂直排列) 请看如下代码 CSS部分: CSS Code 复制内容到剪贴板 .lay1 ...
黑客内参告诉你一个：设计师用div+css 必须知道的网页布局类型
今天我在黑客内参受到了很多的留言,很多小伙伴在表示想要建立一个属于自己的站点,让我觉得现在建站是大部分人都比较感兴趣的一个技术吧! 碰巧今天整理以前的笔记发现了一本之前遗留下来的建站笔记,现在我就手打 ...
Divbrush 网页Div css画板定位布局系统 v1.8
Divbrush 网页Div css画板定位布局系统软件是一款专业制作DIV+CSS的切图与样式布局的网页前期设计软件. Divbrushv1.0基本上实现了可视化DIV容器布局的画板辅助功能,通过图 ...

CSS：CSS+DIV布局网页

CSS：CSS+DIV布局网页相关推荐

最新文章

热门文章