中职 网页设计与制作案例教程第12章_第1页
中职 网页设计与制作案例教程第12章_第2页
中职 网页设计与制作案例教程第12章_第3页
中职 网页设计与制作案例教程第12章_第4页
中职 网页设计与制作案例教程第12章_第5页
已阅读5页，还剩27页未读， 继续免费阅读

下载本文档

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

文档简介

中职网页设计与制作案例教程第12章工信版第12章CSS定位布局312.1基础项目1：制作“精品购物网”首页12.2知识库：定位的原理及应用技巧12.3提高项目：制作“会当凌绝顶—小说投稿”

网页12.4拓展项目：制作“创意照片墙”网页目录412.1基础项目：制作“精品购物网”首页5（1）了解position属性和CSS定位的类型，掌握相对定位与绝对定位的区别。（2）掌握left、right、top和bottom属性的作用。（3）掌握z-index属性的作用。（4）了解visibility属性的作用。（5）能对整个页面进行HTML结构设计。（6）能利用定位法对页面元素进行定位。知识技能目标12.1基础项目：制作“精品购物网”首页6首页结构设计12.1.1对页面进行整体布局7首页结构设计12.1.1对页面进行整体布局812.1.2制作主体内容区912.1.3制作侧边导航栏1012.2知识库：

定位的原理及应用技巧定位是通过CSS中的position属性来确定元素在网页上的位置。通过定位属性可以设置一些不规则的布局。12.2.1CSS定位属性属性描述position把元素放置到一个静态的、相对的、绝对的、或固定的位置中。top定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。right定义了定位元素右外边距边界与其包含块右边界之间的偏移。bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移。left定义了定位元素左外边距边界与其包含块左边界之间的偏移。overflow设置当元素的内容溢出其区域时发生的事情。clip设置元素的形状。元素被剪入这个形状之中，然后显示出来。vertical-align设置元素的垂直对齐方式。z-index设置元素的堆叠顺序。12.2.1CSS定位属性top、right、bottom和left这4个属性都是配合position属性使用的，只有当将position属性设置为absolute、relative或fixed才有效，否则没有任何意义。12.2.1CSS定位属性

position的属性值值描述relative生成相对定位元素，该元素相对于其正常位置进行定位。元素框偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留。其偏移的距离通过left、top、right及bottom属性设定。absolute生成绝对定位元素，该元素相对于最近的已定位的祖先元素进行定位。元素框从文档流完全删除，元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。元素的位置通过left、top、right及bottom属性设定。fixed生成绝对定位元素，该元素相对于浏览器窗口进行定位。元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。元素的位置通过left、top、right及bottom属性设定。static默认值，没有定位，元素出现在正常流中。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中。忽略left、top、right、bottom或z-index声明。12.2.1CSS定位属性在定位过程中要注意left、top、right和bottom属性只需要定义两个，水平方向：left或right，垂直方向top或bottom，即X轴与Y轴两点确定位置，不能4个属性同时设置。12.2.2相对定位元素的位置相对于它在标准流中的位置。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。12.2.2相对定位<html><head><styletype="text/css">p{width:200px;height:50px;background-color:aqua;}.p1{position:relative;left:-20px;}.p2{position:relative;left:20px;}</style></head><body><p>相对定位测试</p><pclass="p1">相对于正常位置向左移动20px</p><pclass="p2">相对于正常位置向右移动20px</p></body></html>12.2.2相对定位在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素可能会导致它覆盖其它框。所以单独使用相对定位的时候比较少，通常是结合绝对定位法使用，即将相对定位元素作为绝对定位的祖先元素使用。相对定位后，元素仍保持其未定位前的形状。12.2.2相对定位<html><head><styletype="text/css">p{width:100px;height:100px;background-color:aqua;}span{width:200px;height:200px;background-color:red;}/*.sp1{position:relative;left:30px;top:-30px;}*/</style></head><body><p>相对定位测试</p><spanclass="sp1">相对定位测试span1</span><span>相对定位测试</span></body></html>12.2.3绝对定位绝对定位使元素的位置与文档流无关，因此不占据空间。

——不同于相对定位绝对定位元素的位置相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。在绝对定位中，标准流中其他元素的布局就像绝对定位的元素不存在一样。元素绝对定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。12.2.3绝对定位<html><head><styletype="text/css">p{width:200px;height:200px;background-color:aqua;}span{width:200px;height:200px;background-color:red;}/*.sp1{position:absolute;left:30px;top:30px;}*/</style></head><body><p>绝对定位测试</p><spanclass="sp1">绝对定位测试标签span1</span><span>绝对定位测试对比span标签</span></body></html>12.2.4元素的堆叠顺序、溢出和剪裁1．元素的堆叠顺序因为绝对定位元素的框与标准流无关，所以它们有可能覆盖页面上的其它元素。可以通过设置z-index属性来控制这些框的堆叠顺序。z-index属性只能应用于使用了绝对定位的元素，其值为整数，可以是正数也可以是负数，默认值为0，数值越高堆叠顺序越高。12.2.4元素的堆叠顺序、溢出和剪裁1．元素的堆叠顺序<html><head><styletype="text/css">span{display:inline-block;width:200px;height:200px;}.sp1{background-color:aqua;}.sp2{background-color:red;}.sp3{background-color:blue;}</style></head><body><spanclass="sp1">元素的堆叠顺序sp1</span><spanclass="sp2">元素的堆叠顺序sp2</span><spanclass="sp3">元素的堆叠顺序sp3</span></body></html>12.2.4元素的堆叠顺序、溢出和剪裁1．元素的堆叠顺序.sp2{position:absolute;left:30px;top:20px;background-color:red;}12.2.4元素的堆叠顺序、溢出和剪裁1．元素的堆叠顺序.sp2{position:absolute;left:30px;top:20px;z-index:-1;background-color:red;}12.2.4元素的堆叠顺序、溢出和剪裁2．元素的溢出overflow属性用来规定当内容溢出元素框时如何处理，常用的属性值见下表值描述visible默认值。内容不会被修剪，会呈现在元素框之外。hidden元素框之外的内容会被修剪，修剪掉的内容不显示。scroll元素框之外的内容会被修剪，但是浏览器会显示滚动条以便查看修剪掉的内容。auto让浏览器自动处理被修剪掉的内容，通常会显示滚动条以便查看。inherit规定应该从父元素继承overflow属性的值。12.2.4元素的堆叠顺序、溢出和剪裁2．元素的溢出<html><head><styletype="text/css">div{background-color:#0FF;width:150px;height:150px;overflow:scroll;}</style></head><body><div>这个属性定义溢出元素内容区的内容会如何处理。如果值为scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。</div></body></html>12.2.4元素的堆叠顺序、溢出和剪裁2．元素的溢出<html><head><styletype="text/css">div{background-color:#0FF;width:150px;height:150px;

overflow:hidden;}</style></head><body><div>这个属性定义溢出元素内容区的内容会如何处理。如果值为scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。</div></body></html>12.2.4元素的堆叠顺序、溢出和剪裁3．元素的裁剪clip属性用来剪裁绝对定位元素，它可以为元素块定义一个矩形裁剪框，裁剪框之内的区域显示，之外的区域不显示（或根据overflow的属性值来处理）。clip属性的基本语法为：clip:rect(top,right,bottom,left);12.2.4元素的堆叠顺序、溢出和剪裁3．元素的裁剪<html><head><styletype="text/css">div{float:left;}.clipimg{position:absolute;left:200px;top:0px;clip:rect(24px,226px,207px,11

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

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

最新文档

评论

0/150

提交评论