第7章用CSS设置图像和圆角_第1页
第7章用CSS设置图像和圆角_第2页
第7章用CSS设置图像和圆角_第3页
第7章用CSS设置图像和圆角_第4页
第7章用CSS设置图像和圆角_第5页
已阅读5页，还剩27页未读， 继续免费阅读

下载本文档

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

文档简介

第7章用CSS设置图像和圆角

本章简介：图片是网页中不可缺少的内容，它能使页面更加丰富多彩，能让人更直观地感受网页所要传达给浏览者的信息。本节详细介绍CSS设置图片风格样式的方法，包括图片的边框、对齐方式和图文混排等，并通过实例综合讲解文字和图片的各种运用。使用CSS可以方便地使用各种手段把页面灵活地分为多个部分。但是简单分割出来的都是矩形方框，设置背景颜色和边框的颜色，产生的都只能是单调的矩形方框。而在网页中，经常需要用到圆角的设计。

用CSS设置图像样式7.1用CSS设置背景样式7.2设置圆角效果7.37.1用CSS设置图像样式图片不仅能够增加网页的吸引力，同时也大大地提升了用户浏览网页的体验。图片的展示形式丰富多样，不同形式的图片展现也让浏览网页的乐趣变得更加多样化。作为单独的图片本身，它的很多属性可以直接在HTML中进行调整，但是通过CSS统一管理，不但可以更加精确地调整图片的各种属性，还可以实现很多特殊的效果。首先讲解用CSS设置图片基本属性的方法，为进一步深入探讨打下基础。7.1.1设置图片边框在HTML中可以直接通过<img>标记的border属性值为图片添加边框，属性值为边框的粗细，以像素为单位，从而控制边框的粗细。当设置该值为0时，则显示为没有边框。1．基本属性2．为不同的边框分别设置样式7.1.2设置多色边框在上述的案例中，使用borde-color属性为图像添加边框色，不过添加的都是单一颜色值。CSS3增强了该属性的功能，使它可以为边框添加更多的颜色，从而方便设计者设计渐变等绚丽的边框效果。border-color属性可以设置很多不同的值，从而对列边框设置不同的样式。边框渐变色显示边框立体效果7.1.3设置边框背景在CSS3之前，如果要添加图像边框，元素的长或宽是随时可变的，用户通常采用的做法是让元素的每条边单独使用一幅图像文件，但是这种做法也有缺点：一方面是比较麻烦；另一方面是页面上使用的元素比较多。针对这种情况，CSS3中增加了一个border-image属性，可以让处于随时变化状态的元素的长或宽的边框统一使用一个图像文件来绘制。边框背景图像在GoogleChrome浏览器中预览7.1.4设置各种边框效果使用border-image属性，制作对角圆角效果。圆角边框素材对角圆角7.1.4设置各种边框效果使用border-image属性，制作对角圆角效果。圆角边框素材对角圆角边框背景图像下方两个角为圆角效果7.1.4设置各种边框效果边框背景图像下方两个角为圆角效果7.1.4设置各种边框效果边框背景图像下方两个角为圆角效果使用边框图像也可以制作出阴影的效果，和前面相同，在制作之前，要先制作出带有阴影效果的图像。7.1.4设置各种边框效果边框背景图像圆角效果的选项卡我们在浏览网页时，会经常发现一些圆角效果的选项卡，这些选项卡如何制作呢？现在就比较方便了，可以使用边框图像属性来进行制作，和前面相同在制作之前，想制作一个圆角图像。7.1.5图片缩放CSS控制图片的大小与HTML一样，也是通过width和height两个属性来实现的。所不同的是CSS中可以使用更多的值，如上一章中“文字大小”一节提到的相对值和绝对值等。7.1.6图文混排Word中文字与图片有很多排版的方式，在网页中同样可以通过CSS设置实现各种图文混排的效果。本节介绍CSS图文混排的具体方法。1．文字环绕2．设置图片与文字的间距图片与文字的距离7.1.7制作八大行星科普网页实例本节通过具体实例，进一步讲解图文混排方法的使用，并把该方法运用到实际的网站制作中。本例以介绍太阳系的八大行星为题材，充分利用CSS图文混排的方法，实现页面效果。八大行星页面7.1.8设置图片与文字的对齐方式当图片与文字同时出现在页面上的时候，图片的对齐方式就显得很重要了。如何能够合理地将图片对齐到理想的位置，成为页面是否整体协调、统一的重要因素。1．横向对齐方式2．纵向对齐方式水平对齐图像与文字中间对齐7.2用CSS设置背景样式本节首先要介绍颜色的多种设置方法，之后介绍如何设置网页和文字的背景颜色，以及多种背景图片样式的设置方法。7.2.1设置背景颜色在HTML中，设置网页的背景颜色利用的是<body>标记中的bgcolor属性，而在CSS中不但可以设置网页的背景颜色，还可以设置文字的背景颜色。在CSS中，网页元素的背景颜色使用background-color属性来设置，属性值为某种颜色。颜色值的表示方法和前面介绍的文字颜色设置方法相同。网页的初始效果设置标题“绿底白字”效果7.2.2设置背景图像背景不仅可以设置为某种颜色，CSS中还可以用图像作为网页元素的背景，而且用途极为广泛。设置背景图像，使用background-image属性实现。准备一个背景图像文件页面的body元素设置了背景图像后的效果7.2.3设置背景图像平铺在默认情况下，图像会自动向水平和竖直两个方向平铺。如果不希望平铺，或者只希望沿着一个方向平铺，可以使用background-repeat属性来控制。渐变色构成的背景图像同时设置背景图像和背景颜色7.2.4设置多重背景图像background是CSS中使用最多一种属性。为了设计师能够灵活地设计网页效果，CSS3增强了该属性的功能，允许在同一元素内叠加多个背景图像。background属性可以设置很多不同的值，从而对背景图像设置不同的样式。拼合图像素材多背景拼合效果7.2.5设置背景图像位置通过background-position属性设置背景图像的具体位置。将背景图像放在左上角用百分比设置背景图像的位置7.2.6固定背景图片位置在网页上设置背景图片时，随着滚动条的移动，背景图片也会跟着一起移动。使用CSS的background-attachment属性可以把背景图像设置成固定不变的效果，使背景图像固定，而不跟随网页内容一起滚动。背景图像会随页面一起移动将背景图像固定在浏览器窗口中7.2.7设置背景图像坐标原点background-origin属性定义background-position属性的参考位置。在默认情况下，background-position属性总是以元素的左上角坐标原点进行背景图像定位。使用background-origin属性可以改变这种定位方式。设置背景图像坐标以边框开始7.2.8设置背景图像的大小在CSS2.0及以前的版本中，图像大小是不可以控制的，如果想要使背景图像填充元素的背景区域，则需要事先设计更大的背景图像，否则背景图像只能按照平铺的方法进行填充。CSS3新增了background-size属性，该属性可以控制背景图像的大小。没有控制大小之前控制大小之后的效果7.2.9设置标题的图像替换使用背景图像的方式替换标题。制作一个标题背景图像图像替换的最终效果7.3设置圆角效果在网页设计中，通常需要把网页分为若干个部分，这正是CSS的强项。使用CSS可以方便地使用各种手段把页面灵活地分为多个部分。但是简单分割出来的都是矩形方框，设置背景颜色和边框的颜色，产生的都只能是单调的矩形方框。而在网页中，经常需要用到圆角的设计。本章专门对圆角的设计进行介绍。7.3.1圆角属性在CSS3之前，如果要用圆角效果，需要图像文件才能达到。在CSS3中可以使用border-radius属性就可以实现圆角效果。7.3.2圆角实例div{height:120px;border:10pxsolid#C0C;-moz-border-radius:20px;/*兼容Gecko引擎*/-webkir-border-radius:20px;/*兼容Webkit引擎*/border-radius:20px;/*兼容标准引擎*/}元素四角均为圆角7.3.3圆角实例使用border-radius属性可以设置容器边角效果。不同属性值的效果7.

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

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

最新文档

评论

0/150

提交评论