WEB入门.八背景特效

张哥编程

发布于 2024-12-18 11:02:18

6000

文章被收录于专栏：云计算linux云计算linux

学习内容

background属性
CSS Sprite 技术
滑动门技术

能力目标

使用background设置网页背景
使用Sprites制作平滑投票特效
使用滑动门技术实现Tab菜单

本章简介

在前面章节中，已经系统地讲解了页面设计中常见的布局模型，主要内容涉及到流动模型和浮动模型。理解了如何在盒子模型的基础上，使用流动模型与浮动模型设计出如网易、淘宝等大型门户网站的页面布局。

一个完整的页面在完成布局设计后，需要增强页面的内容及视觉表现效果。本章将讲解如何使用background属性为页面添加背景，实现页面背景平铺以及背景定位功能。另外，本章内容将讲解如何使用页面图片整合技术减少客户端对服务器的请求；制作论坛的平滑投票特效；使用滑动门技术实现背景随着内容多少自适应的效果，完成页面Tab导航菜单。

4.1 background属性

在传统的页面设计中，设计师使用 img标签向网页中添加大量的图像，这种做法导致服务器处理客户端的请求增多，页面加载速度变慢。为了减少页面上的背景图片数量，可以使用 CSS Sprites将多张小图片整合到一张图片中，再使用 background进行背景图像定位显示来提高页面加载速度。所以对于网页固定位置上的图片，应尽量使用 CSS 的 background属性进行设置，减少img标签的使用。

以下介绍 background 属性常用参数的用法，包括 background-image、background-repeat、background-position等。

4.1.1 background-image 属性

背景图像background-image属性用来定义图像背景路径。

background-image： none |url ( url )

取值说明：

none：默认值，无背景图。

url (url)：使用绝对或相对url地址指定背景图像。

4.1

CSS代码：

#header{

height:95px;

width:600px;

background-image:url(headerbg.png);

margin:0pxauto;

}

</style>

XHTML代码片段：

<body>

</body>

4.1.1 background-repeat 属性

设置元素中背景图像的重复方式，制作重复的背景图像。

background-repeat : repeat ｜ no-repeat｜repeat-x ｜ repeat-y

取值说明：

repeat：默认值，背景图像在纵向和横向上平铺。

no-repeat：背景图像不平铺。

repeat-x：背景图像仅横向平铺。

repeat-y：背景图像仅纵向平铺。

4.2

CSS代码：

#book{

background-image:url(images/hrepeat.jpg);

background-repeat:repeat-x;

width:600px;

height:400px;

border:3pxdouble gray;

}

span{

font-size:50px;

font-family:"华文隶书";

color:red;

display:block;

padding:200px;

}

</style>

XHTML代码片段：

<body>

</div>

</body>

4.3

#book{

margin:100px;

background-image:url(images/vrepeat.jpg);

background-repeat:repeat-y;

width:600px;

height:400px;

border:3pxdouble gray;

}

在浏览器中的运行效果如图 4.1.3所示。

4.1.1 background-position 属性

background-position属性用来设置背景的起始位置。

background-position： length ｜ length

background-position： position ｜ position

取值说明:

length：百分数｜长度值。

position：top｜center｜bottom｜left｜center｜right。

（1）默认值为 0%、0%，此时背景图片将被定位在对象不包括边距(padding)的内容区域左上角。100%、100%此时背景图片将被定位在对象不包括内边距的内容区域右下角。

（2）指定 1 个值，该值为横坐标，纵坐标默认为 50%。

（3）指定2个值，其中第一个值为横坐标，第二个用于纵坐标。

（4）设置值为 right center，因为 right作为横坐标值会覆盖center值，背景图片将居右定位。

（5） postion可以取负值，positionX取负值时表示背景图像向左移动，positionY取负值时表示背景图像向上移动。

（6） position 的值可以取百分比，此时图像的移动方向由另一个值的方向决定。如background-position；100% -50px；时. 其含义是向 X轴左方向移动，保证图像的右侧位置与元素的右侧重合，在Y轴方向上移动 50px。

4.4

CSS代码：

body{

padding:0px;margin:0px;

background-image:url(bg5.jpg);/*背景图片 */

background-repeat:no-repeat; /* 不重复 */

background-position:0% 0%; /* 背景位置，百分比 */

}

p{

padding:10px;margin:5px;

line-height:1.5em;

}

</style>

XHTML代码片段：

<body>

<p>CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。</p>

</body>

background-position:100%100%; /* 背景位置，百分比 */

background-position:right center; /* 背景位置 */

background-position:0% 20px; /* 背景位置，百分比 */

background-position:100% -42px; /* 背景位置，百分比 */

下面通过一个综合案例演示一下background属性的用法。

4.5

CSS代码：

ul#menu { width:300px; height:300px; margin:0pxauto; padding:0px; background:url(images/02.jpg)}

ul#menu li { list-style-type:none; float:left;width:100px; height:100px;}

ul#menu li a { display:block; width:100px;height:100px; text-decoration:none;background: url(images/01.jpg) no-repeat 100px 100px;}

a#item1:hover {background-position: 0 0; }

a#item2:hover {background-position: -100px 0;}

a#item3:hover {background-position: -200px 0;}

a#item4:hover {background-position: 0 -100px;}

a#item5:hover {background-position: -100px -100px;}

a#item6:hover {background-position: -200px -100px;}

a#item7:hover {background-position: 0 -200px;}

a#item8:hover {background-position: -100px -200px;}

a#item9:hover {background-position: -200px -200px;}

</style>

XHTML代码片段：

<body>

</ul>

</body>

初始状态下，超链接背景位置设置成 background-position：l00pxl00px，而它的大小是l00px*l00px，所以超链接背景超出可视范围而无法显示时，黑白照片成为ul的背景图像；当鼠标移动到超链接上，根据超链接设置的背景位置移动背景，形成黑白与彩色图片交替效果，如图4.1.6所示。

注意以每个图片的左上角为0 ，0点；

4.1 滑动门技术

4.1.1 什么是滑动门技术

滑动门概念来源于生活中的推拉门，它通过改变重叠区域的大小来改变占据的空间。在页面设计中，通常利用滑动门原理制作导航菜单，导航栏会根据文本自适应大小，进行滑动。

可以利用两个独立的背景图像实现滑动门，它们分别居于左右。将两幅图像想象为两扇可滑动的门，当二者滑至重叠状态时，占据一个较小的空间；反之，当二者分离开来，则占据一个较大的空间，如图 4.1.17所示。

图4.1.17 滑动门原理

4.1.2 滑动门实现原理

（1）标签结构，代码如下：

</ul>

（2）设置A的背景为背景的左半部分，span的背景为右半部分，如图 4.1.8所示。

实现思路：

准备菜单左侧的 tableft.gif和右侧的 tabright.gif背景图像，每个菜单的结构采用 span标签和 a标签制作；a标签的背景采用tableft.gif，span标签的背景采用 tabright.gif；背景图像不重复。

制作步骤如下：

（1）采用 span标签和超链接搭建导航栏结构，代码如下：

<ul>

</ul>

</div>

（2）定义 tab 的样式属性，代码如下：

#tabs1 {

font-size:93%;

float:left;

width:100%;

background:#F4F7FB;

line-height:normal;

border-bottom:1px solid #BCD2E6;

}

#tabs1 ul {

margin:0;

padding:10px 10px 0 50px;

list-style:none;

}

#tabs1 li {

display:inline;

margin:0;

padding:0;

}

（3）定义超链接和 span标签的样式，代码如下：

#tabs1 a{

float:left;

background:url("images/tableft1.gif")no-repeat left top;

margin:0;

padding:0 0 0 4px;

text-decoration:none;

color:red;

}

#tabs1 aspan {

float:left;

display:block;

background:url("images/tabright1.gif") no-repeat right top;

padding:5px15px 4px 6px;

}

（4）定义菜单鼠标悬停下，超链接和 span标签的样式，代码如下：

#tabs1 a:hover{

background-position:0% -42px;

}

#tabs1 a:hoverspan {

background-position:100%-42px;

}

其中 background-position用来设置背景图像的位置，允许为负值，如 background-position：100% -42px表示在 X轴方向右移动，保证图像的右侧位置与元素的右侧重合，在Y轴方向上移动42px。

4.1.1 应用滑动门技术的玻璃效果菜单

本例中要实现一个玻璃材质效果的水平菜单。为了表现出立体的视觉效果，以及玻璃的质感．必须借助图像才可以实现

本例中用到了两个图像，分别作为整个菜单的背景色平铺使用的，和当鼠标指针经过某个菜单项的时候显示出来的。

从效果图中可以看出，玻璃材质图是一个固定的图像文件，而菜单中的各个菜单项宽窄不一，却都可以完整地显示出来，这是如何实现的呢？这里使用的就是“滑动门”技术，它被广泛应用于各种CSS效果中，因此希望读者能够真正理解这个案例的本质原理。

一、基本思路

首先讲解滑动门技术的核心原理。图4.1.11中的箭头表示了两个圆角矩形图像的滑动方向。较深颜色区域表示二者重叠的部分，当需要容纳较多文字时，重叠就少一些，而需要较少文字时，重叠就多一些。两个图像可以滑动，重叠部分的宽度会根据内容自动调整，就像两扇推拉门一样，因此这种技术就被称为“滑动门”。

<body>

<ul>

<li><a href="#"><b> Contact Us </b></a></li>

</ul>

</div>

</body>

可以看到，每个文字链接都是作为一个列表项目<li>出现的。此外，还对文字设置了加粗显示的效果，这不但可以使字体变粗，而且还可以作为设置玻璃材质背景的“钩子”使用。结合前面的滑动门的原理，可以知道，为了实现滑动门需要两个背景图片，因此就需要两个“钩子”来分别设置背景图片，这里的<a>标记和<b>标记就分别承担了左右门的钩子的任务。

二、设置菜单整体效果

下面设置菜单的整体效果。

① 设置文字的字体和字号，井设置菜单的总体宽度，这个宽度值可以先设一个比较大的值，等最终效果做好以后，再调整到合适的值，代码如下。

#menu {

font-family:Arial;

font-size:14px;

width:400px;

}

② 设置ul的样式，代码如下。

#menu ul {

display:block;

width:500px;

padding:0 0 0 8px;

margin:0;

list-style:none;

height:35px;

}

这里首先设置了padding和margin，然后将list-style属性设置为none，这样可以取消每个列表项目前面的圆点。然后设置高度为35像素，这正是背景图像的高度，最后将背景设置为图像所在的地址。

③ 设置#menu容器中的li的属性。li原本就是块级元素，这里将其设置为向左浮动，这样将使得各列表横向排列，而不是默认的竖直排列，代码如下。

#menu ul li {

float:left;

}

④ 将a元素设置为块级元素，这样整个矩形范围内都会响应鼠标事件，代码如下。

#menu ul li a{

display:block;

float:left;

line-height:35px;

color:#ddd;

text-decoration:none;

padding:0 0 0 14px;

}

上面这段代码中，将a标记设置为块级元素以后，设置了行高line-height属性。设置行高可以使文字竖直方向居中排列。然后将文字设置为浅灰色，并取消链接的下划线。最后，设置padding属性，在每个菜单项的左侧设置了14像素的内边距。

这时的效果就已经完成了基本设置。接下来就是最关键的任务了——设置菜单项的背景。

三、使用“滑动门”技术设置玻璃材质背景

① 首先设置a元素的鼠标经过效果，代码如下。

#menu ul li a:hover{

color:#fff;

background: url(hover.gif);

}

这里将文字设置为白色，然后将玻璃质感的图像文件地址作为背景属性的值，此时在浏览器中查看的话就已经有变化效果了。

注意：可以看到，鼠标指针经过时，玻璃材质的背景已经出现了，但是它的右边被齐刷刷地切断了，而没有出现背景图像的右端。这个问题如何解决呢？

在CSS中是不能使图像的宽度缩放的。解决方案之一是为每一个菜单项创建各自宽度的背景图像，但是显然适应性要差很多，而且会需要多个图像文件，增加下载的流量，因此不是一个好办法。

另外一个可行的解决方案是使用前面在HTML中设置的文字加粗标记<b>。基本思想就是把<b>标记作为“钩子”来设置CSS样式，因此可以再为它的背景设置一个背景圈像。这个背景图像仍然使用惟一的玻璃材质图像文件，不同的是这次从右向左展开，这样就可以出现右边的端点了。具体的方法如下。

② 对b标记的属性进行设髓，这里仅需将其设置为块级元素就可以了，代码如下。

#menu ul li a b{

display:block;

}

③ 设置在鼠标指针经过时的b标记样式。这是很关键的一个步骤，代码如下。

#menu ul li a:hover b{

color:#fff;

background: url(hover.gif) no-repeat rightright top;

}

上面的代码中首先设置文字颜色为白色，这样鼠标指针经过时效果会更加醒目。然后设置背景图片。这个图片将会覆盖在前面定义的“#menu ul li a:hover”中没置的图片的上面。这两个图片实际上是同一个图片，后面的“no-repeat right top”设定了这个背景图的铺设方式，只显示一次，并从右上角开始铺设。

④ 这样基本上已经成功了，只是背景图像还不对称，右边还应该增加一些空白，这只需要在“#menu ul Ii a b”的样式中增加一条内边距的样式，在最右侧对称地增加14像索内边距即可，代码如下。

#menu ul li a b{

display:block;

padding:0 14px 0 0;

}

此时在浏览器中的效果如图1所示，这正是我们需要的效果。

四、进一步解决的问题

1.修饰菜单项的文字

这里需要提示一点。为了能够增加玻璃材质的背景图像，我们使用了b标记作为“钩子”，来挂接CSS样式，这样菜单项的文字就以租体显求了，如果不想使用粗体，那么也很简单，只需要在“#menu uI li a b”和“#menu ul li a:hoverb”两个选择器中分别增加一条样式，使文字的粗细为正常(normal)即可。

2.菜单的背景随浏览器窗口扩展

此外，由于设置了#menu容器的width属性(500px)，因此这个导航菜单的宽度就是固定的了，而有时可能希望菜单的背景随浏览器窗口的扩展而扩展。

为了实现自动扩展，可以进行如下尝试。对#menu的设置有如下代码：

#menu {

font-family:Arial;

font-size:14px;

width:400px;

}

将其修改为：

#menu {

font-family:Arial;

font-size:14px;

margin:0 auto 0 0;

background:url(under.gif);

}

这样简单的修改确实实现了可以随浏览器窗口扩展。

3.设置滚动条

这时又出现了新的问题，当浏览器变窄以后，菜单项会自动折行。在大多数情况下，并不希望出现这种效果，而是希望窗口变窄到一定程度时自动出现滚动条。

这是如何实现的呢？原来蓝色的背景图像是设置在ul的下面的，为了实现菜单项不自动折行，就要给ul设置width属性．这样就会导致背景图像也无法扩展。解决方法是将背景图像从ul移动到#menu容器中，这样背景图像会随着#menu容器的扩展而扩展，同时ul设置宽度后，又限制了菜单项的自动折行。修改后的代码如下。至此本案例全部完成。

#menu {

font-family:Arial;

font-size:14px;

margin:0 auto 0 0;

background:url(under.gif);

}

#menu ul {

display:block;

width:500px;

padding:0 0 0 8px;

margin:0;

list-style:none;

height:35px;

}

4.1.1 应用滑动门技术制作投票

许多门户网站，用户可以对文章进行评论、打分，下面将演示一个平滑图片投票特效的制作过程

代码：

<head>

<styletype="text/css">

.starts{

list-style:none;

margin:0px;

padding:0px;

width:650px;

height:125px;

position:relative;

background:url(start.jpg)0px 0px repeat-x;

overflow:hidden;

}

.starts li a{

position:absolute;

display:block;

width:130px;

height:123px;

text-decoration:none;

z-index:2;

padding:0px;

margin:0px;

}

.startsli a:hover{

background:url(start.jpg)-1px -125px;

z-index:1;

left:0px;

top:0px;

}

.startsa.start1{

left:0px;

}

.startsa.start1:hover{

width:130px;

}

.starts a.start2{

left:130px;

}

.startsa.start2:hover{

width:260px;

}

.starts a.start3{

left:260px;

}

.startsa.start3:hover{

width:390px;

}

.starts a.start4{

left:390px;

}

.startsa.start4:hover{

width:520px;

}

.startsa.start5{

left:520px;

}

.startsa.start5:hover{

width:650px;

}

</style>

</head>

<body>

<ulclass="starts">

</ul>

</body>

</html>

本章总结

（1）本章主要讲解background属性以及background-repeat,background-position属性。

(2) 利用滑动门技术我们可以制作出华丽的菜单效果。

任务实训部分

实训任务1：制作重复背景效果

训练技能点

Ø 使用background-image属性设置背景图像

Ø 使用background-repeat属性设置平铺效果

需求说明

制作砖墙背景效果，效果如图4.2.1所示。

图4.2.1 background-image属性

实现思路

（1）使用div定义砖墙盒子（wall）。

（2）使用background-image(filepath)设置砖墙图片路径。

（3）使用 background-repeat:repeat-x;设置背景图像在水平方向平铺。

关键代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>无标题文档</title>

#wall{

background:url(images/28-1.gif)repeat-y;

width:800px;

height:400px;

padding-left:137px;

}

</style>

</head>

<body>

</body>

</html>

实训任务2：制作在线编辑器

训练技能点

Ø 使用background-position属性定位图像

Ø 使用background-repeat属性设置平铺效果

需求说明

制作HTML在线编辑器页面，效果如图4.2.2所示。

图4.2.2 background-position属性

实现思路

（1）使用div定义command盒子。

（2）使用span标签定义命令按钮，并使用float属性设置span为浮动元素。

（3）使用background属性为span标签设置背景图像，在水平和垂直方向不使用平铺。

（4）使用background-position属性为指定的span标签设置背景定位。

关键代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

span{

display:block;

width:17px;

height:16px;

background-image:url(images/editor.gif);

background-repeat:no-repeat;

text-indent:-999em;

float:left;

margin:2px;

}

.bold{

background-position:0px0px;

}

.italic{

background-position:-17px0px;

}

.underline{

background-position:-34px0px;

}

.color{

background-position:-108px0px;

}

.link{

background-position:-126px0px;

}

.ol{

background-position:-143px0px;

}

.ul{

background-position:-160px0px;

}

.align_left{

background-position:-232px0px;

}

.align_center{

background-position:-252px0px;

}

.align_right{

background-position:-270px0px;

}

#command,#cc{

margin:2pxauto;

padding-left:300px;

}

</style>

</head>

<body>

<spanclass="bold" title="粗体">粗体</span>

<spanclass="italic" title="斜体">斜体</span>

<spanclass="underline" title="下划线">下划线</span>

<spanclass="color" title="颜色">颜色</span>

<spanclass="link" title="链接">链接</span>

<spanclass="ol" title="项目编号">项目编号</span>

<spanclass="ul" title="项目符号">项目符号</span>

<spanclass="align_left" title="左对齐">左对齐</span>

<spanclass="align_center" title="居中">居中</span>

<spanclass="align_right" title="右对齐">右对齐</span>

</div>

<divstyle="clear:both"></div>

</div>

</body>

</html>

需求说明

制作树形菜单框架，实现图书分类，效果如图4.2.3所示。

图4.2.3 树形菜单

提示：

（1）使用div和ul搭建树形菜单框架。

<divclass="max">计算机类</div>

<ul>

<liclass="min">JAVA编程</li>

<li class="min">SQL编程</li>

</ul>

</div>

（2）定义一级目标max的样式。

.max{

position:relative;

width:auto;

height:16px;

background:url(images/sprite.png)0px -350px;

background-repeat:no-repeat;

padding-left:16px;

}

（3）定义二级目录min的样式规则。

.min{

position:relative;

width:auto;

height:16px;

background:url(images/sprite.png)0px -400px;

background-repeat:no-repeat;

list-style-type:none;

margin-top:2px;

padding-left:16px;

font-size:10px;

}

实训任务3：制作QQ空间的Tab菜单

训练技能点

Ø 使用滑动门技术制作菜单结构

Ø 使用background-position属性定位背景

Ø 使用background-repeat属性设置平铺效果

需求说明

制作QQ空间主页Tab菜单，效果如图4.2.4所示。

（1）在a标签中嵌套span标签。

（2） a标签采用左侧背景图像，span标签采用菜单右侧背景图像。

（3）使用background-position属性定位背景图像。

关键代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>无标题文档</title>

body{

margin:0px;

padding:0px;

font: bold12px/1.5em Verdana;

}

img{

border:none;

}

#menu{

float:left;

width:100%;

font-size:93%;

border-bottom:1pxsolid #2763a5;

line-height:normal;

}

#menu ul{

margin:0px;

padding:10px10px 0pa 50px;

list-style:none;

}

#menu li{

display:inline;

margin:0px;

padding:0px;

}

#menu a{

float:left;

background:url(images/tableft.gif)no-repeat left top;

margin:0px;

padding:0px0px 0px 4px;

text-decoration:none;

}

#menu a span{

float:left;

display:block;

background:url(images/tabright.gif)no-repeat right top;

padding:5px15px 4px 6px;

color:#FFF;

}

#menu a:hover{

background-position:0%-42px;

}

#menu a:hover span{

background-position:100%-42px;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

实训任务4：制作QQ空间的应用列表

需求说明

在“指导部分”基础上，完成QQ空间页面应用列表部分，效果如图4 .2 .5所示。

图4.2.5 应用列表

提示：

（1）主页导航菜单的制作参考阶段3指导部分代码。

（2）使用div定义除页面导航栏之外的框架，代码如下：

<divid="left">中间栏</div>

<divid="left">右栏部分</div>

</div>

（3）使用div和ul定义应用列表结构，span定义左栏的标题，代码如下：

<ul>

<liclass="one">信息中心</li>

<liclass="two">好友日志</li>

<liclass="three">听音乐</li>

<liclass="four">心情</li>

<liclass="five">投票</li>

<liclass="six">礼物</li>

<liclass="seven">分享</li>

<liclass="eight">好友问问</li>

<liclass="nine">好友买卖</li>

<liclass="ten">小纸条</li>

<liclass="eleven">好友管理</li>

</ul>

（4）定义左栏的样式规则left，样式属性包括：宽度为父级容器的20%，边框颜色为#C2DDE6，背景颜色为white。

（5）定义标题样式规则title，样式属性包括：display:block;宽度自适应及背景图像。

（6）定义li的背景图像，背景在水平方向和垂直方向不平铺。

（7）使用background-position属性为指定的li元素设置背景图像定位，实现显示不同背景的效果。

（8）设置li的左内边距，大小为背景图像的宽度。

巩固练习

一、选择题

1. 以下选项，不属于background属性的参数是（）。

A. background-image

B. background-repeat

C. background-position

D. background-url

2、以下关于background说法正确的是（）。

A. background只能设置页面的背景颜色

B. background用来设置页面元素的背景图像

C. background不能够精确定位背景图像

D. background属性默认情况下只在水平方向重复背景图像

3. 以下关于 CSS Sprites 图片整合技术的优点说法不正确的是（）。

A. 图片整合技术可以加快页面浏览的速度

B. 图片整合技术可以减少对服务器的请求

C. 图片整合技术可以减少请求图像文件的字节数

D. 图片整合技术会加重对服务器的负担

4. 在 CSS Sprites 图片整合技术中，实现背景定位的是（）。

A. background-image

B. background-url

C. position

D. background-position

5. 下列关于滑动门技术说法错误的是（）。

A. 滑动门技术采用两张图片重叠的方式实现

B. 滑动门技术应用于背景自适应

C. 滑动门技术可以根据元素内的文字自动改变背景的宽度

D. 滑动门技术只能应用于导航菜单的制作

二、操作题

在指导练习基础上完善QQ空间主页，效果如图4 .3 .1所示。

提示：

（1）使用div定义中间栏的页面结构，代码结构如下。

<spanclass="title">信息中心</span>

<imgsrc="images/head.png">

<divid="modif"><a href="#">[修改资料]</a></div>

<divid="state">工作中请勿打扰</div>

<divid="middle_menu1">

</div>

<divsytle="clear:both"></div>

<divid="info">

<textarea class="teaxtarea"cols="35" rows="6">我在做什么...</textarea><br/>

<input type="button" id="buttn"style="margin:5px;background-color:#c2dde6;

width:50px;height:21px; " value="发表"/><br/><br/>

</div>

（2）定义middle_menu1中span标签为相对定位，top值为1px，并且定义span下边框为白色，覆盖info盒子的上边框，代码片段如下。

#middle_menu1 {

display:block;

float:left;

width:300px;

height:15px;

padding-left:60px;

border-bottom:3pxsolid white;

z-index:20;

}

（3）使用background属性为span标签设置背景，并且定义第一个span标签的上边框、做边框、右边框。

#middle_menu1 .menul{

border-top:1pxsolid #C2DDE6;

border-left:1pxsolid #C2DDE6;

border-right:1pxsolid #C2DDE6;

background:url(images/1.gif)no-repeat 0px -5px;

}

#middle_menu1 .menu2{

border-top:1pxsolid #C2DDE6;

border-left:1pxsolid #C2DDE6;

border-right:1pxsolid #C2DDE6;

background:url(images/1.gif)no-repeat 0px -19px;

}

. . . .

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-01-11，如有侵权请联系 cloudcommunity@tencent.com 删除

入门

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度