网页制作案例教程HTML5+CSS3 课件 项目5 盒子模型_第1页
网页制作案例教程HTML5+CSS3 课件 项目5 盒子模型_第2页
网页制作案例教程HTML5+CSS3 课件 项目5 盒子模型_第3页
网页制作案例教程HTML5+CSS3 课件 项目5 盒子模型_第4页
网页制作案例教程HTML5+CSS3 课件 项目5 盒子模型_第5页
已阅读5页，还剩53页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML5CSS3项目5盒子模型网页制作案例教程（HTML5+CSS3）教学目标理解盒子模型，并能运用其相关属性1理解熟悉熟悉掌握2熟悉行内元素、块元素和行内块元素3掌握盒子模型的使用，能够使用盒子模型进行简单的页面布局。熟悉表格元素和HTML5页面文档结构。41认识盒子模型2盒子模型常用的属性3行内元素、块元素和行内块元素4CSS3新增盒子样式任务分解5案例：制作“四有青年”网页7HTML5新增文档结构元素6基本表格元素01认识盒子模型PART01认识盒子模型盒子模型：是把HTML页面中的元素看作是一个矩形的盒子。由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。盒子模型盒子模型认识盒子模型margin：外边距，边框外的区域，盒子之间的距离。border：边框，围绕在内边距和内容外的边框。padding：内边距，内容和边框之间的区域。content：盒子的内容，如显示文本和图像。盒子模型不同部分的说明元素的浮动div

盒子基本语法格式<div>盒子内容</div>设置浮动效果动手实践demo1div{width:200px;height:100px;border:15pxsolidblue;

margin:30px;padding:20px;background-color:#ccc;font-size:20px;}<body><div>设置盒子的内容</div>认识盒子模型

其实所有HTML元素都可以看作盒子p{

width:300px;

border:25pxsolidgreen;

padding:25px;

margin:25px;}<body><p>盒子内容</p></body>盒子模型元素p例认识盒子模型盒子模型盒子的高度与宽度盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和

width

左内边距

右内边距边框

右外边距

边框02盒子模型常用的属性PART02盒子模型常用的属性盒子模型border基本语法格式border：边框样式

边框宽度边框颜色边框样式

：none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线边框宽度：像素值

如：1px边框颜色：颜色值、#十六进制、rgb(r,g,b)；<style>.set{border:5pxsolid#00ff;width:20%;}</style><divclass="set">设定边框</div>例border用来设置盒子边框盒子模型常用的属性盒子模型边框属性属性描述border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式。border-width简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。border-color简写属性，设置元素的所有边框中可见部分的颜色，或为4个边分别设置颜色。border-bottom简写属性，用于把下边框的所有属性设置到一个声明中。border-bottom-color设置元素的下边框的颜色。border-bottom-style设置元素的下边框的样式。border-bottom-width设置元素的下边框的宽度。border-left简写属性，用于把左边框的所有属性设置到一个声明中。border-left-color设置元素的左边框的颜色。border-left-style设置元素的左边框的样式。border-left-width设置元素的左边框的宽度。border-right简写属性，用于把右边框的所有属性设置到一个声明中。border-right-color设置元素的右边框的颜色。border-right-style设置元素的右边框的样式。border-right-width设置元素的右边框的宽度。border-top简写属性，用于把上边框的所有属性设置到一个声明中。border-top-color设置元素的上边框的颜色。border-top-style设置元素的上边框的样式。border-top-width设置元素的上边框的宽度。盒子模型常用的属性盒子模型border-style语法格式border-style：样式值{1，4};

.one{border-style:solid;}.two{border-style:soliddouble;}.three{border-style:soliddoubledotted;}.four{border-style:soliddoubledotteddashed;}例盒子模型常用的属性盒子模型margin语法格式margin：外边距值{1，4};定义元素周围的空间,可以有一个值，两个值，三个值和四个值；也可以四个外边距分别设置margin-bottom 设置元素的下外边距。margin-left 设置元素的左外边距。margin-right 设置元素的右外边距。margin-top 设置元素的上外边距。margin:20px50px75px100px;//上、右、下、左外边距分别为20px、50px、70px、100pxmargin:25px50px75px;//上边距为25px,左右边距为50px,下边距为75pxmargin:25px50px;//上、下外边距为20px；左右外边距为50pxmargin:20px;//上、下、左、右外边距均为20px例margin用来设置外边距盒子模型常用的属性盒子模型盒子居中#box1{ width：400px； border：1pxsolidblack; margin:5pxauto/*利用margin实现块元素水平居中，并且上下拉开5像素边距*/}例当对块级元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中，实际工作中常用这种方式进行网页布局。盒子模型常用的属性盒子模型<styletype="text/css">#box1{height:100px;width:100px;border:1pxsolidblack;margin:0auto;}</style></head><body><divid="box1"></div></body>例动手实践demo2盒子模型常用的属性盒子模型padding语法格式padding：内边距值{1，4};定义元素边框与元素内容之间的空间，即上下左右的内边距。可以有一个值，两个值，三个值和四个值；也可以四个内边距分别设置padding-bottom 设置元素的下内边距。padding-left 设置元素的左内边距。padding-right 设置元素的右内边距。padding-top 设置元素的上内边距。padding:20px50px75px100px;padding:20px50px75px；padding:20px50px;padding:20px;例padding用来设置内边距，控制内容与边框之间的距离盒子模型常用的属性盒子模型语法格式background-color:背景颜色background-colorp{background-color:#ccc;}例background-color用来设置盒子的背景颜色盒子模型常用的属性盒子模型语法格式background-image:背景图像background-imagep{background-color:#CCC;background-image:url(img/book.jpg);}例设置盒子背景图像例background-image是用来设置盒子的背景图像盒子模型常用的属性盒子模型语法格式background-repeat：图像平铺属性background-repeat设置背景图像平铺默认情况下，背景图像会自动向水平和竖直两个方向平铺。如果不希望背景图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制。例平铺属性值含义repeat沿水平和竖直两个方向平铺（默认值）no-repeat不平铺（图像位于元素的左上角，只显示一次）repeat-x只沿水平方向平铺repeat-y只沿竖直方向平铺盒子模型常用的属性盒子模型语法格式background-position：图像位置值1[,图像位置值2]background-position设置背景图像位置。例该属性提供2个参数值。第一个用于横坐标，第二个用于纵坐标。如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。横坐标值可以为像素值、百分比、left、center、right。纵坐标值可以为像素值、百分比、top、center、bottom。body{background-image:url(img/bg.jpg)；background-repeat:no-repeat;background-position:centerbottom;}例盒子模型常用的属性盒子模型语法格式background-attachment：图像固定属性background-attachment设置背景图像固定例固定属性取值含义scroll图像随页面元素一起滚动（默认值）。fixed图像固定在屏幕上，不随页面元素滚动。body{background-image:url(img/bg.jpg)；background-attachment:fixed;}例盒子模型常用的属性盒子模型语法格式background-size:属性值1属性值2;background-size设置背景图像大小例属性值说

明像素值设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto；百分比以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto；cover把背景图像扩展至足够大，使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中；contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域；盒子模型常用的属性盒子模型多重背景图像background-image:url(images/tupian1.png),url(images/tupian2.png),url(images/tianpian3.png);例在CSS3中，通过background-image、background-repeat、background-position和background-size等属性提供多个属性值可以实现多重背景图像效果，各属性值之间用逗号隔开。盒子模型常用的属性盒子模型<style>div{height:600px;width:600px;border:1pxsolidblack;background-image:url(img/tupian1.jpg),url(img/66.jpg),url(img/JL.png);background-repeat:no-repeat;background-position:lefttop,leftbottom,righttop;text-align:center; }</style><body><div>设置多重背景图像</div></body>例动手实践demo303行内元素、块元素和行内块元素PART03行内元素、块元素和行内块元素盒子模型行内元素：仅靠自身的字体大小和图像尺寸来支撑结构；不占有独立的区域；一般不可以设置宽度、高度、对齐等属性。行内元素常见的行内元素有<strong>、<b>、<del>、<s>、<ins>、<em>、<i>、<u>、<a>、<span>等，其中<span>标记是最典型的行内元素。例行内元素、块元素和行内块元素盒子模型块元素：在页面中以区域块的形式出现；每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性。块元素常见的块元素有<p>、<div>、<h1>~<h6>、<ul>、<ol>、<li>等，其中<div>标记是最典型的块元素。例行内元素、块元素和行内块元素盒子模型行内块元素：一行可存在多个行内块元素，但它们之间存在空隙；可以设置width、height、padding以及margin值，宽度默认随文本内容变化。行内块元素有常见的行内块元素有：<img>、<input>等。例行内元素、块元素和行内块元素盒子模型display属性：可以对元素的类型进行转换，其属性值为：inline、block、inline-block、nonedisplay属性inline：代表此元素为行内元素，不独占一行，不可以设置高度和宽度；block：代表此元素为块元素，独占一行，可以设置高度和宽度；inline-block：代表此元素为行内块元素，可以对其设置高度和宽度，并且此元素不会独占一行；none：此元素将会被隐藏，不占用页面空间，也不显示。例行内元素、块元素和行内块元素盒子模型<styletype="text/css">div,span{ width:200px; height:50px; background:rgb(204,247,255); margin:10px;}.div_one{display:inline;}.div_two{display:inline-block;}.span_three{display:block;}</style><body><divclass="div_one">第一个div中的内容</div><divclass="div_two">第二个div中的内容</div><divclass="div_three">第三个div中的内容</div><spanclass="span_one">第一个span中的内容</span><spanclass="span_two">第二个span中的内容</span><spanclass="span_three">第三个span中的内容</span></body>例动手实践demo404CSS3新增盒子样式PART04CSS3新增盒子样式盒子模型圆角边框语法格式Border-radius：参数值1{1，4}[/参数值2{1,4}];半径参数为像素值或百分比例#box1{width：100px;height:100px;border:2pxsolidred;border-radius:50%;}例行内元素、块元素和行内块元素盒子模型<styletype="text/css">li{list-style:none;margin:10px000;padding:10px;background:#ccc;}.test.one{border-radius:10px20px;}.test.two{border-radius:10px20px30px;}.test.three{border-radius:30px/5px;}</style><body><ulclass="test"><liclass="one">2个参数<br/>border-radius:10px20px;</li><liclass="two">3个参数<br/>border-radius:10px20px30px;</li><liclass="three">水平和垂直半径不同<br/>border-radius:30px/5px;</li></ul></body>例动手实践demo5CSS3新增盒子样式盒子模型盒子阴影语法格式box-shadow：水平偏移垂直偏移模糊半径扩展半径颜色值阴影类型;半径参数为像素值或百分比例img{ padding:20px; border:1pxsolid#ccc;

border-radius:50%； box-shadow:5px5px10px2px#999inset;}例行内元素、块元素和行内块元素盒子模型<styletype="text/css">img{ padding:20px; border-radius:50%; border:1pxsolid#ccc; box-shadow:5px5px10px2px#999inset; }</style><body><imgclass="border"src="img/bg1.png"/></body>例动手实践demo6CSS3新增盒子样式盒子模型渐变背景线性渐变(lineargradients):颜色向下、向上、向左、向右等方向变化。例CSS3中增了颜色的渐变(gradients)能力，可以实现在两个或多个指定的颜色之间平稳过渡。一共定义了两种类型的渐变。径向渐变(radialgradients):颜色由渐变的中心向周围变化。例CSS3新增盒子样式盒子模型线性渐变语法格式background-image:linear-gradient(渐变方向，渐变颜色节点);background-image:linear-gradient(totop,#ffffff,#ff0000);background-image:linear-gradient(0deg,#ffffff,#ff0000);background-image:linear-gradient(toright,#ffffff,#ff0000,#ffff00);例渐变方向：向下/向上/向左/向右/对角方向渐变颜色节点：1~n个，1为初始颜色值，n为结束颜色值。CSS3新增盒子样式盒子模型径向渐变语法格式background-image:radial-gradient([渐变形状],[渐变大小],[渐变位置],[渐变颜色]);background-image:radial-gradient(circleatcenter,red,#b4a078,green);background-image:radial-gradient(circleatlefttop,red,#b4a078,green);background-image:radial-gradient(farthest-sideat60%55%,blue,green,yellow,black);例渐变形状值为：ellipse

或circle渐变大小：指定径向渐变的半径长度渐变位置：水平方向值垂直方向值渐变颜色：1~n个，1为初始颜色值，n为结束颜色值。行内元素、块元素和行内块元素盒子模型<styletype="text/css">#liner{width:500px;height:100px;line-height:100px;padding:5px;text-align:center;font-size:20px;margin:20px;color:#ffffff;background-image:linear-gradient(toleft,#555,#ff0);}#radial{width:300px;height:300px;border-radius:50%;line-height:300px;text-align:center;font-size:20px;margin:20px;color:black;background-image:radial-gradient(circle,#ff0,#555);}</style><body><divid="liner">设置一个div元素渐变背景</div><divid="radial">设置一个div元素渐变背景</div></body>例动手实践demo705制作“四有青年”网页PART05制作“四有青年”网页盒子模型青年是整个社会力量中最积极、最有生气的力量，国家的希望在青年，民族的未来在青年。中国青年始终是实现中华民族伟大复兴的先锋力量，我们立志成为有理想、有道德、有文化有纪律的四有青年，为人民作贡献，为祖国作贡献，为人类作贡献。下面我们来制作网页“四有青年”，制作“四有青年”网页盒子模型h2标记：居中，背景色红色，字体大小2em，行高2em，字体颜色白色h3标记：居中，背景色红色，字体大小1.5em，行高1.5em，字体颜色白色,宽200px,margin（10px0）p标记：字体大小1.2em，行高1.5emdiv盒子div盒子盒子.box1：背景白色，宽80%，高80%，margin（0auto）盒子#main：背景图，宽1000px，高600px，padding（40px0）盒子.box2：padding:40px06表格元素PART06表格元素盒子模型表格元素网页中有时使用表格展示结构化数据。一个表格包含若干行，每一行又包含若干列，表格列称为单元格。表格的标签为<table>表格标题的标签为<caption>表格行标签为<tr>标题单元格标签为<th>普通单元格标签为<td>行内元素、块元素和行内块元素盒子模型<tableborder="2"cellpadding="20"cellspacing="5"bgcolor="#eeeeee"><caption>期末考试成绩单</caption><tr><th>姓名</th><th>物理</th><th>化学</th><th>数学</th><th>总分</th></tr><tr><th>张三</th><td>32</td><td>17</td><td>14</td><td>63</td></tr><tr><th>李四</th><td>28</td><td>16</td><td>15</td><td>59</td></tr><tr><th>王五</th><td>26</td><td>22</td><td>12</td><td>60</td></tr></table>例动手实践demo807HTML5新增文档结构元素PART07HTML5新增文档结构元素盒子模型文档结构元素为了更好的表达HTML文档和语义，HTML5新增了许多用于表达文档结构方面的元素，主要有header、article、section、nav、aside和footer等元素。HTML5新增文档结构元素盒子模型header元素header元素是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。<header><h1>网页主题</h1> ...</header>例HTML5新增文档结构元素盒子模型article元素arti

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论