第3课CSS1-设置方框与背景效果_第1页
第3课CSS1-设置方框与背景效果_第2页
第3课CSS1-设置方框与背景效果_第3页
第3课CSS1-设置方框与背景效果_第4页
第3课CSS1-设置方框与背景效果_第5页
已阅读5页，还剩44页未读， 继续免费阅读

下载本文档

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

文档简介

CSS第3课用CSS设置方框效果设置对象的背景颜色与背景图像特别案例：首字下沉图片替换标题技术利用滑动门技术制作宽度变化的背景制作高度变化的背景效果第五章、用CSS设置方框效果边框属性：border宽度和高度：width、height对象浮动：float对象外边距：margin5.1、给对象添加设置边框

属性（border）边框属性有3个：border-width：边框粗细border-color：边框颜色border-style：边框线形也可以写成：.test1{border:#0091pxdotted}

边框颜色粗细线型<h1class=“test1">美丽的阳朔</h1><imgclass=“test2"src="pic/1.jpg"/>创建CSS样式如下：<style>.test1{border:#0093pxdotted}.test2{border:#F002pxsolid}</style>应用CSS样式后给图片加边框给h1标题加边框给p段落加边框。给任何的标记加边框边框线型：5.2 设置对象宽度与高度

属性（width、height）Width：设置宽度，如width：30%注意：当设置值为百分数时，表示对象宽度为其父层标记宽度的30%。Height：设置高度，如height：100pxCSS属性如下：.test1{width:250px;}.test2{width:50%;height:50%}<h1class="test1">美丽的阳朔</h1><imgclass="test2"src="pic/1.jpg"/>设置图片宽度与高度为250px绝对长度设置图片宽度与高度为父层方框的百分比长度。5.3 设置对象的文字环绕

（float属性）Float的属性值有：Left：元素向左浮动Right：元素向右浮动Inherit：继承父级元素的浮动属性None：取消浮动浮动的原理：盒子可以是所有的html元素，比如图片、表格、甚至是文字。<body><h1

class="test1">美丽的阳朔</h1><img

class="test2"

src="pic/1.jpg"/><p><spanclass=“firstletter”>阳</span>朔县（英文名：Yangshuo），电话区码：0773，邮编区码：541900阳朔县位于广西壮族自治区东北部，桂林市区东南面，地处东经110。13'-110。40'，北纬24。38’—25。04’之间。</p><p>隶属广西桂林市,位于漓江西岸,风景秀丽。建县始于隋开皇十年（公元590年），距今已1400余年。县城距桂林市区65公里，距自治区首府南宁445公里。………………</p></body>案例：设置图片与文字环绕效果设置CSS属性如下：<style>.test2{ width:150px;

float:right;

}.firstletter{ font:3em"华文琥珀";

float:left;}</style>对象设置了浮动后，则后面的内容会填补其旁边的空白。5.4 设置对象的外边距（margin）Margin设置对象与外部元素的距离。也可以单独设置某个方向的外边距。Margin-top:设置上方外边距Margin-left:设置左侧外边距Margin-right:设置右侧外边距Margin-bottom:设置底部外边距<style>.test2{

margin-left:20px; margin-bottom:10px}p{ font-size:13px; line-height:1.5}.firstletter{ font:3em"华文琥珀"; float:left;

margin-right:10px}</style>设置对象外边距与文字的距离5.5内边距－－padding用于设置对象边框与内容之间的距离。padding可以设置4个属性值：如：padding：10px20px10px20px； 按照顺时针方向，依次为上、右、下、左padding的值。第6章、设置对象的背景颜色与背景图像6.1 设置背景颜色(background-color)6.2 设置背景图像(background-image)6.3 设置背景图像平铺(background-repeat)6.4 设置背景图像位置(background-position)6.5 设置背景图片位置固定(background-attachment)Ps：以上属性可设置于任何的对象如标题、段落、表格、图片等。6.1 设置背景颜色(background-color)<style>.test1{ …… width:250px;

background-color:黄色;}.firstletter{ ……

background-color:黑色;

color:白色 padding:5px}</style><body><h1class="test1">美丽的阳朔</h1><imgclass="test2"src="pic/1.jpg“><p><spanclass=“firstletter”>阳</span>朔县（英文名：Yangshuo），…………</p></body>设置首字背景色6.2 设置背景图像(background-image)准备几个背景图像：bg-2.jpgbg-5.jpgbg-1.jpg<style>body{

background-image:url(pic/bg-2.jpg)}.test1{

background-image:url(pic/bg-1.jpg)}Span.firstletter{

background-image:url(pic/bg-5.jpg)}</style><body><h1class="test1">美丽的阳朔</h1><imgclass="test2"src="pic/1.jpg“><p><spanclass=“firstletter”>阳</span>朔县（英文名：Yangshuo），…………</p></body>设置对象背景图片及浏览窗背景图6.3 设置背景图像平铺

(background-repeat)在设置背景时，图像有水平和竖直方向平铺。repeat：默认值沿水平和竖直方向平铺repeat-x：只沿水平方向平铺repeat-y：只沿竖直方向平铺no-repeat：不平铺，只显示一次bg-g.jpg准备一个带渐变的背景图像:由于浏览窗对应的标记是body，所以其背景图片是通过给body添加background-属性实现的。<style>body{background-image:url(pic/bg-g.jpg);background-repeat:repeat-x;background-color:#CCC}</style>案例：制作浏览窗顶部渐变的网页背景效果：6.4 设置背景图像位置(background-position)设置背景图像位置在其父层元素的四个角落，有以下几个值：left、right、center、top、bottom设置背景图像在其父层元素的坐标位置，元素的左上角作为坐标起点。用数值或百分比表示位置值。案例1：设置网页背景图像位置在浏览器左下角<style>body{ background-image:url(pic/cup.gif); background-position:bottomleft; background-repeat:no-repeat}</style>案例2：设置网页背景图像位置在浏览器顶部100px、左侧50px处。<style>body{background-image:url(pic/cup.gif);background-position:50px150px;background-repeat:no-repeat}</style>6.5 设置背景图片位置固定(background-attachment)背景图像固定属性有三个值：Fixed：背景固定。Scroll：随着滚动条移动，背景图像也跟着一起移动。Inherit：继承父层元素的属性值。6.6 图片替换技术

---要求在不需要插入图片的情况下，利用背景图像技术实现用图片替换标题效果标题替换前用图片替换标题1、制作一个标题背景图像:h1.gif步骤：2、接下来对html代码做小小调整，给h1标题添加一个外层标记div：<div><h1>

美丽的阳朔</h1></div>3、先设置外层标记div：为了方便观察div和h1的范围变化，我们替它们加上边框，完成后再把它删掉。可看到div的边框比h1的边框有一段距离，这是标记的默认样式造成的。到底是div的内边距还是h1的外边距造成这样的距离呢？答案：经过测试得知，div是不带任何内、外边距的，所以我们需要把h1的外边距设置为0，以使得两者边缘重合。设置div的背景图片为制作好的标题图片，不重复，位置居中。为保证div能完整显示背景图片，还要设置其高度height与背景图片相一致。Div{……..height：与图片高度一致;………}4、设置内层的h1标记隐藏： h1{。。。。Visibility：hidden。。。。}5、最后去掉边框线。6.7 滑动门技术在一个网页中，可能需要给标题添加背景图片，由于标题的宽度各不相同，是否意味着我们需要制作不同宽度的背景图片呢？在这里我们利用滑动门技术，只需要制作一个背景图片，然后给标题文字设置两个重叠的背景图，上面的背景遮蔽下面的，我们通过设置参数使下面的背景露出左侧的花纹，而上面的背景只显示右侧的花纹。然后给对象设置不同的宽度，即可产生宽度变化的效果，我们把这种背景横向变化称之为水平滑动。基于同样的原理，我们还可以对不同的段落文字共享相同的背景图片，并制作高度变化的垂直滑动效果。案例制作背景宽度水平变化的效果制作背景高度垂直变化的效果制作标题的水平滑动准备一个背景图像准备一个背景图像.修改网页html代码，替每个h3标题添加一个外层标记DIV。

<div><h3>泸沽湖岛屿</h3></div>设置外层标记div：我们必须让两个背景图完全重叠。因此要观察div和h3的范围，我们分别给它们加上边框线，完成后再把它删掉。通过边框线可看到，由于h3的默认外边距导致了两个标记之间产生了距离，我们设置h3的外边距为0，使得两者边框重合。H3{。。Margin：0px。。。}以下设置div属性：设置div背景为制作好的图片，不重复，背景图位置居左。为使得背景能完整显示，再设置div的高度与背景图片相一致。

{。。height:与图片一致。。}此时我们看到一个固定宽度的背景图片，但只有一个是不能做出滑动背景效果的。我们需要替其内嵌的标记h3再设置相同的背景图片，不重复，位置居右，高度与图片相一致。此时两个嵌套标记的背景图分别居住左右两端，两端的位置在哪里是根据div的宽度来决定的，由于div目前没有设置宽度，因此其宽度会自动延伸至其父层标记body（即浏览窗）的宽度。滑动门的原理就是利用两个嵌套的标记，设置相同的背景图片，当div宽度缩小时，两个背景互相重叠，内嵌标记h3的背景显示在顶层，遮蔽其父亲div的背景。当我们设置div宽度为200px，该宽度小于图片宽度，使得h3的背景图左侧花纹无法显示，这正是我们需要的。接下来，我们希望露出被遮蔽的div背景图的左侧花纹：设置div的左内边距为花纹宽度：

div{….padding-left:25px..}这是设置div宽度为500px的效果，我们看到右侧一个完整的图片是h3的背景，左侧被遮蔽一半的是div的背景。但这不是我们要的，我们希望h3的左侧花纹不要显示，由于h3的宽度是根据div的宽度而自动延伸，因此我们只要设置更小的div宽度。现在所有标题的花纹都显示出来了，但宽度都一样。这也不是我们需要的。但我们离成功只差一步了，撤销对div标记的宽度设置，为了做出宽度不同的效果，我们应根据标题的文字数量来设置不同的宽度值，并分别应用在每个标题上。我们创建几个选择器，设置不同的宽度，并应用在每个标题的div标记中。.title1{width:180px}.title2{width:200px}.title3{width:280px}.title4{width:300px}。。。。。<divclass="title1"><h3>泸沽湖简介</h3></div><divclass="title2"><h3>泸沽湖岛屿</h3></div>。。。。。。设置h3的右内边距为25px，文字居中，以使得文字与左右端距离相等。

h3{…padding-right:25px;text-align:center…}最后，去掉全部辅助边框线。制作背景高度垂直滑动的效果准备一个背景图像注意：如果我们要在同一个网页制作垂直变化的滑动门效果，由于要继续添加div标记，因此，之前做水平滑动时使用的div标记选择器都应全部改用类别选择器。div{。。。。}，要改为：.title1，.title2，.title3，.title4，{。。。}准备一个背景图像.修改网页html代码，替每段p标记文字添加一个外层标记DIV。并赋予每个div一个类别名称为”text”。<divclass="text”><p>省级风景名胜区泸沽湖。。。</p></div><divclass="text"><p>泸沽湖山美水美人更美，….</p></div>……设置类别选择器“.text”的样式：我们首先让两个背景图完全重叠。因此要观察div和h3的范围，我们分别给它们加上边框线，完成后再把它删掉。同样的由于p的默认外边距导致了两个标记之间产生了距离，我们设置p的外边距为0，使得两者边框重合。

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

温馨提示

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

最新文档

评论

0/150

提交评论