html5 盒子模型案例

CSS 文件

/* *通配符 对所有的标签进行设置*/
*{

margin: 0px;
padding: 0px;

}
.top{

width: 100%;
height: 50px;
background-color: black;

}
.top_content{

width: 75%;
height: 50px;
margin: 0px auto;
background-color: blue;
}
.body{

margin: 20px auto;
width:75%;
height: 1500px;
background-color: yellow;

}
.body_img{

width: 100%;
height: 400px;
background-color: darkorange;
}
.body_content
{
width: 100%;
height: 1050px;
background: blue;
}
.body_no{

width: 100%;
height: 50px;
background: green;

}
.footing{

width: 75%;
height: 300px;
background: indigo;
margin: 0px auto;

}

.footing_content{

width: 100%;
height: 230px;
background-color: green;

}
.footing_subnav{
width: 100%;
height: 70px;
background: black;

}

HTML 文件

<div class="top">
<div class="top_content">
</div>
</div>
<div class="body">
<div class="body_img"></div>
<div class="body_no"></div>
<div class="body_content"></div>
</div>
<div>
<div class="footing">
<div class="footing_content"></div>
<div class="footing_subnav"></div>
</div>

</div>

</body>

</html>

时间: 2024-10-13 16:07:18

html5 盒子模型案例的相关文章

HTML5盒子模型。

盒子模型. 盒子由 margin.border.padding.content 四部分组成. margin :外边距 border:边框 padding:内边距 (内容与边框的距离) content:内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&g

css笔记16:盒子模型的入门案例

1.案例一: 效果图如下: (1)box1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

HTML学习笔记 w3sCss盒子模型(阴影)(div的一些使用)案例 第十节 (原创) 参考使用表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>W3sCSS盒子模型</title> <!--其实就是div加css样式设计出一些逻辑页面--> <link rel="stylesheet" href="tzy.css" type="te

看书《DIV+CSS商业案例与网页布局开发精讲》_盒子模型、制作logo和banner_随手笔记

一.盒子模型(box model) 一个盒子又4部分组成:content(内容).padding(填充).border(边框)和margin(外边界) 盒子模型有两种: (1)标准W3C盒子模型 (2)IE盒子模型(content包含padding和border) 为了统一标准,让网页能兼容各个浏览器,必须使用标准W3C盒子模型 如何才算使用?答:在网页的顶部加上DOCTYPE声明 二.盒子模型结构详解 1.CSS边框(border)属性 border有3个属性:border-width(宽度)

IT兄弟连 HTML5教程 使用盒子模型的浮动布局

虽然使用绝对定位可以实现页面布局,但由于调整某个盒子模型时其他盒子模型的位置并不会跟着改变,所以并不是布局的首选方式.而使用浮动的盒子模型可以向左或向右移动,直到它的外边缘碰到包含它的盒子模型边框或另一个浮动盒子模型的边框为止.并且由于浮动的盒子模型不在文档的普通流中,所以文档的普通流中的盒子模型表现得就像浮动的盒子模型不存在一样. 1  设置浮动 在CSS中,我们通过float属性实现盒子区块框向左或向右浮动.其实任何元素都可以浮动,而浮动元素会生成一个块级框,而不论它本身是何种元素.但浮动的

这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)

这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置.设置背景.数据列表) 这些HTML.CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作.构建表单) 这些HTML.CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作.代码编写规则)

(5)css盒子模型

CSS 盒子模型概述 ***什么是CSS的盒子模型呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).边框(border).内边距(padding).外边距(margin), CSS盒子模型都具备这些属性. ***属性我们可以把它转移到我们日常生活中的盒子(箱子)来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模型. 盒子模型是css控制页面是一个很重要的概念. 所有网页的页面中的元素都可以看成是一个盒子,占据着一定的页面空间. 一

HTML文档与盒子模型

关于HTML 百度百科里是这么说的:超文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言. 为什么叫用于"描述"网页文档的"标记"语言呢? 简单地说,它不像Java,C++等程式语言,而是通过标记(也称标签)来表示一个网页的结构与内容,它的语法非常简单,只是由各种不同的标记组合而成,因此这类语言的学习方式主要靠积累,而非程式语言般靠理解来学习. HTML的构成HTML文件的结构通常由以下几个部分构成: 文

(6)css盒子模型(基础下)

一.理解多个盒子模型之间的相互关系 现在大部分的网页都是很复杂的,原因是一个“给人用的”网页中是可能存在着大量的盒子,并且它们以各种关系相互影响着. html与DOM的关系 详情了解“DOM” :http://baike.baidu.com/link?url=SeSj8sRDE-JZnTdkIQgh-P2nEMvoYdvis19aXaGJrMVCQCV_r3mA1kJ7vaCam4wpPLAsQ9T3WyhRfbP4Bdi6yrZolr5_bf7sLtTeFOWDMBu DOM 是 Docume