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

下载本文档

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

文档简介

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元素article元素代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。<article><header> <h2>第一章</h2></header></article>例HTML5新增文档结构元素盒子模型section元素section元素用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成。不要将section元素用作设置样式的页面容器，那是div的特性。如果article元素、aside元素或nav元素更符合使用条件，那么不要使用section元素。没有标题的内容区块不要使用section元素定义。HTML5新增文档结构元素盒子模型nav元素nav元素用于定义导航链接，该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。<nav><ul><li><ahref="#">首页</li><li><ahref="#">公司概况</li><li><ahref="#">产品展示</li><li><ahref="#">联系我们</li></ul></nav>例HTML5新增文档结构元素盒子模型aside元素aside元素用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。被包含在article元素内作为主要内容的附属信息。在article元素之外使用，作为页面或站点全局的附属信息部分。HTML5新增文档结构元素盒子模型footer元素footer元素用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容。<article> 文章内容 <footer> 文章分页列表 </footer></article><footer> 页面底部</footer>例HTML5新增文档结构元素盒子模型<header>页面头部header区域</header><divclass="main"><nav>左侧导航nav区域</nav><section><header>主要内容区块顶部header区域</header><article>独立内容article区域</article><footer>主要内容区块底部footer区域</footer></section><aside>侧边栏aside区域</aside></div><footer>页面底部footer区域</footer>例动手实践demo9制作“媒体播放器按钮”页面课后

实践盒子模型HTMLCSS感谢观看HTMLCSS项目6浮动和定位网页制作案例教程（HTML5+CSS3）教学目标理解熟悉掌握掌握2熟悉清除浮动的方法，可以使用不同方法清除浮动。3掌握元素的定位方法。会使用浮动和定位进行多样化页面布局。4理解元素的浮动，能为元素设置浮动效果。11设置浮动效果2清除浮动3元素的定位4制作环保网页任务分解PART0101设置浮动效果设置浮动效果网页中内容除了可以上下布局，还可以左右布局，或者上下左右混合布局。如图所示，总体是左右布局，左侧是课程名称等信息，右侧是学习人次等。右侧内容又分上下两部分，上面是学习人次、我的收藏和精选留言，下面是结束学习。使用浮动属性可以实现网页的灵活布局。设置浮动效果float属性基本语法格式选择器{float:none|left|right;}none：设置对象不浮动，none是默认值；left：设置左浮动，内容向左边对齐；right：设置右浮动，内容向右边对齐。.left{width:35%;

float:left;}例float属性用来设置浮动效果，从而实现灵活布局设置浮动效果动手实践demo1设置浮动效果<h2>郁金香花语</h2><divclass=team><divclass="item"><imgsrc="img/flower1.jpg"alt=""><h4>黄色郁金香</h4><p>黄色郁金香新鲜、明亮、充满活力，代表友谊、尊敬、祝福等</p></div><divclass="item"><imgsrc="img/flower2.jpg"alt=""><h4>粉色郁金香</h4><p>粉色郁金香温和、优雅，代表感谢、祝福、感恩、友情等</p></div><divclass="item"><imgsrc="img/flower3.jpg"alt=""><h4>橙色郁金香</h4><p>橙色郁金香代表永恒的爱和美好的回忆</p></div></div>h2{color:darkorange;text-align:center;}.team{margin:20pxauto;width:900px;}.item{float:left;width:290px;margin-right:10px;}.item>img{width:280px;border-radius:10px;}.itemh4{color:darkorange;margin:0;text-align:center;}.itemp{text-indent:2em;font-size:13px;text-align:left;}PART0202清除浮动浮动引起布局混乱问题设置浮动效果（float属性值为left或right）后，浮动元素不再占用原文档流的位置。父级元素因为子级元素浮动的原因内部高度值为0。如demo1中未设置浮动时，虽然父盒子<divclass="team">没有设置高度，但他被子元素撑开，高度是三个子盒子<divclass="item">的高度和，设置浮动后，父盒子高度为0。父盒子高度为0，父盒子后面的元素会向上移动，出现布局混乱布。为了解决这个问题，需要清除浮动。设置浮动效果动手实践demo2<style>*{box-sizing:border-box;}.main,.footer{ width:900px; margin:0auto;}.main{background-color:#f1f1f1;}.footer{ background-color:#0373b9; padding:30px10px; }.left,.right{ border:1pxsolid#e1e1e1; padding:30px10px;}.left{ width:28%; float:left;}.right{ width:70%; float:right;}</style><divclass="main"><divclass="left"> 左侧栏目导航</div><divclass="right"> 右侧主要内容</div></div><divclass="footer"> 版权内容</div>元素的浮动clear属性none:允许两边都可以有浮动对象，none是默认值；both：不允许有浮动对象；left：不允许左边有浮动对象；right：不允许右边有浮动对象。基本语法格式选择器{clear:none|left|right|both;}.clear{

clear:left;}例clear属性可以用来清除浮动元素对当前元素的所产生的影响清除浮动的方法额外标签法是指在浮动元素后面添加空标记，并对空标记应用“clear:both|left|right”样式。空标记可以是<div>等任何标记。方法一可以在demo2中浮动元素后面添加<divclass=”clear”></div>在<style>标签中添加类clear（.clear{clear:both;}）。额外标签法清除浮动的方法父级添加overflow属性方法是指给浮动元素的父级元素添加“overflow:hidden”样式。方法二使用父级添加overflow属性法清除浮动可以在demo2中的main类中添加“overflow:hidden;”代码。父级添加overflow属性方法清除浮动的方法使用after伪元素方法是指给浮动元素的父级元素添加after伪元素，并设置其height、content、display、visibility和clear属性。方法三可以在demo2中的浮动元素父盒子中再添加一个类（类名自定义，比如clearfix)，然后在<style>标签中添加.clearfix:after和.clearfix的样式使用after伪元素方法PART0303元素的定位元素的定位基本语法格式选择器{position：static|relative|absolute|fixed;}static：静态定位，默认的定位方式relative：相对定位，可以使用top，right，bottom，left属性以原位置为参考进行定位。absolute：绝对定位，可以使用top，right，bottom，left属性以定位的父盒子为参考进行定位。fixed：固定定位，可以使用top，right，bottom，left属性以窗口为参考进行定位，当出现滚动条时，对象不会随着滚动。.logo{position:absolute;top:10px;left:5px}例通过元素的定位属性position可以设置元素的精确位置元素的定位相对

定位基本语法格式选择器{position：relative;}元素的定位动手实践demo3<divclass="main"><divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div></div>.main{width:300px;background-color:#f1f1f1;padding:10px;}.box1,.box2,.box3{width:90%;height:30px;margin:10px;background-color:aqua;}.box2{position:relative;top:100px;left:30px;}元素的定位相对定位的元素可以对其设置偏移值。相对于自己的原来位置进行偏移元素偏移后其原位置仍然保留。元素的定位绝对

定位基本语法格式选择器{position：absolute;}元素的定位动手实践demo4<divclass="item"><imgsrc="img/flower.jpg"alt=""width="260px"><divclass="description"><h4>韩式系列/温柔以待</h4><p>花语：温柔的人，都是人间宝</p></div></div>*{margin:0;padding:0;}.item{width:260px;height:280px;position:relative;}.description{

background-color:rgba(160,160,200,.3);

width:260px;text-align:center;padding:10px0;color:#663366;position:absolute;

bottom:0;}.descriptionp{font-size:13px;padding-top:5px;}元素的定位绝对定位的元素脱离了正常文档流。可以对绝对定位元素设置偏移值。绝对定位的元素的位置是相对于离元素最近的已定位（不包含默认定位）的父元素。如果无已定位的父元素,则相对于整个文档（html）定位。已定位元素指设置了position值为relative或者absolute或者fixed的元素元素的定位固定

定位基本语法格式选择器{position：fixed;}使用固定定位的元素无论如何滚动浏览器窗口，元素的位置在窗口中都是固定不变的。元素的定位动手实践demo5<divclass="top">头部</div><divclass="content">主要内容</div><divclass="bottom">底部</div><divclass="to-top"><imgsrc="img/top.png"alt=""></div>.top,.content,.bottom{width:1000px;margin:5pxauto;}.content{height:700px;background-color:#f1f1f1;}.top,.bottom{height:100px;background-color:#3d94e5;}.to-top{height:73px;width:73px;position:fixed;right:10px;bottom:100px;}元素的定位固定定位的元素脱离了正常文档流。可以对固定定位元素设置偏移值。固定定位的元素的位置是相对于相对于浏览器窗口的位置。PART0404制作环保网页绿色是生命的象征、大自然的底色，更是美好生活的基础。近百年来人类行为已经引发了严重的生态危机。如今，环保问题已经引起了人们的重视。保护环境人人有责，下面我们制作一个环保网站首页，传播环境保护意识。制作环保网页制作环保网页<!--Beginheader--><header><nav></nav><divclass="banner"></div></header><!--Endheader--><!--Beginsection-><section></section><!--Endsection--><!--Beginfooter--><footer></footer><!--Endfooter-->网页整体布局制作环保网页*{margin:0;padding:0;list-style-type:none;outline:0;border:0;}body{font-size:15px;line-height:24px;background:#F8FAFF;font-family:"微软雅黑",Arial,sans-serif;color:#333;}a{text-decoration:none;color:#1bbd9b;}.clear{clear:both;}.center{text-align:center;}CSS基础样式设置制作环保网页<head><metacharset="UTF-8"><title>环保网</title><linkrel="stylesheet"href="css/style.css"></head>链接外部样式制作环保网页<header><nav>

<ul>

<liclass="logo"><imgsrc="img/logo.png"alt=""></li><liclass="active"><ahref="index.html"class="active">首页</a></li><li>

<ahref="about.html">环保动态</a>

</li><li><ahref="blog.html">环境监测</a></li><li><ahref="team.html">智慧环保</a></li><li><ahref="team.html">新能源</a></li><li><ahref="contact.html">联系我们</a>

</li></ul>

<divclass="clear"></div></nav><divclass="banner"></div></header>header部分内容制作环保网页header{width:10

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

温馨提示

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

最新文档

评论

0/150

提交评论