《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块9 使用DIV+CSS布局页面_第1页
《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块9 使用DIV+CSS布局页面_第2页
《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块9 使用DIV+CSS布局页面_第3页
《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块9 使用DIV+CSS布局页面_第4页
《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块9 使用DIV+CSS布局页面_第5页
已阅读5页，还剩20页未读， 继续免费阅读

下载本文档

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

文档简介

模块九使用DIV+CSS布局页面《HTML5+CSS3任务驱动教程》目录任务一任务二任务三网页中的图文混排网页中的全图排版多行多列式布局本模块任务安排：任务描述任务1网页中的图文混排在现代网页中，纯文字的网页显得过于单调，为吸引用户浏览，通常在文字中会插入适当的相关图片，以更好地展现要表达的意思。在传统的表格式布局中，往往通过插入一个表格，再在表格中插入图片，并对表格应用align属性来控制图片居中、居左还是居右来显示。而本任务中利用块状元素的盒子模型特性，应用CSS块状元素的更多属性，实现更多图文混排效果。任务1浏览效果如图9-1所示。引入知识点任务1网页中的图文混排9.1CSS盒子模型9.2CSS浮动与定位任务1网页中的图文混排9.1CSS盒模型任务1网页中的图文混排9.1CSS盒模型1．外边框margin可以单独改变元素的上、下、左、右边距（顺时针）。也可以一次改变所有的属性。外边距设置属性有margin、margin-top、margin-bottom、margin-right、margin-left。2．边框元素外边距内就是元素的边框（border）,每个边框有3个方面：宽度、样式，以及颜色。常用的边框属性有7项:border-top（上边框）、border-right（有边框）、border-bottom（下边框）、border-left（左边框）、border-width（边框宽度）、border-color（边框颜色）、border-style（边框样式）。其中border-width可以一次性设置所有的边框宽度，border-color同时设置四面边框的颜色时，可以连续写上4种颜色，并用空格分隔。上述连续设置的边框都是按border-top、border-right、border-bottom、border-left的顺序（顺时针）。任务1网页中的图文混排9.1CSS盒模型3．内边距元素的内边距在边框和内容区之间为paddingpadding属性与外边距类似，格式也大致相同，可以单独设置四内边距，也可使用padding一次性设置4．CSS3圆角在CSS3之前，要实现圆角的效果主要通过图片辅助实现，实现起来不是很方便，使用CSS3的border-radius很方便实现圆角边框，但要注意部分旧版本的浏览器不直接CSS3的属性border-radius和前面介绍的border的参数个数和用法基本相同任务1网页中的图文混排9.2CSS浮动与定位float是CSS样式中的布局属性，float属性的left和right值分别能够让元素向左和向右浮动。比如当元素向左浮动之后，对象的右侧将清空出一块区域，以便让剩下的文档元素能够贴在右侧。利用这个特性可以方便地设计出需要的块状元素排版布局效果。元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用clear属性。clear属性指定元素两侧不能出现浮动元素，主要有三个属性值：both、left、right，分别表示清除两边的浮动、清除元素左边的浮动、清除元素右边的浮动。

采用position:absolute;之后，对象便开始进行绝对定位，绝对定位主要通过设置对象的top、right、bottom和left四个方向的边距值来实现。一旦对象被设置绝对定位，它就完全脱离了文档流与浮动模型，独立于其他对象而存在

使用position:relative;进行相对定位，通过left和top来设置偏离原来位置左侧和上侧的距离。任务1网页中的图文混排任务实现（1）创建一个HTML5页面，使用合适的标记对网站内容进行结构定义；（2）根据CSS盒子模型原理对网页进行布局设置，对图片进行合适的定位，在编写CSS代码之前先将需要用到的图片保存于网站目录中的images文件文件夹中，本项目主要采用类选择器、后代选择器（也可使用子元素选择器）编写出CSS代码；（3）使用内部样式表的形式将所写CSS应用于该网页。任务描述任务2网页中的全图排版网页中全是图片的排版布局也不少见，图片排版常被用在相册类、产品展示类的网页中，这类页面往往有大量的图片在同一页中进行展示，使用CSS布局进行全图排版的核心在于，对浮动定位的控制，并且具有较好的灵活性。对于具有相同尺寸的图片进行排版，用CSS进行浮动定位是比较好控制的，若对于各个图片的尺寸规格不相同的图片进行直接排版，也可以采用流式布局，使图片错落排列。网站的图片新闻，采用了相同大小的图片，此时只需要设置好一张图片的样式，其他图片用相同的元素进行设置并产生浮动即可，外层元素的整体宽度也很容易通过盒模型计算得知。引入知识点任务2网页中的全图排版9.3CSS背景控制任务2网页中的全图排版9.3CSS背景控制任务2网页中的全图排版9.3CSS背景控制background:#f09url(bg.png)repeat-xfixed20px40px;任务2网页中的全图排版任务实现（1）在DreamweaverCC中创建一个空白HTML5页面，在标题处输入“校园风光”，保存为index.html。选用<div>标记对页面进行整理布局，给<div>标记设置一个类layout，选用无序列表ul对图片进行结构定义，每一个列表项中包含图片和段落文字，HTML代码如下：<divclass="layout"> <h2>美丽校园</h2> <ul> <li><imgsrc="images/hu.png"/><p>湖相依、楼相伴</p></li> <li><imgsrc="images/huguang.jpg"/><p>湖光倒影</p></li> <li><imgsrc="images/biyezhao.jpg"/><p>毕业照</p></li> <li><imgsrc="images/kongzi.png"/><p>孔子像</p></li> <li><imgsrc="images/menlou.png"/><p>学校正门门楼</p></li> <li><imgsrc="images/qiao.png"/><p>创新桥</p></li> <li><imgsrc="images/shiguang.jpg"/><p>快乐时光</p></li> <li><imgsrc="images/xiaoyuan.jpg"/><p>美丽校园</p></li> <li><imgsrc="images/yundonghui.jpg"/><p>运动会</p></li> </ul></div>任务2网页中的全图排版任务实现（2）为显示更加直观，本任务选用内部样式表的方式编写CSS代码，直接在<head>中写入<style>标记来编写CSS，首先编写CSSReset可以清除一些标记的特性，如ul、li的边距等，然后编写布局元素layout类，主要是给它固定宽度，水平方向居中对齐。注意：根据之前介绍的盒模型原理，此时layout的宽度应该等于一个li占据的宽度，再乘以3即可，layout的width=(图片宽度270px+左右外边距20px+li左右边框2px)*3=876px。（3）给图片固定大小为，宽度为270px，高度为160px。并给li标记进行向左浮动，即可让元素共处同一行，当每显示完3个li元素后，剩余的没有空间显示，自动会进入下一行显示。（4）给<h2>标题内容设置图标进行视觉美化。因此时的图片并不是网页的内容，只是显示效果的辅助，因此此时给<h2>设置背景图像为宜，并且不平铺，加入背景后要让背景显示在文字的左侧，此时应给<h2>标记添加一些填充留白，以为背景让出摆放的位置。然后给背景图片进行适当的定位，使之显示到合适的位置。最后给元素添加一些边框、字体等属性，CSS代码如下：任务2网页中的全图排版任务实现<style> ul,li{ margin:0;padding:0;list-style:none; } .layout{ width:876px; margin:20pxauto; } .layouth2{ background:url(images/titlebj.jpg)no-repeatleftcenter; line-height:2em; padding-left:66px; font-family:MicrosoftYahei; border-bottom:solid#31C4F91px; letter-spacing:0.8em; } .layoutli{ float:left; border:solid1px#DEF4FC; margin:10px; text-align:center; } .layoutliimg{ width:270px; height:160px; }任务2网页中的全图排版最终效果任务描述任务3多行多列式布局PC上的网站元素越来越多，为使各元素美观大方的呈现出来，通过需要对页面进行排版。通常采用多行或多列的方式去复杂页面进行整体布局，从而使内容井然有序。本任务通过实现如图9-11所示的多行多列排版布局效果，来学习CSS的背景定位、图标管理及代码优化等知识。引入知识点任务3多行多列式布局9.4CSS代码优化任务3多行多列式布局9.4CSS代码优化1、网页中的小图标管理网页中的小图标通常是UI设计师为提升网页美观度而添加的网页元素，通常是一种视觉设计上的美化，一般设计得比较小巧精细，完成此部分的网页效果时，通常使用背景图片进行背景定位来辅助完成。通常会将这些小图标收集起来，用图像处理工具添加在一张图片上，并有明确的尺寸，需要用到各个小图标时，再进行精确定位即可定位到指定的图标了。任务3多行多列式布局9.4CSS代码优化2、增加CSS代码重用率主要的代码的改进方法是使用群组选择器，将大部分的公共代码进行集合在群组中，同时也可以使用CSS覆盖，得到代码的重用3、容器高度不扩展的问题在制作CSS网页过程中，在默认情况下，容器的高度默认情况下，会随着容器的内容进行自动扩展，但在CSS布局中常常会碰到容器不扩展的问题。可以在子容器的最末处添加了一个清除浮动的div容器<divclass="clear"></div>任务3多行多列式布局任务实现（1）创建HTML文件，添加一个固定宽度、页面居中的主容器<div>标记，作为全页的框架，其class为content。（2）仔细观察任务效果图，最外层的主容器是固定宽度的，再确定容器中整体的布局结构。本任务可采用两种不同的方式布局，第一种可以采用三列式、固定宽度的布局，再在每一列中分成多行；第二种可以采用右侧方块固定，左侧4个方块固定宽度并自由浮动的布局。（3）在content所在div中，添加5个<div>标记，并分别设置类名称为service、about、info、resource、news，为优化代码，将5个方块的公共代码抽出来，放入box类中，主要包括边框、浮动等属性，完成div布局元素的HTML代码（4）创建CSS样式表，为类选择器设置相关布局属性进行定位，其CSS样式代码如下：.content{width:990px;margin:0auto;padding:10px025px0;background:#fff;}.box{float:left;border:solid1px#e9e9e9;}.service{width:238px;height:233px;}.about{width:488px;height:233px;margin:010px;}.news{width:238px;height:428px;float:right;}.info{width:238px;height:183px;margin:10px010px0;}.resource{width:488px;height:183px;margin:10px;}任务3多行多列式布局任务实现（5）接下来完成每个盒子公共部分的效果，主要体现在标题栏基本相同，此处采用图标管理，将图标放在一张图片上，设置相同的背景图片，主要的CSS代码如下：/*每个盒子公共部分的CSS*/.box{float:left;border:solid1px#e9e9e9;}.box.top{height:32px;position:relative;border-bottom:solid1px#9ab1b8;}.box.toph2{width:70px;height:15px;margin:10px000;padding:00035px;border-right:solid1px#7c

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

温馨提示

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

最新文档

评论

0/150

提交评论